HTML, CSS

📋 오늘 배운 내용

• HTML
• CSS

---

📋 HTML - 학습목표

• HTML이 "구조를 표현하는 언어"라는 것을 이해하고, 그 기본 구조와 문법을 설명할 수 있다.
• HTML이 마크업 언어라는 것을 설명할 수 있다.
• 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
  • <div>, <span>, <ul>, <ol>, <li>, <input> 등
• 시맨틱 태그가 무엇인지 이해하고, 왜 사용하는 지 설명할 수 있다.
• 웹 문서의 구조와 내용을 HTML로 작성할 수 있다.

📘 HTML

• HyperText Markup Language
• 웹페이지의 틀을 만드는 마크업 언어
• tag들의 집합 (<div>, <span>, <ul>, <ol>, <li>, <input>)
• 트리 구조

📄 자주 사용되는 태그

태그	설명
<div>	한줄을 차지 ( 줄바꿈 O )
<span>	컨텐츠 크기만큼 공간을 차지 ( 줄바꿈  X )
<img>	이미지 태그
<a>	링크 태그
<ul>, <li>	순서가 없는 리스트, 리스트 아이템
<input>	입력폼 ( 텍스트 박스, 라디오 버튼, 체크 박스 )
<textarea>	여러줄 입력 텍스트 박스
<button>	버튼 태그
<h1>, <h2>, ...	숫자가 작을수록 글씨 크기가 큰 제목 태그

📄 Self-Closing Tag

No.	Tag	No.	Tag
1	area	10	source
2	base	11	link
3	br	12	wbr
4	col	13	param
5	meta	14	track
6	embed	15	command
7	hr	16	keygen
8	img	17	menuitem
9	input

 

---

📋 CSS - 학습목표

• CSS의 사용 목적을 이해하고, 기본적인 문법과 구조를 설명할 수 있다.
• HTML에 CSS를 적용하는 방법에 대해 이해할 수 있다.
• 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 설명할 수 있다.
• CSS를 이용해 텍스트를 꾸밀 수 있다.
• 기본적인 CSS 박스 모델을 이해하고 설명할 수 있다.
• MDN, W3C School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

📘 CSS

• Cascading Style Sheets
• 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
• 좋은 사용자 경험을 제공하기 위한 도구
• 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어

📱 사용자 인터페이스 (UI, User Interface)

• 컴퓨터의 복잡한 내부 작동원리를 이해하거나 CLI 명령어를 입력하지 못해도 일반 사용자가 쉽게 컴퓨터에게 의도한 행동을 명령할 수 있게 만든 인터페이스
• 좋은 사용자 경험 (UX, User Experience) 은 좋은 UI에서 나온다.

📄 CSS 문법 구성

셀렉터 (Selector) {

    속성명 (Property): 속성값 (Value);

}

body {
    color: blue;
    font-size: 30px;
}

📄 CSS 적용

HTML에서 CSS 파일 연결

<link rel="stylesheet" href="index.css" />

---

HTML에서 직접 작성 ( 관심사 분리 측면에서 권장되지 않음 )

<style>
    body {
        color: blue;
    }
</style>

---

인라인 스타일 ( 관심사 분리 측면에서 권장되지 않음 )

<nav style="background: #eee; color: blue">...</nav>

📄 셀렉터

태그 이름으로 적용

li {
    color: blue;
}

아이디로 적용

#abcd {
    color: blue;
}

클래스로 적용

.abcd {
    color: blue;
}

id	class
#으로 선택	.으로 선택
한 문서에 단 하나	여러 요소 가능
특정 요소에 이름 붙이는데 사용	스타일의 분류에 사용

그 외

/* 전체 셀렉터 */
* { }

/* 여러 태그 선택 */
section, h1 { }

/* attribute 셀렉터 */
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

/* 후손 셀렉터 */
header h1 { }

/* 자식 셀렉터 */
header > p { }

/* 인접 형제 셀렉터 */
section + p { }

/* 형제 셀렉터 */
section ~ p { }

/* 가상 클래스 */
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

/* 요소 상태 셀렉터 */
input:checked + span { }
input:enabled + span { }
input:disabled + span { }

/* 구조 가상 클래스 셀렉터 */
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

/* 부정 셀렉터 */
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

/* 정합성 확인 셀렉터 */
input[type="text"]:valid { }
input[type="text"]:invalid { }

📄 텍스트 속성

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
  font-family: "SF Pro KR", "MalgunGothic", "Verdana"; /* 글꼴 */
  font-size: 24px;  /* 글자 크기 */
}

그 외

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등
• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height
• 가로 정렬: text-align
• 세로 정렬: vertical-align (display 속성이 반드시 table-cell)

📄 박스 모델

줄바꿈이 되는 박스

• block
• <h1>, <p>

줄바꿈 없이 옆으로 붙는 박스

• inline, inline-block
• <span>: inline

span {
  background: yellow;
  display: inline-block; /* inline-block으로 바꾸는 코드 */
  width: 100px;
  height: 100px;
}

	block	inline-block	inline
줄바꿈	O	X	X
기본 너비 (width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능	O	O	X

📄 박스의 구성 요소

• border (테두리)
• margin (외부 여백)
• padding (내부 여백)

* {
  box-sizing: border-box; /* 여백과 테두리를 포함한 크기로 계산 */
}

p {
  border: 1px solid blue; /* 1px의 파란색 실선 테두리 설정 */
  
  margin: 10px 20px 30px 40px; /* top, right, bottom, left 외부 여백 설정 */
  margin: 10px 20px; /* top & bottom, left % right 외부 여백 설정 */
  margin: 10px; /* 모든 방향 외부 여백 설정 */
  
  /* 특정 방향 외부 여백 설정 */
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  
  padding: 10px 20px 30px 40px; /* top, right, bottom, left 내부 여백 설정 */
  
  /* 박스를 벗어나는 컨텐츠 처리  */
  height: 40px; /* 높이보다 작게 설정 */
  overflow: auto; /* 박스보다 크면 스크롤 표시 */
}

---

HTML Exercises

CSS Exercises