📝HTML 구조부터 CSS 선택자, Emmet 문법까지 완벽 정리

오늘 학습한 HTML/CSS의 핵심 내용을 벨로그에 기록합니다. 웹의 뼈대를 구성하는 계층 구조와 이를 효율적으로 다루는 방법들을 정리했습니다.

---

1. HTML 엘리먼트의 계층 관계

HTML은 요소들이 서로 감싸고 감싸지는 부모-자식 관계를 가집니다. 이를 이해해야 정확한 스타일링이 가능합니다.

• 부모(Parent): 특정 엘리먼트를 감싸고 있는 상위 엘리먼트
• 자식(Child): 특정 엘리먼트 안에 포함된 하위 엘리먼트
• 형제(Sibling): 같은 부모를 공유하는 나란한 엘리먼트
  • 인접 형/동생: 내 바로 위(+)나 바로 아래(+)에 있는 형제

---

2. CSS 관계 선택자

원하는 요소를 정밀하게 타겟팅하기 위한 선택자 규칙입니다.

기호	이름	설명
>	자식 선택자	부모 바로 아래에 있는 자식만 선택 (1촌 관계)
(공백)	후손 선택자	자식, 손자 등 모든 하위 요소를 포함하여 선택
+	인접 동생 선택자	내 바로 다음에 오는 형제 한 개만 선택
~	일반 동생 선택자	내 뒤에 오는 모든 형제 요소들을 선택

---

3. 핵심 CSS 속성 정리

🎨 타이포그래피 (Typography)

• font-weight: 글자 두께 (normal, bold, 숫자로 조절)
• font-size: 글자 크기 (px는 절대값, rem은 루트 기준 상대값)
• letter-spacing: 자간 조절 (음수는 좁게, 양수는 넓게)

🌈 색상과 투명도 (RGBA)

color: rgba(R, G, B, A);

• R/G/B: 0~255 (색상 값)
• A (Alpha): 0~1 (0은 투명, 1은 불투명)

---

4. 링크와 줄바꿈 (<a>, <br>)

• <a> 태그: href 속성으로 목적지 주소를 설정하고, target="_blank"를 사용하면 새 창에서 링크를 엽니다.

  • 예시) <a href="http://www.naver.com/" target="_blank">네이버</a>

• <br> 태그: 별도의 닫는 태그가 없는 빈 엘리먼트로, 텍스트 내에서 줄바꿈을 수행합니다.

---

5. Emmet(에밋) 문법

HTML 구조를 수식처럼 한 줄로 작성하는 효율적인 방법입니다.

기호	기능	예시	변환 결과 (HTML)
>	자식 생성	div>a	<div><a></a></div>
[]	속성 정의	a[href="..."]	<a href="..."></a>
{}	텍스트 입력	a{네이버}	<a href="">네이버</a>
*n	반복 생성	div*3	<div></div> (3번 반복)
()	그룹화	(div>nav)*2	<div><nav></nav></div> (2번 반복)

---

💡 에밋 활용 팁

1. 복합 사용: 여러 기호를 섞어서 한 번에 복잡한 구조를 만들 수 있습니다.
   • 입력: ul>li*3>a[href="#"]{메뉴$}
   • 결과: <ul> 안에 링크가 담긴 리스트 아이템 3개가 순식간에 생성됩니다.
2. 그룹화의 중요성: ()를 사용하면 연산의 우선순위를 정할 수 있어, 반복(*)이나 형제(+) 연산 시 구조가 꼬이는 것을 방지합니다.

💡 Emmet 구조 예시

1. div>nav*2>article+div: div 하나 안에 자식 nav 2개가 생기고, 각각 article과 div를 자식으로 가짐.
2. (div>nav)*2>article+div: div>nav 세트가 2번 생성된 후, 그 뒤에 형제로 article과 div가 붙음. (그룹화의 중요성!)

---

6. 💻 실습 문제

문제1: 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요.

정답 코드

HTML

<!--  Emmet 활용 시
div>a[href="http://www.naver.com"]{네이버}
nav>a[href="http://www.google.com"]{구글}
section>a[href="http://www.daum.net"]{다음} -->

<div><a href="http://www.naver.com">네이버</a></div>
<nav><a href="http://www.google.com">구글</a></nav>
<section><a href="http://www.daum.net">다음</a></section>

CSS

div a {
  font-size:3rem;
  color:black;
}

nav a {
  font-size:5rem;
  color:red;
}

section a {
  font-size:7rem;
  color:blue;
}

마무리

웹 개발의 기본은 HTML의 구조를 파악하고 CSS로 정확히 조절하는 것에서 시작된다는 것을 배웠습니다. 특히 Emmet 문법을 활용하면 생산성을 극대화할 수 있다는 점이 매우 유용했습니다!