JavaScript에서 변수를 선언하는 방법에는 여러 가지가 있습니다. 이번 글에서는 var, let, const 세 가지 변수 선언 방법에 대해 알아보고 각각의 특징과 사용 사례를 살펴보겠습니다.

var

// var로 변수 선언
var name = "John";

• 특징 함수 스코프를 가집니다. 함수 내에서 선언한 변수는 함수 내에서만 유효합니다. 호이스팅(hoisting)이 발생합니다. 선언 전에 변수를 사용해도 오류가 발생하지 않습니다. 변수를 재선언할 수 있습니다.

• 사용 사례 ES6 이전의 JavaScript 코드에서 주로 사용됩니다. 함수 스코프를 이용하여 변수의 유효 범위를 제한하고자 할 때 사용됩니다.

let

// let으로 변수 선언
let age = 30;

• 특징 블록 스코프를 가집니다. 블록 내에서 선언한 변수는 블록 내에서만 유효합니다. 호이스팅이 발생하지만, 초기화되기 전에 변수를 사용하면 ReferenceError가 발생합니다. 변수를 재선언할 수 없습니다.

• 사용 사례 변수의 유효 범위를 블록 단위로 제한하고자 할 때 사용됩니다. 반복문에서 반복 변수로 사용될 때 많이 사용됩니다.

const

// const로 변수 선언
const PI = 3.14;

• 특징 블록 스코프를 가집니다. 상수를 선언할 때 사용되며, 재할당이 불가능합니다. 선언과 동시에 초기화되어야 합니다.
• 사용 사례 상수 값을 선언하고 변경되지 않도록 하고자 할 때 사용됩니다. 객체나 배열의 참조는 변경할 수 있지만, 새로운 값을 할당할 수 없습니다.

마치며

var, let, const는 각각 다른 변수 선언 방식을 가지고 있으며, 각각의 특징에 맞게 적절한 상황에서 사용되어야 합니다. 새로운 코드를 작성할 때는 let과 const를 사용하여 변수의 유효 범위를 명확히 지정하고, var는 사용을 피하는 것이 좋습니다. 변수의 재할당이 필요 없을 경우에는 const를 사용하여 상수를 선언하는 것이 바람직합니다.

CSS Animation은 웹 요소에 동적이고 생동감 있는 효과를 부여하여 사용자의 시선을 끌고 상호작용성을 높이는 데 사용됩니다. 이번 글에서는 CSS Animation의 기본 개념과 사용법, 그리고 몇 가지 실제 예시를 살펴보겠습니다.

기본적인 CSS Animation 구성 요소

/* 기본적인 CSS Animation 설정 */
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.element {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes: 애니메이션 키프레임을 정의하는 데 사용됩니다. 시작과 끝 상태를 지정하여 애니메이션의 흐름을 제어합니다. animation-name: 적용할 키프레임의 이름을 지정합니다. animation-duration: 애니메이션의 지속 시간을 지정합니다. animation-timing-function: 애니메이션의 타이밍 함수를 지정하여 변화 속도를 조절합니다. animation-delay: 애니메이션 시작까지의 지연 시간을 지정합니다. animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다. infinite로 설정하면 무한 반복됩니다. animation-direction: 애니메이션의 반복 방향을 지정합니다.

주요 애니메이션 효과

• 페이드 인/아웃

  @keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
  }
  

.element { animation-name: fade-in; animation-duration: 1s; }

- 회전
```css
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.element {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

• 축소/확대

  @keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
  }
  

.element { animation-name: scale; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; }

# 실제 예시
- 버튼 클릭 애니메이션
```html
<button class="btn">Click me</button>

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.btn {
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

###마치며 CSS Animation을 활용하면 웹 요소에 동적이고 매력적인 효과를 부여하여 사용자의 시선을 끌고 인터랙션을 향상시킬 수 있습니다. 다양한 효과와 옵션을 조합하여 웹 페이지를 더욱 생동감 있게 만들어보세요.

media queries?

미디어 쿼리(Media Queries)는 CSS3의 기능 중 하나로, 장치의 특성에 따라 스타일을 조정하는 데 사용됩니다. 이를 통해 다양한 화면 크기, 해상도, 장치 유형에 맞춰 웹 페이지를 최적화할 수 있습니다. CSS Media Queries는 웹 디자인을 반응형으로 만드는 데 중요한 역할을 합니다. 이 기능을 사용하면 다양한 장치와 화면 크기에 따라 스타일을 동적으로 조정하여 최적의 사용자 경험을 제공할 수 있습니다. 이번 글에서는 CSS Media Queries의 개념과 활용 방법에 대해 알아보겠습니다.

media query 사용 방법

/* 미디어 쿼리 구문 */
@media screen and (max-width: 768px) {
  /* 768px 이하의 화면 크기에 적용되는 스타일 */
  body {
    font-size: 14px;
  }
}

@media: 미디어 쿼리를 시작하는 키워드입니다. screen: 스크린(화면) 미디어 타입을 지정합니다. 다른 타입으로는 print, speech 등이 있습니다. (max-width: 768px): 조건을 나타내는 부분으로, 이 예시는 화면 너비가 768px 이하일 때 적용됩니다. 중괄호 내에는 해당 조건이 참일 때 적용할 CSS 스타일을 작성합니다.

주요 사용 사례

• 모바일 최적화

  @media screen and (max-width: 480px) {
  /* 모바일 화면에 대한 스타일 조정 */
  }

• 태블릿 및 데스크톱 최적화

  @media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 태블릿 화면에 대한 스타일 조정 */
  }

다양한 미디어 타입

screen: 컴퓨터 화면, 태블릿, 스마트폰 등의 화면 print: 프린터 출력 미디어 speech: 음성 합성장치

유의사항

미디어 쿼리는 CSS3부터 지원되며, 모든 브라우저에서 완벽하게 지원되지 않을 수 있습니다. 호환성을 고려해야 합니다. 가능하면 모바일 우선(Mobile-first) 디자인을 고려하여 시작하는 것이 좋습니다.

마치며

미디어 쿼리는 반응형 웹 디자인을 구현하는 데 필수적인 기술 중 하나입니다. 다양한 미디어 타입과 조건을 활용하여 웹 페이지를 다양한 환경에 맞게 최적화하는 것이 중요합니다. 해당 기능을 활용하여 웹 페이지의 사용자 경험을 향상시키는 것에 도움이 되길 바랍니다.

CSS Pseudo-elements와 Pseudo-classes는 웹 디자인에서 특정 상황에 스타일을 적용하는 데 사용되는 강력한 기능입니다. 이들을 활용하면 일반적인 HTML 요소 외에도 스타일을 적용할 수 있습니다. 이번 글에서는 CSS Pseudo-elements와 Pseudo-classes에 대해 자세히 알아보고, 각각의 사용법과 예시를 살펴보겠습니다.

Pseudo-elements (가상 요소)

Pseudo-elements는 HTML 요소의 특정 부분을 선택하여 스타일을 적용하는 데 사용됩니다. 가상 요소는 콘텐츠를 생성하거나 선택한 요소의 특정 부분에 스타일을 적용할 수 있습니다.

1. ::before와 ::after ::before와 ::after 가상 요소는 선택한 요소의 내용의 앞과 뒤에 콘텐츠를 추가할 수 있습니다. 이를 활용하여 요소에 장식이나 아이콘을 추가할 수 있습니다.

.element::before {
  content: "Before content";
}

.element::after {
  content: "After content";
}

2. ::first-line와 ::first-letter ::first-line은 선택한 요소의 첫 번째 줄에 스타일을 적용하고, ::first-letter는 첫 번째 글자에 스타일을 적용합니다.

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 150%;
}

Pseudo-classes (가상 클래스)

Pseudo-classes는 특정 상태에 있는 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 예를 들어, 사용자의 동작에 따라 요소의 스타일을 변경할 수 있습니다.

1. :hover :hover 가상 클래스는 요소에 마우스를 올렸을 때의 상태를 선택합니다. 이를 활용하여 링크나 버튼에 호버 효과를 적용할 수 있습니다.

a:hover {
  color: red;
}

2. :nth-child :nth-child 가상 클래스는 선택한 요소의 자식 요소 중에서 지정한 위치에 있는 요소를 선택합니다. 이를 활용하여 특정 위치에 있는 요소에 스타일을 적용할 수 있습니다.

ul li:nth-child(odd) {
  background-color: lightgray;
}

마치며

CSS Pseudo-elements와 Pseudo-classes는 웹 디자인에서 요소의 특정 부분이나 상태에 따라 스타일을 적용하는 데 유용한 도구입니다. 이를 활용하여 웹 페이지의 디자인을 더욱 다양하고 효과적으로 구성할 수 있습니다. 유연한 스타일링을 위해 Pseudo-elements와 Pseudo-classes를 적절히 활용해보세요.

CSS Calc 함수는 CSS에서 값을 계산하고 동적으로 레이아웃을 조정하는 데 사용됩니다. 이 함수를 사용하면 복잡한 레이아웃을 구성하고 반응형 디자인을 구현하는 데 도움이 됩니다. 이번 글에서는 CSS Calc 함수에 대해 자세히 알아보고, 실제 활용 사례를 살펴보겠습니다.

Calc 함수의 기본 개념

CSS Calc 함수는 수학적인 계산을 수행하여 값을 동적으로 생성합니다. 이 함수를 사용하면 단위를 포함한 값들을 더하고 빼거나 곱하고 나눌 수 있습니다. 예를 들어, width: calc(50% - 20px)는 요소의 너비를 화면 너비의 절반에서 20px를 뺀 값으로 설정합니다.

Calc 함수의 활용

1. 레이아웃 조정 Calc 함수를 사용하면 레이아웃을 동적으로 조정할 수 있습니다. 예를 들어, 헤더와 푸터의 높이를 고정하고 나머지 공간을 콘텐츠 영역으로 설정하려면 다음과 같이 할 수 있습니다.

.header {
  height: 80px;
}

.footer {
  height: 60px;
}

.content {
  height: calc(100vh - 80px - 60px);
}

2. 반응형 디자인 Calc 함수를 사용하면 반응형 디자인을 더 쉽게 구현할 수 있습니다. 예를 들어, 네비게이션 바의 너비를 화면 너비의 일정 비율로 설정하려면 다음과 같이 할 수 있습니다.

.navbar {
  width: calc(25% - 20px); /* 화면 너비의 25%에서 여백 20px를 뺀 값으로 설정 */
}

주의사항 Calc 함수 내에서 연산자의 좌우에는 공백이 있어야 합니다. 예를 들어, calc(50% - 20px)와 같이 작성해야 합니다.

Calc 함수는 브라우저 호환성이 좋지만, 모든 브라우저에서 지원되지는 않을 수 있습니다. 따라서 사용 시에는 호환성을 고려해야 합니다.

마치며

CSS Calc 함수는 CSS를 사용하여 동적이고 반응형 레이아웃을 만드는 데 효과적인 도구입니다. 이 함수를 활용하여 요소의 크기와 위치를 더 유연하게 제어할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. Calc 함수를 적절히 활용하여 더 나은 웹 디자인을 구현해보세요.

CSS의 position 속성은 웹 요소의 위치를 정의하는 데 사용됩니다. 이 속성을 이해하고 올바르게 활용하면 웹 페이지의 레이아웃을 더욱 유연하게 제어할 수 있습니다. 이번 글에서는 CSS position 속성에 대해 자세히 알아보고, 각각의 값이 어떤 역할을 하는지 살펴보겠습니다.

position 속성의 값

1. static: 요소의 위치를 기본적인 문서 흐름에 따라 배치합니다. 이 값은 기본값이며, 다른 위치 속성들과는 달리 위치 조정에 영향을 주지 않습니다.

2. relative: 요소의 위치를 자기 자신 기준으로 이동시킵니다. 즉, 요소가 자신의 원래 위치를 기준으로 상대적으로 이동합니다. 다른 요소들과 겹칠 수 있지만, 다른 요소들의 위치에는 영향을 주지 않습니다.

3. absolute: 요소의 위치를 부모 요소 중에서 위치가 지정된 가장 가까운 요소를 기준으로 이동시킵니다. 만약 부모 요소 중에 위치가 지정된 요소가 없으면 문서의 최상위 요소(<html>)를 기준으로 이동합니다. 이 값은 주로 부모 요소 내에서 자유롭게 위치를 지정할 때 사용됩니다.

4. fixed: 요소의 위치를 뷰포트(브라우저 화면)에 상대적으로 고정시킵니다. 스크롤을 내리거나 올려도 해당 요소는 화면에서 고정되어 있습니다. 주로 고정된 헤더나 사이드바 등을 만들 때 사용됩니다.

5. sticky: 요소는 부모 요소의 스크롤 영역을 기준으로 위치가 지정됩니다. 사용자가 스크롤을 내리거나 올릴 때 요소가 화면에 고정되고, 스크롤 영역을 벗어나면 일반적인 문서 흐름에 따라 배치됩니다.

position 속성의 활용

1. position: relative: 요소를 원래 위치를 기준으로 상대적으로 이동시킬 때 사용합니다. 주로 요소를 조금씩 이동시키거나, 겹쳐 있는 요소들의 위치를 조정할 때 사용됩니다.

2. position: absolute: 요소를 부모 요소 내에서 자유롭게 위치시킬 때 사용합니다. 주로 모달 창이나 드롭다운 메뉴 등을 만들 때 사용됩니다.

3. position: fixed: 페이지 상단에 고정된 헤더나 사이드바 등을 만들 때 사용됩니다.

4. position: sticky: 특정 요소를 스크롤을 내릴 때 화면에 고정시키고, 특정 위치에 도달하면 다시 문서 흐름에 따라 배치될 때 사용됩니다.

마치며

position 속성은 웹 디자인에서 요소의 위치를 제어하는 데 필수적인 속성입니다. 각 값의 특징과 활용법을 잘 이해하고 적절히 활용한다면, 웹 페이지의 레이아웃을 더욱 다양하고 효과적으로 제어할 수 있습니다.

CSS Box Model은 웹 개발에서 중요한 개념 중 하나입니다. 웹 페이지의 모든 요소는 상자(Box)로 간주되며, 각 상자는 content, padding, border, margin으로 구성됩니다. 이번 글에서는 CSS Box Model에 대해 자세히 알아보고, 각 부분이 어떻게 동작하는지 살펴보겠습니다.

Box Model의 구성 요소

1. Content: 상자의 내용 부분을 의미합니다. 이는 텍스트, 이미지 또는 다른 HTML 요소가 될 수 있습니다. Content의 크기는 width와 height 속성으로 제어됩니다.

2. Padding: Content와 Border 사이의 여백을 나타냅니다. Padding은 상자의 내용을 감싸는 공간으로, 내용과 경계 사이의 여백을 조절합니다. Padding의 크기는 padding-top, padding-right, padding-bottom, padding-left 속성으로 제어됩니다.

3. Border: 상자의 테두리를 나타냅니다. Border는 Content와 Padding의 외곽에 위치하며, 요소의 외형을 꾸미고 경계를 만듭니다. Border의 크기와 스타일은 border-width, border-style, border-color 속성으로 제어됩니다.

4. Margin: 상자의 바깥 여백을 나타냅니다. Margin은 상자와 다른 요소 사이의 공간을 조절하며, 요소 간의 간격을 설정합니다. Margin의 크기는 margin-top, margin-right, margin-bottom, margin-left 속성으로 제어됩니다.

Box Model의 동작

CSS Box Model은 각 상자의 크기를 계산하는 데 사용됩니다. 예를 들어, 요소의 실제 너비는 Content 너비에 Padding과 Border의 크기를 추가한 것이며, 전체 상자의 너비는 Margin을 추가한 것입니다. 따라서 Box Model을 이해하면 요소의 크기와 위치를 더 정확하게 제어할 수 있습니다.

Box Model의 활용

Box Model은 웹 디자인에서 중요한 개념입니다. 올바른 Padding, Border, Margin 값을 설정하여 요소들 간의 간격을 조절하고 레이아웃을 제어할 수 있습니다. 또한, Box Model을 활용하여 요소의 크기와 위치를 조절하여 원하는 디자인을 구현할 수 있습니다.

마치며

CSS Box Model은 웹 디자인에서 필수적인 개념 중 하나입니다. 이를 이해하고 활용하면 웹 페이지의 레이아웃을 더 효과적으로 제어할 수 있습니다. Box Model을 잘 활용하여 웹 디자인을 더욱 멋지고 사용자 친화적으로 만들어보세요.

CSS Specificity는 스타일 규칙이 적용되는 우선순위를 결정하는 방법입니다. 각 선택자에는 특정성 값이 있으며, 이 값이 높을수록 해당 스타일 규칙이 우선적으로 적용됩니다. CSS Specificity는 다음과 같은 순서로 계산됩니다.

1. 인라인 스타일(Inline Styles): HTML 요소에 직접 적용된 스타일은 가장 높은 우선순위를 갖습니다.
2. ID 선택자: #으로 시작하는 ID 선택자는 다음으로 높은 우선순위를 가집니다.
3. 클래스 및 속성 선택자: .class, [attribute]와 같은 선택자는 ID 선택자보다 낮은 우선순위를 갖지만, 태그 선택자보다는 높은 우선순위를 갖습니다.
4. 태그 선택자: div, p와 같은 태그 선택자는 가장 낮은 우선순위를 갖습니다. Specificity 계산 방법

특정성 값

CSS Specificity는 각 선택자의 특정성 값을 계산하여 결정됩니다. 특정성 값은 다음과 같이 계산됩니다.

인라인 스타일: 1000 ID 선택자: 100 클래스, 속성, 가상 클래스 선택자: 10 태그 선택자, 가상 요소 선택자: 1 특정성 값은 각 카테고리의 개수를 세어 합산합니다. 예를 들어, div.box라는 선택자는 클래스 선택자 1개와 태그 선택자 1개로 이루어져 있으므로 특정성 값은 11이 됩니다.

Specificity 규칙

CSS Specificity에 대한 몇 가지 규칙이 있습니다.

더 구체한 선택자가 우선권을 갖습니다. 특정성 값이 같으면 나중에 선언된 스타일이 우선권을 갖습니다. !important를 사용한 스타일은 다른 모든 스타일을 무시하고 우선적으로 적용됩니다. 하지만 !important는 가능한 피하는 것이 좋습니다.

Specificity의 활용

CSS Specificity를 이해하면 코드의 예상치 못한 동작을 방지할 수 있습니다. 또한, 특정 스타일이 다른 스타일에 우선하여 적용되는 이유를 이해할 수 있습니다. 올바른 Specificity를 활용하여 코드를 작성하면 유지보수가 더 쉬워집니다.

마치며

CSS Specificity는 CSS를 더 효율적으로 작성하고 관리하는 데 도움이 되는 중요한 개념입니다. 이를 잘 이해하고 활용하면 코드의 일관성을 유지하고 예상치 못한 버그를 방지할 수 있습니다.

CSS 상속은 부모 요소에 적용된 스타일이 자식 요소로 전달되는 과정을 말합니다. 예를 들어, 부모 요소에 특정 폰트나 색상이 적용되었다면, 자식 요소에도 이 스타일이 적용됩니다. 이것은 코드의 반복을 줄이고 일관된 디자인을 유지하는 데 도움이 됩니다.

상속되는 속성

일부 CSS 속성은 기본적으로 상속됩니다. 이러한 속성들은 대부분 텍스트 스타일링과 관련이 있습니다. 예를 들어, 폰트 크기, 색상, 스타일 등이 여기에 해당합니다. 이러한 속성들은 부모 요소에서 설정되면 자식 요소에도 적용됩니다.

그러나 모든 속성이 상속되는 것은 아닙니다. 예를 들어, 배경색이나 너비 같은 레이아웃과 관련된 속성은 상속되지 않습니다.

상속 방지

상속을 원치 않는 경우, 특정 속성을 상속되지 않도록 설정할 수 있습니다. 이를 위해 inherit 값을 사용할 수 있습니다. 예를 들어, 다음 코드는 특정 요소의 폰트 스타일을 상속하지 않도록 설정합니다.

.child {
  font-family: inherit; /* 부모 요소로부터 상속되지 않음 */
}

또는, initial 값을 사용하여 기본값으로 되돌릴 수도 있습니다.

상속의 장점

일관성 유지: 부모 요소에서 설정된 스타일이 자식 요소로 전달되므로 일관된 디자인을 유지할 수 있습니다. 코드 간결성: 반복적인 스타일 설정을 줄여 코드를 더 간결하게 만듭니다. 유지보수 용이성: 한 곳에서 스타일을 수정하면 모든 자식 요소에도 적용되므로 유지보수가 쉽습니다.

마치며

CSS 상속은 웹 개발에서 매우 유용한 기능이며, 올바르게 활용하면 코드를 더 효율적으로 만들 수 있습니다.

CSS(카스케이딩 스타일 시트)는 웹 개발에서 디자인과 레이아웃을 제어하는 핵심적인 언어입니다. 그 중에서도 선택자(Selector)는 특히 중요한 역할을 합니다. 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 이 글에서는 CSS 선택자에 대해 알아보고, 어떻게 사용되는지와 몇 가지 유용한 팁을 제공하겠습니다.

1. 태그 선택자 (Element Selector)

가장 기본적인 선택자는 HTML 태그 이름을 사용하여 요소를 선택하는 것입니다. 이 선택자는 해당하는 모든 HTML 요소에 스타일을 적용합니다.

/* 모든 <p> 태그에 스타일 적용 */
p {
    color: blue;
}

2. 클래스 선택자 (Class Selector)

클래스 선택자는 HTML 요소에 클래스를 할당하여 선택하는 것입니다. 이를 통해 여러 요소에 동일한 스타일을 적용할 수 있습니다.

/* .highlight 클래스에 스타일 적용 */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

<!-- 클래스가 "highlight"인 모든 요소에 스타일 적용 -->
<p class="highlight">이 텍스트는 강조됩니다.</p>

3. 아이디 선택자 (ID Selector)

아이디 선택자는 HTML 요소에 고유한 아이디를 할당하여 선택하는 것입니다. 아이디는 한 페이지에서 하나의 요소에만 적용해야 합니다.

/* #header 아이디에 스타일 적용 */
#header {
    font-size: 24px;
}

<!-- 아이디가 "header"인 요소에 스타일 적용 -->
<div id="header">헤더</div>

4. 그룹화 선택자 (Grouping Selector)

여러 선택자에 동일한 스타일을 적용해야 할 때 그룹화 선택자를 사용할 수 있습니다. 이는 쉼표로 구분하여 여러 선택자를 하나로 그룹화하는 것입니다.

/* h1, h2, h3 태그에 동일한 스타일 적용 */
h1, h2, h3 {
    color: purple;
}

5. 자식 선택자 (Child Selector)

자식 선택자는 특정 요소의 직계 자식 요소를 선택합니다. 이것은 부모 요소와 자식 요소를 나타내는 데 사용되는 ">" 기호로 구분됩니다.

/* .menu 클래스의 직계 자식인 <li> 태그에 스타일 적용 */
.menu > li {
    list-style-type: none;
}

6. 가상 클래스 선택자 (Pseudo-class Selector)

가상 클래스 선택자는 요소의 특정 상태를 선택하는 데 사용됩니다. 예를 들어, 링크가 방문되었을 때와 마우스 오버 상태일 때 스타일을 다르게 적용할 수 있습니다.

/* 방문된 링크에 스타일 적용 */
a:visited {
    color: gray;
}

마치며

CSS 선택자는 웹 요소를 정확하게 선택하여 스타일을 적용하는 데 사용되는 강력한 도구입니다. 이러한 선택자를 적절히 활용하여 웹페이지의 디자인을 효율적으로 제어할 수 있습니다.

Emmet은 웹 개발자들 사이에서 널리 사용되는 코드 작성 도구 중 하나입니다. 이 도구를 사용하면 HTML과 CSS를 더욱 빠르게 작성할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. Emmet은 작성된 코드를 템플릿 또는 기본 구조로 사용하여 웹 개발 작업을 빠르고 효율적으로 만듭니다. 이를 통해 생산성을 향상시키고, 코드 작성 과정에서의 반복적인 작업을 최소화할 수 있습니다.

emmet의 주요 기능

1. 약어(Abbreviations) 사용: Emmet을 사용하면 HTML 요소를 표현하는 데 약어를 사용할 수 있습니다. 예를 들어, ul>li*5와 같은 약어는 <ul> 안에 5개의 <li> 요소를 생성합니다.

2. 중첩(Nesting): Emmet은 중첩 구조를 간단히 작성할 수 있게 해줍니다. 예를 들어, div>ul>li*3>a는 <div> 안에 <ul>이 있고, 각 <ul> 안에 3개의 <li>와 각 <li> 안에 <a> 요소가 있는 구조를 생성합니다.

3. 클래스 및 ID 지정: Emmet을 사용하여 요소에 클래스 및 ID를 지정할 수 있습니다. 예를 들어, .container>.item#first-item와 같이 작성하면 클래스가 "container"이고 ID가 "first-item"인 요소가 생성됩니다.

4. 반복 및 계산: Emmet은 반복과 간단한 계산을 지원합니다. 예를 들어, ul>li.item$*3과 같이 작성하면 "item1", "item2", "item3"과 같은 클래스를 가진 3개의 <li> 요소가 생성됩니다.

👉입력

header>.logo+.nav>ul>li*3>a

👉출력

<header>
    <div class="logo"></div>
    <nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>

☆: .｡. o(≧▽≦)o .｡.:☆

이렇게 emmet을 이용하면 코드 작성이 빠르고 즐겁게 될 것입니다!(●'◡'●)

FORM 이란 간단히 주로 로그인 하는 부분을 구현할때 사용된다. HTML <form> 요소는 사용자로부터 데이터를 수집하는 데 사용됩니다. 이를 통해 사용자로부터 입력을 받고, 이를 서버로 보내 처리하는 등의 작업을 할 수 있습니다. 아래는 기본적인 <form> 요소의 구조입니다:-)

1. FORM

다음 예시를 보자!

<form action="url_to_submit_data" method="post/get">
    <!-- 입력 필드들 -->
    <input type="text" name="username" placeholder="Username" required>
    <input type="password" name="password" placeholder="Password" required>
    <!-- 제출 버튼 -->
    <button type="submit">Submit</button>
</form>

• action: 양식이 제출될 URL을 지정합니다.
• method: 양식 데이터를 제출하는 HTTP 메소드를 지정합니다. 대부분의 경우 "post" 또는 "get" 중 하나를 사용합니다.
• <input>: 사용자 입력을 받는 입력 필드입니다. type, name, placeholder 등의 속성을 사용하여 필드 유형과 정보를 정의할 수 있습니다.
• <button>: 제출 버튼을 나타냅니다.

2. Validation

HTML에서 유효성 검사를 수행하는 주요 방법 중 하나는 HTML5에서 도입된 내장 유효성 검사입니다. 이를 사용하면 클라이언트 측에서 간단한 유효성 검사를 수행할 수 있습니다.

<form action="url_to_submit_data" method="post" onsubmit="return validateForm()">
    <input type="email" id="email" name="email" placeholder="Email" required>
    <input type="password" id="password" name="password" placeholder="Password" required>
    <button type="submit">Submit</button>
</form>

<script>
    function validateForm() {
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;

        // 간단한 유효성 검사
        if (email == "") {
            alert("이메일을 입력하세요.");
            return false;
        }
        if (password == "") {
            alert("비밀번호를 입력하세요.");
            return false;
        }
        return true;
    }
</script>

위의 예제에서 validateForm() 함수는 양식을 제출하기 전에 이메일과 비밀번호 필드가 비어 있는지를 확인합니다. 필요에 따라 더 복잡한 유효성 검사를 수행할 수 있습니다.

또한, JavaScript 외에도 HTML5에서는 다양한 유효성 검사 유형을 지원하는 <input> 요소의 type 속성을 사용할 수 있습니다. 예를 들어, type="email", type="number", type="url" 등의 유형이 있습니다. 이는 브라우저가 일부 기본적인 유효성 검사를 처리할 수 있게 합니다.

HTML <form> 요소와 유효성 검사를 결합하여 사용자로부터 안전하고 정확한 데이터를 수집할 수 있습니다.

☆: .｡. o(≧▽≦)o .｡.:☆

다음에는 html emmet에 관해 알아보자~~

Web Accessibility (웹 접근성) 을 향상 시키면 가능한 다양하고 많은 사용자들이 웹을 이용할 수 있는 것이다.

WCAG(웹 콘텐츠 접근성 지침)

WCAG (Web Content Accessibility Guidelines)는 W3C가 권장하는 웹 콘텐츠 접근성 표준이다.

ᓚᘏᗢ한국형 웹 콘텐츠 접근성 지침

ᓚᘏᗢW3C의 권장 국제 표준

☆: .｡. o(≧▽≦)o .｡.:☆

다음으로는 HTML FORM 태그 와 유효성 검사 부분을 다뤄보겠다~!:-)

SEO란 검색 엔진 최적화 라는 것으로 검색 엔진(구글, 네이버 등)이 웹페이지를 상위에 노출시키기 위한 작업이다. 구글은 1위 웹브라우저로 검색 엔진 최적화 가이드를 제공하고 있다. 이를 토대로 몇개 가져와 보았다!:-D

ᓚᘏᗢ출처:구글 검색 센터

Google이 사용자와 같은 방식으로 내 페이지를 인식하도록 하기

Googlebot이 페이지를 크롤링할 때는 보통 사용자와 같은 방식으로 페이지를 인식합니다. 렌더링과 색인 생성을 최적화하려면 Google이 웹사이트에서 사용하는 자바스크립트, CSS, 이미지 파일에 항상 액세스할 수 있도록 허용하세요. 사이트의 robots.txt 파일이 이러한 애셋을 크롤링하는 것을 허용하지 않으면 Google 알고리즘의 콘텐츠 렌더링 및 색인 생성 품질에 직접적으로 부정적인 영향을 줍니다. 이로 인해 순위가 최적화되지 못할 수 있습니다.

고유하고 정확한 페이지 제목 만들기

<title> 요소는 사용자는 물론 검색엔진에 특정 페이지의 주제가 무엇인지 알려 줍니다. HTML 문서의 <head> 요소 내에 <title> 요소를 놓고, 사이트의 각 페이지에 고유한 제목 텍스트를 만듭니다.

메타 설명 태그 사용하기

페이지의 메타 설명 태그는 Google 및 다른 검색엔진에 페이지 내용을 요약하여 제공합니다. 페이지 제목은 단어 몇 개나 문구로 이뤄질 수 있지만 페이지의 메타 설명 태그는 한두 문장 또는 짧은 단락 정도로 길어질 수 있습니다. <title> 요소와 마찬가지로 메타 설명 태그는 HTML 문서의 <head> 요소 내에 있습니다.

메타 태그에 대한 다양한 종류는 다음 참조 :

ᓚᘏᗢ[메타태그 종류}(https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-meta-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC)

표제 태그(h1 태그 등)를 사용하여 중요한 텍스트 강조하기

의미 있는 표제를 사용하여 중요한 주제를 표시하고 콘텐츠의 계층 구조를 만들어 사용자가 쉽게 문서를 탐색할 수 있도록 하세요.

사이트 계층 구조 구성하기

Google에서는 가능하면 모든 웹사이트에서 https://를 사용하기를 권장하고 있습니다. 호스트 이름은 웹사이트가 호스팅되는 곳이며 일반적으로 이메일에 사용하는 것과 동일한 도메인 이름을 사용합니다. Google은 www 버전과 www가 아닌 버전(예: www.example.com 또는 example.com만)을 구분합니다. 웹사이트를 Search Console에 추가할 때 http:// 버전과 https:// 버전을 모두 추가하고 www 버전과 www가 아닌 버전도 추가하는 것이 좋습니다.

탐색 기능은 검색엔진에서 중요한 역할을 합니다.

웹사이트 탐색은 방문자가 원하는 콘텐츠를 빨리 찾을 수 있도록 도움을 줄 때 중요한 역할을 합니다. 또한 검색엔진이 웹사이트 소유자가 중요하다고 생각하는 콘텐츠를 이해하는 데 유용합니다. Google 검색결과는 페이지 수준에서 제공되지만 Google은 사이트 전반에서 특정 페이지가 어떤 역할을 하는지도 파악하기를 원합니다

단순한 URL은 콘텐츠 정보를 전달합니다.

웹사이트 문서와 관련된 설명을 제공하는 카테고리 및 파일 이름을 만들면 사이트를 더 잘 구성하는 데 도움이 될 뿐만 아니라 콘텐츠에 관심을 두고 있는 사용자가 좀 더 쉽게 사용할 수 있으며 이들에게 더욱 친숙한 URL을 만들 수 있습니다. 인식할 수 있는 단어가 거의 없는 긴 암호문과도 같은 URL에 겁을 먹는 사용자도 있을 수 있습니다.

이미지 최적화하기

시맨틱 HTML 마크업을 사용하면 크롤러가 이미지를 찾고 처리할 수 있습니다. <picture> 요소를 사용하여 반응형 이미지를 위한 다양한 화면 크기에 여러 옵션을 지정할 수도 있습니다. 이미지에 loading="lazy" 속성을 사용하면 사용자가 페이지를 더 빠르게 로드할 수도 있습니다. 또한 alt 속성을 사용합니다. 최적화의 대상이 되는 페이지의 다른 부분들과 마찬가지로 파일 이름과 대체 텍스트는 짧으면서도 설명을 제공하는 것이 가장 좋습니다. 이미지를 링크로 사용하기로 결정한 경우 대체 텍스트를 작성하면 Google에서 링크하려는 페이지에 대해 더 잘 이해할 수 있습니다. 텍스트 링크의 앵커 텍스트를 작성한다고 생각해 보세요.

사이트를 모바일 친화적으로 만들기

오늘날의 세상은 모바일 중심으로 돌아갑니다. 대다수 사람들이 휴대기기를 사용하여 Google에서 검색합니다. 사이트의 데스크톱 버전은 휴대기기에서 보고 사용하기 불편할 수 있기 때문에 모바일 기능을 지원하는 사이트가 있어야 온라인 인지도를 유지할 수 있습니다.

☆: .｡. o(≧▽≦)o .｡.:☆

SEO 로 의미있는 웹사이트를 만들수 있다 ~ 다음에는 웹 접근성의 필요성및 지침을 가져와보겠다~!

html을 작성하는 데 태그 사용이 자유롭겠지만 검색 엔진에서 상위에 노출되기 위해서는 div태그나 span태그등 non-semantic tag 들보다 semantic 태그 들을 사용하는게 구글 같은 검색엔진들이 인덱싱을 잘 하여 상위에 노출될수 있도록 한다. semantic elements 들을 알아보자,,,(●'◡'●)

ᓚᘏᗢ출처:w3school

Semantic Elements in HTML

• <article> Defines independent, self-contained content
• <aside> Defines content aside from the page content
• <details> Defines additional details that the user can view or hide
• <figcaption> Defines a caption for a <figure> element
• <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
• <footer> Defines a footer for a document or section
• <header> Specifies a header for a document or section
• <main> Specifies the main content of a document
• <mark> Defines marked/highlighted text
• <nav> Defines navigation links
• <section> Defines a section in a document
• <summary> Defines a visible heading for a <details> element
• <time> Defines a date/time

맺으며,,,,

이렇게 검색 시 상위에 노출되기 위해 semantic elements를 사용하는게 SEO(search engine optimization)의 일부이다. 다음에는 SEO를 알아보자😁

HTML 기본 태그들 및 html 문서 양식을 공부한 내용을 정리해 보게따,,, 참고로 나는 윈도우 사용중,,╰(°▽°)╯

01 HTML문서 기본 태그(<열린태그 속성 = “속성값”> 컨텐츠</닫힌태그>)

1. 주석 달기

• <!— 주석 멘트—>
• Ctrl + ?

2. HTML5 문서를 선언

• = html 5라는 최근 신조어를 통해 index.html구성한다는 의미
• html 5 또는 !+tab 단축키

3. 문서의 시작과 끝

• <html>
• </html>

04메인 작성 시작

• <head> </head> : html문서의 간단한 요약 정보
• <meta charset= “UTP-8”> : character(문자)를 세팅하고 utp로 모든 문자를 보여준다.
• <title> </title> : 상단 탭 제목
• <body> </body> : 사용자가 보이는 부분을 관장

02 body 태그 안 태그들

• <h1> </h1> : 제목
• <h1 style=”color: navy;”> : 인라인 스타일 지정으로 속성 넣기 가능
• 블럭요소 : <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등 width/height 값 사용해 공간만들기, margin/padding값 사용해 상하 배치 작업 가능
• 인라인요소 : <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img> 등width/height 값 사용해 공간만들기, margin/padding값 사용해 상하 배치 작업 불가

1. <a></a>

• href = “url주소” 속성을 넣어 둘것 target=”_blank”로 새탭을 열기

2. <img>

• src=”이미지 파일 경로” 속성을 넣기
• alt=”이미지를 대신하는 설명”속성을 넣기

3. <header><nav> </nav></header>(웹사이트 머리글)

• header : 웹사이트의 머리글을 담는공간
• navigation : 메뉴 버튼을 담는 공간<ul><li><a></a></li></ul>과 함께 사용

4. <main role=””><article></article></main>(웹사이트 본문)

• IE는 지원하지 않으므로 role =”main”속성을 반드시 입력
• <article><h#></h#></article> : 문서의 주요 정보과 구역을 설정하는데 태그내에 구역 설정시 h# 태그를 반드시이용한다

5.<footer></footer>

• 가장 하단에 들어가는 정보 ex) 주소, 이메일, 사업자 등록번호,,,

맺으며,,,

나머지 내용들은 다음을 참고!!

ᓚᘏᗢ외국 html 설명 영상

🤔프론트 엔드가 되려면 어떤 순서로 공부를 해야할까,,,? 다음 유튜브 영상을 보고 토대로 로드맵을 작성해보고,,, 이 로드맵 순서로 블로그 작성을 해보겠!(●'◡'●)

https://www.youtube.com/watch?v=Gc4Xh8u19NU

👉프론트엔드 교육 사이트 모음

-MDN WEB DOCS ᓚᘏᗢdeveloper.mozilla.org

-W3SCHOOLS.COM ᓚᘏᗢw3schools.com

-CSS-TRICKS.COM ᓚᘏᗢcss-tricks.com

-GEEKSFORGEEKS.ORG ᓚᘏᗢgeeksforgeeks.org

HTML

👉html 공부 개념 태그 및 기본 문법 form emmet

CSS

👉CSS 공부 개념 Selectors Inheritance Specificity Box Model Position Display Flexbox Grid Calc Pseudo Elements Pseudo Classes Custom Properties Logical Properties Media Queries Container Queries Animation

Javascript

👉Js 공부 개념 Async vs Defer Script Loading Var vs Let vs Const Function Basics Callbacks Arrow Functions Hoisting Scoping Closures Strict Equality Objects/Arrays Reference Vs Value DOM Traversal DOM Manipulation Event Listeners Control Flow (If, Loops, etc.) Promises Async Await Fetch Browser Storage Event Loop Modules Null Vs Undefined Recursion Bundlers Array Methods Template Literals Destructoring/Spread Operator

REACT

👉REACT공부 개념

Component Model JSX Props State Events useEffect StrictMode Lists/Conditional Rendering Fragments Refs useMemo useCallback Custom Hooks useReducer Context Routing Portal useLayoutEffect Suspense Best Practices

Next.js

👉Next.js 공부 개념

-App Router

Folder Based Routing Metadata/SEO Server vs Client Components Data Fetching Loading/Error Pages Dynamic Routes Data Cache/Request Memoization/Full Route Cache/Router Cache Dynamic vs Static Pages Dynamic Functions Server Actions useOptimistic/useFormState/useFormStatus Parallel Routes/Intercepting Routes Route Handlers

-Pages Directory

Page Based Routing CSR vs SSR vs SSG vs ISR getServerSideProps/getStaticProps/getStaticPaths/getInitialProps API Routes

TypeScript

👉TypeScript 공부 개념

TSConfig Type Inference Array Type Any/Unknown Type Type vs Interfaces Functions Unions/Intersections readonly/keyof/typeof As Const/Enums Tuples Generics Built In Types (Pick, Omit, etc.) Type Guards Satisfies Discriminated Union Function Overloads Type Predicate Declaration Files

others

👉추가 공부 개념

Version Control (Learn As Soon As Possible) JSON (Learn Alongside JavaScript) Regular Expressions (Optional) How To Deploy Basic Security Testing

☆: .｡. o(≧▽≦)o .｡.:☆