html 에서 자주 사용되는 요소와 그 특성에 대해 알아보도록 하겠습니다.
문서에서 사용되는 주 언어 설정
html 루트 요소에 lang 속성을 사용하여 문서에 사용되는 언어(language)를 설정할 수 있습니다.
<html lang="ko">그리고 이에 대한 언어 코드는 ISO 639(전 세계 언어 명칭에 고유 부호를 부여하는 국제 표준)를 참고하여 언어를 설정하도록 합니다.
- 한국어 - ko 또는 ko-KR(Korea of Republic)
- 영어 - en
- 중국어 - zh
- 일본어 - ja
이러한 속성은 장애인을 위한 장치인 화면 낭독 프로그램인 스크린 리더기 통해서 위와 같은 속성을 읽게 해줌으로써 음성이 어떻게 출력될 지를 결정해 줄 수 있습니다.
Headings, Paragraphs, Lists, Links, img, 어휘 요소들..
일반적으로 구조적 디자인을 하기 위한 마크업은 body 태그 안에 HTML Elements 를 작성하게 되며, 본문 영역에 사용되는 태그들이 웹 서비스를 나타내는 구조에 해당합니다.
주요 요소들
HTML 태그의 종류는 다음과 같은 것이 있습니다.
|
Headings |
h1~h6 |
|
Paragraphs |
p |
|
Lists |
dl, ul, ol |
|
Links |
a, image-map |
|
Images |
img |
|
Tables |
table, tr, th, td, caption, col 등... |
|
Forms |
input, select, textarea |
|
address |
address |
|
structure |
div, span |
Headings – h1~h6
제목의 단계(Headings)를 뜻하며, 사용자가 가장 먼저 읽는 콘텐츠는 제목이며, h 요소로 구성됩니다.
헤딩 태그는 문서의 주요 타이틀에 사용하며, 중요도가 높은 제목일 수록 낮은 hx 값을 갖습니다.
다시 말해, 대제목, 중제목, 소제목, 소소제목, 소소소제목... 으로 구성할 수 있습니다.
<h1>개인정보 취급방침 안내</h1>
<h2>수집하는 개인정보의 항목 및 수집방법</h2>
<h3> 가. 수집하는 개인정보의 항목</h3> <h1> - 오래 전부터 h1 요소는 문서에서 단 한번만 사용할 수 있습니다(전근대적 사고방식)
HTML5에서는 섹션 콘텐츠 마다 사용 가능합니다.
PSD와 같은 비주얼 디자인을 전달 받으면 그 디자인 및 SB(Story Board)를 분석해서 구조화시켜야 합니다.
일반적으로 크게 레이아웃, 요소요소의 스타일링을 제외하면 문서의 제목, 즉 레벨과 그 관계성을 구조화시켜줘야 합니다.
하지만 이러한 문서의 구조화는 올바르게 지켜져야 하는게 맞지만 국내에서는 구조화를 알아도 귀찮아해서 사용하지 않는 경우가 많은 것이 현실입니다.
예를 들어, 인용 문장을 단락화 했다고 해서 문법 오류는 아니기 때문에 이는 마크업 개발자의 해석에 따라 사용되는 요소는 달라 질 수 있는 사항으로 강제성을 띨 수는 없습니다.
다만 일반적으로 암묵적,묵시적으로 통용되고 널리 사용되는 접근성 측면의 마크업 구조화는 있기에 그에 기반할 수는 있습니다.
결론은 마크업을 구조화하는 사람의 성향에 따라 달라질 수도 있고, 실무 범위에 따라 사용빈도가 높거나 낮을 수 있습니다.
Paragraphs – p
문장의 단락을 표현하기 위해 사용하며, 새로운 문장을 사용해야 하는 경우 p 태그를 새로 선언하도록 합니다.
주로 헤딩 태그와 함께 쓰이곤 하며, 단락(p) 요소는 어휘 콘텐츠(Phrasing Content)만 자식 요소로 허용합니다.
<p>이 사이트는 개인적인 목적으로 만들었습니다.</p>
<p>방문자는 방명록을 남겨주세요.</p>Lists – ul(Unordered list), ol(Ordered list),dl(Description list)
목록은 리스트를 말하며 리스트는 크게 비순차형 목록, 순차형 목록, 정의(설명)형 목록으로 나눌 수 있습니다.
-
ul, ol : 비순차형 목록은
ul이며, 순차형 목록은ol요소를 사용합니다.
ul, ol 은li(listed item)을 자식으로 가지고 있습니다. -
dl(정의형 또는 설명형 목록) : 설명형 목록은
dt(Definition Term)인 용어,dd(Definition Description)인 용어 설명 요소와dl(Description list)인 설명 목록으로 구성되는데 dl 은 dt, dd 를 자식으로 가지게 됩니다.
다시 말해, 설명,정의형 목록은 여러 쌍의 정의된 용어, 설명을 그룹화 시켜 구성하게 됩니다.
<dl>
<dt>명사</dt>
<dd>사물(事物)의 이름을 나타내는 낱말 갈래</dd>
</dl>
<h3>상비약 목록</h3>
<ul>
<li>감기약</li>
<li>소독약</li>
</ul>
<h3>실시간 급상승 검색어 순위</h3>
<ol>
<li>아이유</li>
<li>에프터스쿨</li>
</ol>Links – a(Anchor) 및 경로(path), image map
링크 요소에 대해 알아보도록 합니다.
<a href=“#” target=“_blank”>페이스북</a>a(anchor) - 하이퍼링크(Hyperlink)
앵커 요소는 주로 페이지 내 링크 이동 또는 다른 페이지로 이동하기 위해 사용합니다. anchor hypertext reference="url"
a 요소에 href 속성을 사용하여 링크 주소를 설정하고 요소 내부에는 콘텐츠를 추가하여 사용자에게 보여줄 수 있습니다.
그리고 하이퍼링크 주소는 파일을 참조하기 위해 인터넷은 URL(uniform resource locators)를 사용합니다.
URL은 웹 사이트의 리소스 위치 경로를 말하며 다음과 같이 구성됩니다.
절대 / 상대 경로, 루트 상대 경로에 대하여
웹 문서에 URL을 입력하는 방법은 3가지가 있습니다.
- 절대경로 (absolute path)
- 상대경로 (relative path)
- 루트 상대경로 (root-relative path)
절대경로
절대 경로는 현재 HTML 문서와 상관없이 URL 주소를 사용해 리소스를 찾는 것을 말합니다.
"http://domain.com/resource.html" 과 같이 사용합니다. (아래 이미지 참고)
상대경로
상대 경로는 현재 HTML 문서에서 상대적인 위치를 설정하는 것을 말합니다.
"../misc/extras.html" 과 같이 사용합니다. (아래 이미지 참고)
루트 상대경로
루트 상대경로는 현재 HTML 문서가 존재하는 영역의 최상위 루트 경로에서 대상을 찾는 것을 말합니다.
"/images.html" 과 같이 사용합니다. (아래 이미지 참고)
Images - img, figure, figcaption
화면에 표시되는 이미지 요소와 도표, 차트, 표, 이미지 등을 캡션과 함께 묶어주는 피규어 요소에 대해 알아보겠습니다.
img
<img src="smiley.gif" width="42" height="42" alt="Smiley face"> 전경 이미지를 표현하기 위해 사용하고 src(source) 는 의미 그대로 자원이 있는 곳의 위치를 정의하는 것입니다.
그리고 alt(alternate text)는 화면에 이미지가 보여지지 않거나 이미지를 볼 수 없는 사용자(장애인)를 위한 대체 텍스트로
이미지를 대신할(표현할) 글을 작성하는 하는 것으로 이는 스크린 리더가 이 내용을 읽어주게 됩니다.
그렇게 때문에 이 대체 텍스트는 이미지에 대한 내용을 분석하고 그에 걸맞는 묘사를 기술해야 합니다.
이는 웹 접근성을 위해 반드시 필요하며 의미없는 이미지인 경우에는 빈 칸, 즉 비워둘 수 있습니다.
또한 이미지 링크가 깨질 경우, 화면에 alt 속성 값이 출력 되어 어떤 이미지 였는지 정보가 제공되기 때문에
alt 속성을 잘 설정해두면,
시각 장애인이 아니더라도 도움을 받을 수 있는 측면이 있습니다.
그리고 이미지가 잘 표현될 경우에 일반 사용자도 대체 텍스트와 같은 내용을 제공해 주고 싶다면 title 속성을 사용할 수 있습니다.
이 타이틀 속성은 마우스 오버를 할 때 툴팁 효과로 나타내어 집니다.
하지만 alt 속성 자체를 생략할 수는 없습니다.
그리고 이미지 요소에는 width, height 속성값을 정의할 수 있는데 width 는 이미지 너비 설정 height 는 이미지 높이를 설정할 수 있습니다.
이는 이미지를 좀더 빠르게 내려받을 수 있도록 하는데 도움을 주기 때문에 브라우저 최적화에도 좋습니다.
스크린 리더기(화면 낭독기)는 센스리더, 조스, NVDA 등이 있으며 국내에서는 주로 센스리더기를 사용하며,
MAC 은 Voice Over 가 탑재되어 있습니다.
이미지의 경우 스크린 리더기는 alt 속성의 대체 텍스트를 읽게 되며, 속성값이 비어있을 경우 아무런 내용도 읽지 않습니다.
하지만 alt 를 생략하는 경우에는 src 의 값인 불필요한 정보를 읽게 되기 때문에 생략하지 않도록 해야 합니다.
웹 문서에서 사용되는 이미지 포맷은 비트맵 그래픽 파일은 JPG, GIF, PNG 포맷이 사용되고 벡터 그래픽 파일은 SVG 포멧이 사용됩니다.
- JPG : JPG 이미지는 압축률이 높고, 다양한 색상을 처리하도록 설계되었으며, 사진 또는 복잡한 그래픽(그레디언트와 같은) 이미지에 많이 사용 되는 포맷입니다. 하지만 GIF, PNG와 달리 투명(transparent)한 픽셀을 허용하지 않습니다.
- PNG : PNG는 사진이나 애니메이션을 제외한 모든 유형에 적합하며 사진의 경우 동일한 품질의 PNG 파일 크기가 일반적으로 JPG 보다 크기 때문입니다. 하지만 JPG와 달리 투명 처리가 가능해 아이콘, 로고, 다이어그램 등에 사용하면 좋습니다.
- GIF : GIF는 표현 가능한 색상이 256색으로 제한적이기 때문에 사진에는 적합않으나 애니메이션을 적용할 수 있는 포멧으로 단순한 그래픽의 애니메이션에는 사용하기 좋습니다. 그리고 투명 처리가 가능하나 PNG 포멧 보다 표현력이 떨어집니다.
-
SVG : SVG는 벡터 기반 그래픽 포맷으로 품질 손실없이 확대, 축소 할 수 있습니다.
이러한 이유로 오늘날과 같은 환경 즉, 다양한 스크린에 대응하는 반응형 웹 디자인에 매우 적합합니다.
비트맵 이미지는 크기를 키울 경우 뿌옇게 표시됩니다. (픽셀로 구성된 그래픽 이기 때문)
한글(.hwp)이나 워드(.doc) 같은 경우는 문서에 이미지를 포함시키고 있는데 이렇게 포함시키고 있는 것을 임베디드(embedded)라고 하는데
html 문서는 이미지를 포함하지 않고 이미지를 연결해서 사용하는 시스템입니다.
이미지가 html 문서에 포함하게 되면 html 파일의 용량이 커지기 때문에 서버로부터 html 파일을 내려받을 때 속도가 느려지게 됩니다.
이러한 문제로 이미지는 html 문서에 포함되지 않습니다.
figure, figcaption
피규어(figure) 도표, 차트, 표, 이미지 등을 캡션과 함께 감싸는 데 사용되고 즉, 문서에서 참조하는 이미지 영역이라는걸 명시해 주도록 figure 요소로 감싸주는 것입니다.
그리고 피규어 캡션(figcaption)은 피규어에 대한 요약(설명)을 나타내는데 사용합니다.
<figure>
<img src="images/bueaty.jpg.jpg" alt="jtbc 드라마 [뷰티인사이드] 의 남녀 주인공이 재회하는 장면">
<!-- figure caption -->
<figcaption>출처 : jtbc 뷰티인사이드의 방송화면 캡쳐</figcaption>
</figure>이미지만 사용될 경우는 img 요소만으로 구성하여도 되며,
이미지 + 캡션과 같은 구조일 경우에는 figure, figcaption 요소와 함께 사용하는 것이 좋습니다.
인용(Quotation) 구문, 창작물 참조 요소(cite)와 줄바꿈(Line Break)
인용문 사용과 출처를 나타내는 요소 그리고 줄바꿈에 대해 알아보겠습니다.
인용(Quotation) 구문
인용이라 함은 남의 말이나 글을 따오는 수사법으로 홑따옴표,쌍따옴표 등을 사용하여 어떤 글을 이용하는 것을 말합니다.
일반적으로 직접 인용의 경우 쌍따옴표를 사용하고 간접 인용의 경우 홑따옴표를 사용합니다.
HTML 에서의 인용문은 짧은 인라인 인용문과 긴 인용문을 주로 사용하는데,
Quote 요소인 <q> 는 둘러싼 텍스트가 짧은 인라인 인용문이라는 것을 나타내고
이 요소는 단락 구분이 필요없는 짧은 인용문을 위해 사용되며, 긴 인용문에는 <blockquote> 요소를 사용합니다.
그리고 글의 줄 마다 줄바꿈을 사용하는 경우에는 Line Break 인 <br> 을 사용합니다.
단, 디자인 상에서 라인과 라인의 공간이 크다고 하여 br 을 여러 번 사용하는 것은 옳지 않습니다. br 은 어디까지나 line break 이며,
디자인 요소는 CSS 로 처리하는 것이 바람직합니다.
어휘(Phrasing) 요소들
문장 내에서 사용하는 요소들에 대해 알아보도록 하겠습니다.
비주얼 디자인적, 구조적 디자인을 진행함에 있어서 문장 내 특정 부분의 중요성을 강조하거나, 컨텐츠의 일부를 강조, 중요성, 관련성 보다는 다른 글자와 구분하기 위한 목적으로 사용하는 경우가 있습니다.
이러한 어휘 요소에서 사용되는 요소들은 다음과 같습니다.
<strong>: 강한 강조로 내용의 중요성(importance), 심각성(seriousness), 긴급성(urgency) 을 강조할 경우에 사용<em>: (약한) 강조<b>: 중요성, 관련성 없이 다른 글자와 구분을 목적으로 사용 되는 요소<i>: 다른 글자와 구분되는 기술적 용어, 관용구, 생각 등에 사용 되는 요소
일반적으로 의미로써의 강조(Semantic)와 표현으로써의 강조(Non-Semantic)가 있을 수 있는데, 이러한 것을 구분해서 적용할 수 있어야 하는데 제작자 입장에서는 문맥을 파악하고 의미적 강조인지 표현적 강조인지를 판단하여 마크업을 하는 것이 중요합니다.
strong - 의미 요소(Semantic Element)
강조의 의미를 부여하는 용도로 사용하며, 내용의 중요성(importance), 심각성(seriousness), 긴급성(urgency) 을 강조할 경우에 사용합니다.
중요성이라는 것은 제목/캡션의 글자 중 일부를 더욱 강조하는데 사용하고, 심각성은 경고 또는 주의를 주고자 할 때, 그리고 긴급성은 문서의 다른 부분보다 빨리 보아야하는 내용을 나타내는데 사용할 수 있습니다.
strong 요소는 <q> 요소와 마찬가지로 중첩이 가능하고 중첩될 경우에는 계층적 구조로서 각 뎁스를 가지고 됩니다.
em - 의미 요소(Semantic Element)
em 요소는 특정 내용의 스트레스(Stress) 강조(Emphasis)로써 문장의 의미를 변경하는 다소
약한 강조를 나타낼 때 사용합니다.
b - 의미가 없는 요소(Non Semantic Element)
b 요소는 단순히 다른 글자와 구분하기 위한 용도이거나 문서 요약의 주요 단어, 제품 이름 등에 사용할 수 있습니다.
아래와 같은 조건에 부합하지 않을 경우에 b 요소를 사용하는 것이 좋습니다.
- 제목은 h1 ~ h6 요소를 사용
- 강조는 em 요소를 사용
- 중요도는 strong 요소로 표시
- 표시 또는 강조 표시된 텍스트는
mark요소를 사용
i - 의미가 없는 요소(Non Semantic Element)
i 요소 역시 다른 글자와 구분된 용도로 사용하나 기술적 용어, 다른 언어(목소리), 인물의 생각 등을 표현할 때 사용할 수 있습니다.
과거 HTML 4.01 버전에서는 b, i 요소가 단순히 볼드와 이탤릭체로 표현만 하는 요소였기 때문에 사용하지 말라고 했으나
오늘날의 HTML5 에서는 각각 다른 형태로 사용하도록 권장하고 있습니다.
그리고 비주얼 디자인적으로 볼드체라고 해서 strong, em 요소를 사용할 필요가 없으며 의미론적으로 접근하여 마크업을 할 수 있도록 하는 것이 좋습니다.
볼드나 이탤릭체는 CSS 디자인적으로 변형이 가능하기 때문에 요소의 오리지널로 표현되는 디자인에 얽매일 필요가 없습니다.
Related Info
'HTMLㆍCSS 기초 강좌 > HTML' 카테고리의 다른 글
| #5 Interactive, User Interaction, Metadata (0) | 2018.12.26 |
|---|---|
| #4 Tables, 폼(양식,Forms) 구성 요소들 (0) | 2018.12.26 |
| #3 Sections 요소, Main, Text Level, Grouping etc.. (1) | 2018.12.26 |
| #1 HTML 이란 무엇인가? (5) | 2018.12.20 |
