<SPAN>
글의 ‘덩어리’를 표시하기 위한 태그. p태그로 구분된 내용은 줄이 바뀌고 폭이나 여백을 설정할 수 있지만 span태그는 그렇지 않다. p태그와 span태그의 구별은 초반엔 쉽지 않으니 대략의 차이를 이해하고 넘어가자. 기사의 본문에서는 사용되지 않고(기계가 생성한 코드에서는 쓰인다) 주로 작성자, 작성일 등 짧은 정보문구나 썸네일에 올라가는 짤막한 내용에 사용된다.
<BR>
행을 넘긴다. p태그와 달리 단순히 행만 넘기기 때문에 나중에 들여쓰기라던지 간격 조정이 어렵다는 단점이 있다. 짧은 곳에서 간단히 2줄 정도를 써야 할때는 <BR>를 사용하는 것이 적합하다. 4줄 이상의 글에 대해서는 항상 p태그를 권장한다.
<p>하루세끼 먹으면서 살빼는<br> 다이어트의 비밀!</p>
<HR>
전체 폭만큼 가로줄(Horizontal Rule)을 넣는다. 그냥 넣게되면 살짝 그림자 효과가 생기고, 두께를 조절하기 어렵다. 따라서 css에서 스타일링을 통해 줄의 스타일을 변경할 수 있다.
<hr>
<p>하루세끼 먹으면서 살빼는<br>
다이어트의 비밀!</p>
<hr>
<style>
hr{border: 2px solid blue;}
</style>
<FIGURE>, <FIGCAPTION>
이미지를 삽입할 때, 이미지의 출처 및 제목에 대한 설명—캡션(caption)—은 매우 중요하다. 그래서 이미지(IMG)와 캡션(FIGCAPTION)을 모두 포함하고 있는 도판(FIGURE)을 정식으로 삽입하는 방식은 다음과 같다. figure태그 속에 img태그와 figcaption태그 둘 다 들어가 있어야 한다. figure태그의 앞뒤에 여백(margin-top, margin-bottom)을 충분히 주어야 기사를 원활하게 읽을 수 있다.
<figure> <img src="./img/example.jpg"> <figcaption>도판 예제설명</figcaption> </figure>
<MARK>, <STRONG>, <EM>
기사를 작성하다보면 어떤 부분은 형광펜처럼 마킹(mark)하고 싶을 때가 있고, 어떤 부분은 강조(strong, emphasis)하고 싶을 때가 있다. 이 두 가지 경우에 대해서 부분적으로 배경색을 넣어주는 mark태그와 볼드서체로 강조해주는 strong, 이탤릭 서체로 강조해주는 em태그를 사용할 수 있다.
- mark태그는 css를 수정하지 않아도 기본적으로 노란 배경색이 설정된다. 수정하고 싶다면 mark{background:blue}와 같이 다른 색상을 적용할 수 있고 이외에도 모든 text-decoration 옵션이 적용된다.
- strong태그는 기본적으로 글씨의 두께를 두껍게 표시한다.
- em태그는 로만 알파벳을 사용하는 서양식 타이포그래피의 관습에 따라 이탤릭으로 표시한다.
- html5이전 버전에서 계승된 b(bold)태그와 i(italic)태그도 존재하나, 이렇게 함축적인 의미를 가진 태그들은 점차 지양되는 추세다.
- 예제문서에서 mark태그와 em태그의 예제를 살펴보라.
예제문서에서 figure, figcaption, mark, em예제를 살펴보라.
css를 수정해서 mark를 strong처럼 보이게 할 수도 있고, em을 mark처럼 보이게도 할 수 있다. 이 세 가지 태그들은 단순히 소스를 시맨틱하게—이해하기 쉽게 만들기 위해—구분하여 지정한 태그들이다.
<BLOCKQUOTE>
글의 중간에 인용문이나 짧은 강조문구를 하나의 블록으로 삽입할 때 사용하는 태그. 한 단어가 아니라 한 블럭 전체를 삽입하는 태그다. p태그와 같이 내용 앞뒤에 마킹하고 내용 강조될 수 있는 css스타일을 적용한다. 나는 코드를 삽입하기 위해 blockquote태그를 사용했다. 코드를 삽입하기 위한 전용의 code태그도 존재하지만 스타일이 불필요하게 늘어나는 것을 막기 위해 본 실습페이지의 스타일에서는 인용과 코드 모두 blockquote태그를 사용하였다.
<blockquote> 스타일이 불필요하게 늘어나는 것을 막기 위해 본 실습페이지의 스타일에서는 인용과 코드 모두 blockquote태그를 사용하였다. </blockquote>
blockquote태그는 p태그와 거의 기능은 동일하다. 그래서 <p class="blockQuote">와 같이 p태그에 임의로 클래스를 지정해서 쓸 수 있다. 이러한 클래스를 사용한 스타일링은 전형적인 html4스타일이다. 최대한 태그를 활용해야 코드를 해독하기 쉽고 바람직하다. 같은 맥락에서 mark, em, strong태그는 span태그에 클래스를 지정해서 구현할 수 있지만 자제하는 것이 좋다.
팁: 한글에서 밑줄 넣기
밑줄을 넣기 위한 css옵션은 원래 ‘text-decoration:underline’이다. 이렇게 밑줄을 표시하면 베이스라인에 딱 붙는 밑줄이 그려지기 때문에, 다음과 같이 ‘border-bottom’ 속성을 사용하여 스타일을 지정하는 것이 더 좋다.
em{font-weight:700; border-bottom:2px solid black}
리스트 <UL>, <OL>
리스트는 사실 어마어마하게 중요하다. 메인페이지에서 섹션에 썸네일들이 들어갈때 리스트로 집어넣기 때문이다. 우선 기사 안에 몇 가지 항목들을 불릿을 달아 리스팅하는 기본적인 사용법을 살펴보자.
리스트에는 두 가지 종류가 있다. 하나는 순서 없이 불릿만 다는 UL(Unordered List)이고 다른 하나는 번호 순서로 항목을 리스트업하는 OL(Ordered List)이다. 불릿의 모양을 바꾸고 싶다면, list-style을 검색해서 활용해보자.
UL과 OL태그 사이에는 LI(List Item) 태그들이 항목별로 포함된다.
<p>음식의 종류</p> <ul> <li>한식</li> <li>중식</li> <li>양식</li> </ul> <p>코딩 순서</p> <ol> <li>html파일로 저장한다.</li> <li>head, body, style태그를 삽입한다.</li> <li>head에는 설정을 입력한다.</li> </ol>
