1. title tag
(웹문서의 제목을 작성 -> 브라우저의 제목표시줄에 나타난다. 사이트의 전체의 의미를 알수 있게 간단히 작성)
2. heading tag (제목 태그)
- h1, h2, h3, h4, h5, h6 을 사용한다.
(1) 기본구조
1 | <h1>content</h1> |
h => heading 제목이라는 의미를 갖고 h뒤의 숫자는 제목수준을 표현
한글문서에서 제목수준의 표현은
1. => h1
1) => h2
(1) => h3
가. => h4
가) => h5
(가) => h6
(2) 규칙
가. 잘못된 표현의 예
1 2 3 | <h1>제목</h1> <h2>제목</h2> <h4>제목</h4> |
나. 올바른 표현의 예 : 제목태그는 브라우저에서 표현시 굵은 글씨로 표현하고 제목수준에 따라 글자크기가 다르게 표현
1 2 3 | <h1>제목태그 - 가장 큰 제목</h1> <!-- 보통 사이트 제목만(예 : 로고)--> <h2>제목태그 - 두번째로 큰 제목</h2> <h3>제목태그 - 세번째로 큰 제목</h3> |
3. paragraph tag (문단태그)
- 문단을 구성할 때 사용하여 가장 많이 사용하는 콘텐츠이며 태그는 p태그를 사용한다.
(1)기본구조
1 | <p>content</p> |
(2) 문단 강제 줄바꿈
1 | <br /> |
- link break(한줄바꿈)
- 줄을 바꾸고 싶은 위치에 br태그 작성
(3) 입력한 대로 보여주기
- pre태그를 사용한다
- 주로 HTML소스를 화면에 표시할 때
1 | <pre>content</pre> |
(4) 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <p>가치를 얼음이 공자는 뼈 그들은 듣는다. 일월과 할지라도 들어 많이 것이다. 석가는 꽃이 소금이라 싣르어 할지니, 쓸쓸하랴? 천고에 가진 청춘의 인생에 사랑의 사막이다. </p> <p>가치를 얼음이 공자는 뼈 그들은 듣는다. <br /> 일월과 할지라도 들어 많이 것이다. <br /> 석가는 꽃이 소금이라 싣르어 할지니, 쓸쓸하랴? <br /> 천고에 가진 청춘의 인생에 사랑의 사막이다. <br /> </p> <pre> 동해물과 백두산이 마르고 닳도록 </pre> <pre> 동해물과 백두산이 마르고 닳도록 </pre> |
4. 이미지 태그
(1) 기본구조
1 2 | <img /> <img src="" alt="" width="" height="" /> |
(2) 주요속성
- src = 경로(이미지 위치를 위한 : 필수작성)
- alt = 이미지 대체설명 : 필수
=> 의미 있는 콘텐츠(alt 내용을 꼭 작성), 의미 없는 그림은 (alt="" 와 같이 빈내용으로 작성 가능)
(3) 위치 지정시
1) 절대 경로
- 고유주소값
- URL 사용
- 로컬드라이브주소(절대사용안함)
2) 상대 경로
- 가장 많이 사용하는 방법
- ../ (부모폴더)
- / (자식폴더 혹은 형제폴더)
(참고1) 웹에서 사용하는 그림형식
1) gif
- 애니메이션데이터 저장
2) jpg
- 트루칼라
3) png
- 모바일의 기본포맷
- 배경투명저장