본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

문구 요소들 1

최초 작성일
최종 수정일
이번 시간에는...
HTML에서 문구에 강조나 출처 등의 의미를 부여하는 em, strong, cite, blockqoute, ins, del 요소(태그)를 살펴봅니다.

지난 강의에서 문단에 관한 요소들을 몇가지 살펴보았습니다. 이번에는 그 문단들 안에서 문구에 의미를 주는 요소들을 일부 살펴보겠습니다. 참고로 이번 강의에서 다루는 요소들은 거의 인라인 요소들입니다.

Em, Strong 요소

em과 strong 요소는 문구를 강조할 때에 사용하는 요소입니다. 둘 다 강조의 의미는 같습니다만, HTML 4.01 명세를 보면 strong이 보다 더 강한 강조라고 나와있습니다. (stronger emphasis)이 둘은 둘다 강조이긴 하지만, 브라우저에서 표현되는 모습은 서로 다릅니다. em은 기울어진 이탤릭체로(italic) 표현이 되고, strong은 굵은(bold) 글씨체로 표현이 됩니다.

하지만, 문제는 글을 쓰면서 대체 어느 문구가 '강조'이고, 어느 문구가 '더 강조'여야 할지 매우 난감합니다. 이 부분이 애매하기 때문에 누군가는 em요소를 많이쓰고, 누군가는 strong 요소를 많이 쓰는 식의 개인 취향에 따라 결정이 되는 경우도 많았습니다.

HTML5 명세에서 둘은 다른 의미를 나타냅니다. strong은 객관적인 중요성을 나타내고, em은 저자의 주관적인 강조를 나타내는 의미를 가집니다. em은 주관적인 강조일 뿐, 중요성을 나타내지 않습니다. 예를 들어 다음의 코드를 보세요.

위의 글을 보면 각각 '20,000원'과 '맛이 없었습니다'를 강조하고 있습니다만, 가격은 객관적인 사실로써 strong을 사용했고, 맛에 대한 평가는 주관적인 평가로써 em을 사용했습니다. 중요성 보다는 평가를 강조한다고 할 수 있습니다.

이 em, strong과 같은 효과를 내는 요소로 각각 i, b 요소가 있습니다만, (각각 'italic'과 'bold'의 줄임입니다.) i, b 요소는 웬만하면 자제하시기 바랍니다. 이 요소들은 그저 글자형태의 변형만 가져올 뿐 아무런 의미를 가지지 않습니다. 의미적으로 강조되지 않습니다. 비록 html5 부터는 의미가 생기긴 하지만, strong과 em을 대체할 요소로 사용하지 않기 바랍니다.

인용에 관한 요소 blockquote, q, cite 요소

여러분이 인터넷에서 글을 쓰다보면 분명 다른 글을 인용하는 경우가 종종 있을 겁니다. 이 blockquote와 q, cite는 그런 인용에 관한 요소들입니다. 일단 blockquote와 q는 인용된 내용을 나타내는 블럭요소와 인라인 요소입니다. cite는 인용된 자원을 나타내는 요소이고요.

먼저 blockquote 요소는 블럭요소로 기본 브라우저에서는 들여쓰기로 표현이 됩니다. 하지만, 단지 들여쓰기를 위해서 사용해서는 안됩니다. 블럭요소이기 때문에, 다른 블록요소들을 포함 할 수 있습니다. 상대적으로 긴 내용의 인용을 담기에 적합한 요소입니다.

그 다음 q 요소는 인라인 인용요소로 기본 브라우저에서는 따옴표로 표현이 됩니다. 때문에 q요소 안에 직접 따옴표를 넣는 것은 자제하도록 합니다.

cite 요소는 인용된 자원을 나타냅니다. 작가와 같은 사람의 이름을 마크업하시면 안되고 작품의 제목을 넣어야 합니다. 사실 꼭 인용이 아니더라도, 작품명을 언급할 때에 사용하시면 됩니다.

다음은 소설 소나기의 한 부분입니다.
'이 바보.'
조약돌이 날아왔다. 소년은 저도 모르게 벌떡 일어섰다.

속성으로써의 cite

cite는 요소가 아닌 속성으로도 존재합니다. blockquote와 q 요소의 속성으로 출처가된 URL을 넣을 수 있습니다. 이 속성을 넣으면 브라우저에서 볼 때는 아무런 표시가 없으나, 이 속성의 정보는 검색엔진이 활용합니다.

인용이 아닌 내용에 따옴표를 나타내기 위해 q 요소를 사용해서는 안됩니다.

ins 와 del 요소

웹에서 쓰여지는 글들의 특징은 언제나 수정과 삭제가 가능하다는 것입니다. 여기 이 ins 와 del 요소는 이러한 부분을 표현하는 요소입니다. ins 요소는 새로 추가되었음을 나타내며, del 요소는 삭제되었다는 것을 나타냅니다.

이 두 요소는 특이하게도 블럭과 인라인 모두의 형태를 가집니다. 그렇기 때문에 인라인 요소 안에 들어갈 수도 있으며, 블럭 요소를 포함할 수 도 있습니다.

매일 팔굽혀 펴기는 50회 2회 실시한다.

매일 아침 새벽에 일어나 30분 조깅을 한다.
식사는 고단백, 저열량으로 먹는다


아침에는 충분한 숙면을 취하도록 한다.
먹을 것에 스트레스 받지 않도록 한다.

추가로 당연한 얘기지만, ins와 del이 인라인 형태로 사용되었을 때에는 블럭형태를 포함 할 수 없습니다. 또한 의미가 아닌 단지 밑줄을 위한 사용도 절대 안됩니다.

이 요소들 말고도 문구에 의미를 주는 요소들은 더 있습니다만, 자주 사용하는 요소들 먼저 살펴보았습니다. 일단은 이 정도에서 마무리를 짓고, 나머지는 다음번에 더 다루도록 하겠습니다.

요점 정리
  • em, strong 요소는 문구를 강조할 때 사용
  • em과 strong은 의미가 거의 비슷하지만, em은 좀 더 주관적이고 strong은 좀 더 객관적인 강조
  • q, blockqoute 요소는 인용을 나타내는 요소
  • q 요소는 인라인 요소, blockqoute 요소는 블럭 요소
  • cite 요소는 작품의 명칭을 나타내는 요소
  • cite가 요소가 아닌 q나 blockqoute의 속성으로 사용될 때는 출처가 되는 URL 명시
  • ins와 del 요소는 각각 추가와 삭제를 나타내는 요소
  • ins와 del은 자신의 부모요소의 형태에 따라 블록이거나 인라인 요소일 수 있음.

이 글이 유용하셨다면 친구들에게 공유 해주세요.