---

들어가기전에 . . ①

html에서, 들여쓰기, 가독성 必

각 코드간 주체(자식,자손,형제,부모)가 중요하다.

컴퓨터는 오직 코드,태그로만 소통 가능하다.

모든 태그에는 의미가 있다. (미학적 구성 x)

프로그램 사고의 정립이 필요하다.

---

들어가기전에 . . ②

• 시작태그가 있으면 끝태그가 따라 온다.
• 시작태그에 속성이 들어가고, 속성에 값이 있어야 한다.
• 빈태그의 경우 끝태그 없이 단독으로 사용 된다.
  (br태그, a태그, input 태그 등)

---

비쥬얼스튜디오 단축키 TIP 😄

• shift + alt + ↑ or ↓ : 커서 위치 한 줄 복사
• ctrl + shift + k : 커서 위치 한 줄 삭제
• alt + ↑ or ↓ : 커서 위치에서 이동 (위,아래)

---

html

• HyperText Markup Language
• web페이지 구조와 뼈대를 설정
• head 영역 / body 영역으로 나뉜다.

head 영역

• 눈에 보이지 않는 기능을 호출하는 공간
• CSS가 들어가는 위치

body 영역

• 눈에 보이는 모든 내용들은 다 body 태그 안에 작성
• 웹페이지와 소통하기 위해서는 반드시 태그로 문자로 작성

---

제목을 만들기 위한 태그 👉 h태그

• h1 ~ h6 까지 존재
• 크기 : h1 >>>> h6
• h1 (대제목) : 보통 한 페이지 한 번만
• 그 후, h2 ~ h6 : 보통 중복해서 사용
• h1 ~ h4 까지 많이 사용

---

문단을 작성 하기 위한 태그 👉 p태그

1. 문단을 작성하기 때문에, 자동으로 한 줄 줄바꿈
2. 위아래에 약간의 공백이 생긴다.

• 여러 글자를 작성할 때, 가장 먼저 p태그를 만든다.

---

문장을 작성 하기 위한 태그 👉 span태그

• 화면상 아무 변화 없다 => 크기 그대로, 줄바꿈X, 공백 X
• 문단안에서 특정 문장에 디자인을 주고 싶을 때 사용

<P>첫번째 문단입니다. <span>여기만 파란색으로!</span></p>

---

줄 바꿈 태그 👉 br태그

• 잘 안 씀
• p태그 안에서 span태그 등으로 문장을 작성할 때,
  강제로 줄바꿈이 필요할 때만 쓰자.

---

글씨 두껍게 강조 태그 👉 b태그 / strong태그

• 공통점 : 눈으로 봤을 때, 둘 다 똑같이 글씨가 두껍게 보임
• 차이점 : 스크린리더로 읽었을때, strong태그는 억양을 강하게 한다.
  (시각장애인을 위해서, 접근성 ↑, 의미있는, 강조시)

• 홈페이지 최하단, 개인정보약관 같은 중요 강조부분 : strong 태그 사용

---

글씨 기울여 강조 태그 👉 i태그(이탤릭체) / em태그

• 공통점 : 눈으로 봤을 때, 둘 다 똑같이 글씨가 기울게 보임
• 차이점 : 스크린리더로 읽었을때, em태그는 억양을 강하게 한다
  (strong태그와 동일한)
• i태그는 후에, 아이콘 태그로 99% 쓰인다