📝 HTML & CSS 기초 개념 및 실습

웹 개발의 가장 기본이 되는 HTML과 CSS의 핵심 개념을 정리하고, 간단한 실습 문제를 풀어보았습니다.

---

1. 🕴️ HTML

비유하자면 HTML은 '배우'입니다.

웹페이지의 뼈대와 구조를 만드는 역할을 합니다.

• 엘리먼트(Element)로 구성: HTML 문서는 여러 엘리먼트들로 이루어져 있습니다.
• 태그(Tag): <여는 태그> 내용 </닫는 태그>의 형태로 작성하며, 이 전체를 하나의 엘리먼트(요소)라고 부릅니다.
• 마크업(Markup): 이러한 엘리먼트(태그)들을 이용해 웹페이지의 구조를 설계하고 문서를 작성하는 행위를 마크업이라고 합니다.

---

2. 🎨 CSS

CSS는 HTML을 꾸며주는 '스타일리스트'입니다.

HTML로 만들어진 뼈대(구조)에 색상, 크기, 배치 등 디자인을 입히는 역할을 합니다.

💡 CSS 적용 우선순위

CSS는 여러 스타일이 겹칠 때 어떤 것을 먼저 적용할지 결정하는 규칙이 있습니다.

1. 아래에 있는 코드: 같은 선택자라면 나중에(아래에) 작성된 코드가 덮어씁니다.
2. 더 구체적인 선택자 (길게 작성된 것): 대상을 더 자세하게 지목할수록 우선순위가 높습니다.
   • 예시) div 보다는 body div 가 더 우선적으로 적용됩니다.
3. !important: 무조건 최우선으로 적용해야 할 때 사용합니다. (다른 모든 규칙을 무시하고 1순위가 됨)

---

3. 주석 (Comments)

각 언어별로 코드를 설명하거나 임시로 작동하지 않게 만들 때 사용하는 주석 기호입니다.

• html 주석: <! -- 주석내용 --> 형식을 사용합니다.

<! -- <div></div> -->

• CSS 주석 : / 와 * 를 사용합니다.

/*  div {
  color: red;
} */

• javascript 주석

1. JS 한 줄 주석: 슬래시 2개를 사용합니다.( // )
2. JS 여러 줄 주석: CSS와 동일하게 사용합니다. ( /**/ )

---

4. 💻 실습 문제

문제1: div, section, article 태그를 사용해서 3가지 색의 막대를 만들어주세요.

정답 코드

📝 HTML 구조

<div></div>
<section></section>
<article></article>

🎨 CSS 스타일링

div {
  height:100px;
  background-color:red;
}

section {
  height:100px;
  background-color:green;
}

article {
  height:100px;
  background-color:blue;
}

또는

div, section, article {
  height:100px;
}
div {
  background-color:red;
}
section {
  background-color:green;
}
article {
  background-color:blue;
}

div, section, article처럼 ,로 한 번에 묶어서 공통으로 지정할 수도 있다!

---