카테고리 없음

Ch6. HTML Beginner

스히 2023. 3. 31. 01:30

 

< HTML 구성>

 

- 텍스트에 생명을 불어넣는 것

 

> markup : 태그를 달아주는 작업

- 여는 태그/닫는 태그

 

> HTML 속성 (attribute)

- 속성이름="속성값"

- 속성이름="속성값"V속성이름="속성값"V속성이름="속성값" ....

 

> HTML 주석

- 작성은 되어있는 코드를 브라우저에 뜨지 않도록 표시

- <!-- <p>임금님 귀는 당나귀 귀!</p> -->

- 주석 남용하지 말기 (대외비적인 내용 담으면 브라우저에 노출됨)

 

> HTML 문서구조

- Boilerplate : 반복적으로 사용되는 구조

- 단축키를 통해 생성 가능

- <!DOCTYPE html>

- head : 내부적인 메타데이터

- body

 

 

 

< HTML head >

 

- HTML 문서에 대한 설정 정보

- 설정의 특성을 띄는 데이터

- charset : 문자 인코딩 방식

- http-equiv / IE=edge : 인터넷 버전 호환성

- 브라우저의 넓이가 스크린에 맞도록 설정

- title : 브라우저 탭에 나타나는 제목

 

 

 

< 블록 요소와 인라인 요소 >

 

- 블록 요소 : 면 : <h1>,<h2>, <h3>, <p>, <ol>, <ul>, <li>, <div>

- 인라인 요소 : 선 : <a>, <span>

- 블록 요소는 다른 블록 요소나 인라인 요소 포함 가능

- 인라인 요소는 블록 요소 포함 불가능

 

 

 

< HTML body >

 

> <h> heading

- 제목, 부제 등 계층적인 구조 (<h1> ~ <h6>)

- 글씨를 키우려는 목적으로 사용하지 않음. 폰트 조절 X

 

> <p> paragraph

- 같은 주제를 다루는 내용일 때

 

> <br> line break

- 줄바꿈

- 닫는 태그 없음

 

> <ol>, <ul>, <li> list

- <ol> : ordered list

- <ul> : unordered list

- <li> : list 내부 요소

 

> <a> anchor

- 다른 페이지로 링크 걸기

- <a href="연결할 링크"></a>

- <a href="연결할 링크" target="_blank"></a> : 새 창에서 띄우고 싶을 때

 

> <span>

- 텍스트 중 일부만 선택하여 영향을 주고 싶을 때

- <span class=""></span> : css나 js의 작업 대상임을 명시

 

> <div>

- 요소들을 묶어 그룹화

- html 요소들을 묶어서 적용

- <div class=""></span> : css나 js의 작업 대상임을 명시

 

 

 

< HTML 실습 >