-
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 실습 >