-
HTML.2 HTML 코드 관련HTML 2020. 11. 4. 16:56728x90
개발 코드 관련
- HTML
! -> 가장 기본 틀 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
<h1> ~ <h6>
- 번호별로 크기가 달라짐 (높을수록 하위 제목)
- 줄바꿈 적용
권장사항
- h1는 페이지당 하나
- 순서를 건너뛰지 말 것 (예: <h1> 다음에는 <h2>)
- 시각적 효과를 위해 사용하지 말 것 (디자인은 CSS로)
- 정보의 구조를 나타내는 용도로 사용하 것
줄바꿈 태그
<br> vs. <p>
<br> : break
- 닫는 태그 필요 없음, 위치 무관
- 여러번 사용 → 여러 줄
- 단순 시각적인 줄 바꿈 (엔터)
<p> : paragraph
- 정보 부여: 한 문단, 정보 덩어리임을 나타냄
- CSS가 적용될 단위로 사용
- 단순 줄 바꿈이 아닌, 문단 구분을 위한 태그
강조 태그
<b> vs. <strong>
<b> : bold
- 단순히 진하게
<strong>
- 정보적 강조 (컴퓨터에게 중요한 정보임을 알림)
기울임 태그
<i> vs. <em>
<i> : italic
- 단순히 기울임
<em> : emphasize
- 정보적 강조 (컴퓨터에게 중요한 정보임을 알림)
<cite> : citation
- 저작물의 출처 표기 (제목을 표시할 것)
이미지 태그
- <img> / alt = 이미지 설명
- 1. 이미지파일이 image라는 폴더 내에 있는 경우
- <img src="image/13491509_0.jpg" alt="숭례문 사진"/>
- 2. 이미지파일을 이미지 주소 복사로 불러오는 경우
<img src=“이미지 주소” alt="숭례문 사진"/>
이미지 태그
<img> : image
속성
역할
값
src
포함하고자 하는 이미지의 절대/상대 경로
경로 텍스트
alt
이미지 설명
설명문 텍스트
width
이미지의 가로 길이
단위 없는 정수값
• alt 속성 : 정보 용도
- 스크린 리더가 읽어주는 값
- 네트워크 오류, 컨텐츠 차단 죽은 링크 등의 상황 대처
- width는 CSS로 대체 가능
<sup> : superscript (위첨자)
- 거급제곱, th 등 관례적으로 위 첨자로 넣는 글자일 때
<sub> : subscript (아래첨자)
- 화학 기호 등 관례적 아래 첨자
<s> : strike (취소선)
<blockquote> : 텍스트가 긴 인용문에 사용
하이퍼 링크
<a> : anchor
- <a href= “~~”>Text</a> -> 현재 페이지에서 링크로 이동
- <a href=“~~” target=“_black>Text</a> -> 링크 새페이지 실행
Ex:
숭례문 위키백과 바로가기</a>
728x90'HTML' 카테고리의 다른 글
HTML.7 Semantic web 과 Semantic Tags (0) 2020.11.17 HTML.6 Lable , Input 태그 및 속성 (0) 2020.11.04 HTML.5 < li, ol, ul > (0) 2020.11.04 HTML.3 행과 열 및 table (0) 2020.11.04 HTML.1 HTML Semantic 요소 (0) 2020.11.04