HTML과 CSS는 무엇일까🤔

HTML (Hypertext Markup Language) 이란?

• 웹 페이지 구조를 정의하는 마크업 언어(Markup Language: 문서 구조와 콘텐츠를 정의 및 설명에 사용되는 언어 )
• 웹 페이지의 내용을 나타내기 위한 "골격" 역할
• HTML을 사용하여 웹 페이지에 텍스트, 이미지, 링크, 리스트, 표 등 다양한 요소 추가 가능
• HTML은 <태그> 형태로 요소를 정의
  1. <h1>: 제목을 정의하는 태그
  2. <p>: 단락을 정의하는 태그
  3. <a>: 링크를 정의하는 태그
  4. <img>: 이미지를 삽입하는 태그
  5. <div>, <section>: 구역을 나누는 태그 등

 

| HTML의 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <title>웹 페이지 제목</title>
  </head>
  <body>
    <h1>헤더 1</h1>
    <p>여기에 텍스트 내용이 들어갑니다.</p>
  </body>
</html>

 

---

CSS (Cascading Style Sheets) 란?

• 웹 페이지의 스타일 정의하는 언어
• HTML로 구조를 만들면, CSS로 그 구조에 디자인을 입히는 방식
• CSS는 색상, 폰트, 레이아웃, 간격 등 설정 가능
• 선택자: 특정 HTML 요소를 선택하고 스타일을 적용
  • 예시 
  • h1 { color: blue; } → 모든 <h1> 태그에 파란색을 적용
  • p { font-size: 16px; } → 모든 <p> 태그에 16px 크기의 글꼴을 적용
• 속성, 값
  • 예시
  • color: red; (색상 속성, 빨간색)
  • font-size: 20px; (글꼴 크기 속성, 20px)

---

| CSS의 기본 구조

h1 {
  color: blue;
  font-size: 32px;
}

p {
  line-height: 1.5;
  margin: 20px 0;
}

---

* HTML과 CSS의 관계

• HTML: 콘텐츠 정의
• CSS: 그 콘텐츠를 어떻게 보여줄지 정의
• HTML로 웹페이지를 만들고, CSS를 사용하여 디자인 적용하는 방식으로 웹페이지가 완성된다.

※ 결론, HTML은 구조, CSS는 스타일을 담당하고, 이 둘을 함께 사용해서 웹 페이지를 만든다는 것이다!