3.1 텍스트 작성하기
3.1.1 hn 태그
- hn 태그는 제목이나 주제를 나타내는 텍스트 표현 시에 사용
- h1부터 h6까지 있음
- h는 heading 의미, n에 들어가는 숫자는 중요도 의미
- hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식
- 중간에 숫자 건너 뛰지 않고, 단계적으로 사용해야 함
[형식]
< hn> 제목 </ hn>
3.1.2 p 태그
- 본문의 문단 작성 시에 사용
[형식]
< p> 내용 </ p>
3.1.3 br 태그
- 문단에서 줄 바꿈 시에 사용
- html은 모든 명령이나 지시를 태그로 해야하기에 줄바꿈을 원하면 잊지 않고 사용할 것
[형식]
< br>
3.1.4 blockquote 태그
- 출처에서 인용한 문단 단위의 텍스트 작성 시에 사용
- 출처가 확실한 인용문은 cite 속성으로 출처 경로 명시해야함
- 해당 태그는 반드시 한 개 이상의 p 태그를 포함해야 함
[형식]
<blockquote="출처 url">문단 단위 인용문< /blockquote>
3.1.5 q 태그
- 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용할 수 있는 태그
- q 태그를 사용한 콘텐츠는 큰따옴표로 묶임
[형식]
< q cite = "출처 Url">짧은 인용문< /q>
3.1.6 ins와 del 태그
- ins 태그 : 새로 추가된 텍스트 임을 나타낼 때 사용 (밑줄 표현)
- del 태그 : 기존에 있던 텍스트가 삭제된 텍스트 임을 나타낼 때 사용(취소선 표현)
[형식]
< ins>추가 텍스트< /ins>
< del>삭제 텍스트< /del>
3.1.7 sub와 sup 태그
- 각각 아래 첨자, 위 첨자에 해당하는 텍스트 작성 시에 사용
[형식]
< sub> 아래 첨자 < /sub>
< sup> 위 첨자 < /sup>
/
/
/
3.2 그룹 짓기
- 네이버의 경우, 검색/로그인/본문 배너/사이드 배너 등으로 그룹
- 그룹을 지으면 레이아웃 구성, 페이지 구성이 깔끔해짐
3.2.1 div 태그
- 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용
[형식]
< div> < /div>
3.2.2. span 태그
- 인라인 요소를 그룹으로 묶을 때 사용
- 하나의 태그 안에 작성된 텍스트 일부만 디자인을 다르게 적용하려면 태그 안에서 공간을 분할 해야 함. 이럴 경우에 span 태그 사용
- 그룹으로 묶어 요소의 공간 분할하면 분할 요소에 css로 스타일 적용 가능
[형식]
< span> < /span>
/
/
/
3.3 목록 만들기
3.3.1 ul 태그
- ul(unordered list) 순서가 없는 비순서형 목록 생성 시에 사용
- 이 때 목록은 li(list item) 태그로 구성
- ul 태그 사용 시, 목록 내용 마다 글머리 기호가 붙음
[형식]
< ul>
< li> 목록 내용< /li>
(중략)
< /ul>
3.3.2 ol 태그
- 순서형 목록을 생성할 때 사용
- li로 목록 내용 구성
[형식]
< ol>
< li> 목록 내용 < /li>
(중략)
< /ol>
3.3.3 dl 태그
- 정의형 목록(용어와 용어 설명을 나열한 형태의 목록)을 만들 때 사용
- dl 태그 목록 생성할 때 dt 태그로 용어, dd 태그로 설명 작성
[형식]
< dl>
< dt>용어 1< /dt>
< dd>용어 설명 1< /dd>
(중략)
< /dl>
/
/
/
3.4 링크와 이미지 넣기
- 링크 : 문서와 문서 간의 연결. 기본적으로 a 태그 사용
- 이미지 객체 삽입 시에는 img 태그로 작성
3.4.1 a 태그
- html에서 내부나 외부 링크 생성
- 대상 경로를 의미하는 href 속성 필수로 사용
- target, title 속성은 선택해서 사용 가능
[형식]
< a href="대상 경로" target="링크 연결 방식" title = "링크 설명">< /a>
- href 속성
- a 태그로 생성하는 링크의 대상 경로 입력 시에 사용
- 속성값은 대상 경로의 주소(url)이거나 내부 문서의 id 속성값
- target 속성
- 링크 생성할 때 대상이 연결되는 방식
- _blank, _parent, _self, _top 사용 가능
- 새 창이 열리는 _blank 제외 거의 사용하지 않음
- target 속성은 생략 가능
- title 속성
- 링크 설명하는 텍스트
- 생략 가능
3.4.2 img 태그
- 이미지 객체 삽입 시에 사용
- src 속성과 alt 속성으로 구성
[형식]
< img src="이미지 경로" alt="이미지 설명" >
-
src 속성
- 삽입하려는 이미지 경로 입력하는 속성
- 항상 웹 브라우저에서 실행되는 Html 파일의 위치가 기준
- ./ : 현재 폴더 (생략 가능)
- ../: 상위 폴더
-
alt 속성
- 삽입한 이미지 객체를 설명할 수 있는 텍스트
3.4.3 이미지 링크
- img 태그를 a 태그 안에 사용해 이미지를 클릭했을 때 특정 링크로 이동하게 하는 것
[형식]
< a href = "대상 경로">
< img src ="이미지 경로" alt = "대체 텍스트">
< /a>
/
/
/
3.5 텍스트 강조하기
3.5.1 strong 태그
- 텍스트 의미 강조할 때 사용
- 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시
- 중첩 사용 가능
[형식]
< strong> 중요한 의미가 있는 텍스트 < /strong>
3.5.2 em 태그
- 텍스트 의미 강조할 때 사용
- 텍스트가 기울어져 보이나 강조 효과 낼 수 있음
- 중첩 사용 가능
[형식]
< em>강조하고 싶은 텍스트 < /em>
