구름톤☁️ html/css기초 내용 정리

HTML, CSS, JavaScript와 Front-end 개요

웹 개발에서 HTML, CSS, JavaScript는 각각 뼈대, 디자인, 그리고 동적인 기능을 담당하는 중요한 요소입니다.

이를 통해 웹사이트를 만들고 사용자와 상호작용할 수 있도록 합니다.

---

🏗 HTML (HyperText Markup Language) – 웹 문서의 뼈대

HTML은 웹페이지의 구조를 정의하는 마크업 언어입니다.

• 웹 문서의 요소(텍스트, 이미지, 링크 등)를 배치합니다.
• <table>, <div>, <p>, <h1> 등 다양한 태그를 사용하여 콘텐츠를 구성합니다.

💡 Emmet 문법을 활용한 빠른 코드 작성

예를 들어, table>(tr>td{hello world}*3)*3을 입력하면 다음과 같이 변환됩니다.

<table>
  <tr>
    <td>hello world</td>
    <td>hello world</td>
    <td>hello world</td>
  </tr>
  <tr>
    <td>hello world</td>
    <td>hello world</td>
    <td>hello world</td>
  </tr>
  <tr>
    <td>hello world</td>
    <td>hello world</td>
    <td>hello world</td>
  </tr>
</table>

👉 Emmet 문법을 활용하면 반복적인 HTML 작성을 빠르게 할 수 있습니다!

---

🎨 CSS (Cascading Style Sheets) – 웹 문서의 스타일과 디자인

CSS는 HTML 문서에 스타일을 추가하는 역할을 합니다.

• 글꼴 크기, 색상, 여백(margin), 정렬 등을 설정할 수 있습니다.
• CSS를 HTML과 연결하는 방법:

<link rel="stylesheet" href="styles.css">

• box-sizing: border-box;
  • box-sizing: border-box;를 사용하면 padding과 border를 포함한 크기를 유지할 수 있어 디자인이 더 직관적입니다.
  • 예제:

  div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
  }
  

🆔 ID vs 📌 Class

속성 ID Class

사용 범위	한 페이지에서 한 번만 사용 가능	여러 요소에서 재사용 가능
선택자	#id	.class
우선순위	높음	낮음

예제:

<p id="unique-text">이것은 ID 선택자로 스타일을 적용할 문장입니다.</p>
<p class="highlight">이것은 Class 선택자로 스타일을 적용할 문장입니다.</p>

#unique-text {
  color: blue;
}

.highlight {
  background-color: yellow;
}

---

⚡ JavaScript – 웹페이지의 동적인 기능 담당

JavaScript는 HTML과 CSS를 조작하여 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.

• 이벤트 처리 (버튼 클릭 시 동작)
• 데이터 변경 (사용자 입력값 처리)
• 애니메이션 효과 적용

예제: 버튼 클릭 시 경고창 표시

<button onclick="showAlert()">클릭하세요</button>

<script>
  function showAlert() {
    alert("버튼이 클릭되었습니다!");
  }
</script>

---

🧐 Pseudo-elements & Pseudo-classes (의사 요소 & 의사 클래스)

🎭 Before & After (의사 요소)

• ::before 와 ::after를 사용하면 요소의 앞이나 뒤에 콘텐츠를 추가할 수 있습니다.

h1::before {
  content: "🔥 ";
}
h1::after {
  content: " 🚀";
}

<h1>Welcome</h1>

📌 출력 결과:
🔥 Welcome 🚀

---

🎨 Hover (의사 클래스)

• :hover를 사용하면 사용자가 요소에 마우스를 올렸을 때 스타일을 변경할 수 있습니다.

button:hover {
  background-color: red;
  color: white;
}

<button>마우스를 올려보세요</button>

✅ 결과: 마우스를 버튼 위에 올리면 빨간색으로 변합니다.

---

📌 정리

HTML CSS JavaScript

웹페이지의 구조 정의	스타일과 디자인 적용	동적인 기능 추가
<div>, <p>, <h1> 등 사용	color, font-size, margin 등 스타일 적용	click, hover 등 이벤트 처리

👉 HTML = 뼈대 🏗 / CSS = 디자인 🎨 / JS = 기능 ⚡