<tag>에 관하여
앞서 HTML을 대충 훑어봤지만 HTML에서 가장 중요한건 말했듯이 <tag>입니다.
<tag>에 대해 살펴 보겠습니다.
기본적으로 태그안에 태그를 이용할 수도 있고 단독으로도 사용할 수 있습니다.
텍스트 레벨에 관한 태그들 - a, em, strong
-요약설명
- a 요소 : HTML에서 가장 중요한 태그이고 link를 통해 이동할 때 사용하는 태그입니다. 하이퍼링크라고 불리며 매우 중요한 태그입니다.
- em 요소 : 인터넷사이트에 보면 중요한부분을 "강조" 하기위해 이렇게 검은색으로 진하게 표시된 부분을 확인해 볼수 있습니다.
- strong 요소 : 또한 강조를 하기위해 "진한색" 으로 강조를 표시하는 부분도 있습니다. 그럴 경우에는 strong을 사용합니다.
-심화설명
· a요소 / 표기법:<a href=""></a>
a 요소는 "Anchor"의 약자이며, 웹 문서나 인터넷 상의 다른 자원으로 연결되는 하이퍼링크(hyperlink)를 넣기 위해 사용됩니다.
href 속성은 "hyper reference"의 약자이며, 이곳에 이동할 대상의 URL을 입력합니다.
href 속성으로 "tel:010-1234-4567"으로 속성을 주면 스마트폰으로 클릭 시 전화를 걸 수도 있으며,
이메일을 전송하려면"mailto:abc@example.com"형식으로 입력시 이메일 클라이언트가 실행됩니다.
a요소의 target속성에는 다음과 같은 속성이 있습니다.
target 속성값/사용법 |
설명 |
<a href="" target="_blank ">Move</a> |
링크를 클릭시 현재 페이지를 다른페이지로 이동시킴. |
<a href="" target="_parent ">Move</a> |
링크를 클릭 시 새탭을 열어 페이지를 이동시킴. |
<a href="" target="_top ">Move</a> |
링크를 클릭 시 부모 페이지로, iframe 등이 사용된 환경에서 부모의 페이지가 사이트로 이동됨. |
<a href="" target="_self">Move</a> |
링크를 클릭 시 최상위 페이지를 사이트로 이동시킴. |
<a href="" target="프레임이름">Move</a> |
직접 해당 프레임이름을 사용해서 사용할 수 있습니다. |
· em요소 / 표기법<em></em>
em 요소는 "emphasize"의 약자이며, 중요한 문구를 강조하는 HTML 태그 중 하나입니다.
글자가 기울림체로 표현됩니다. 기존 <i>태그도 마찬가지로 기울림체 였으나 HTML5로 넘어오면서 웹 표준성 및 접근성으로
<em>태그로 교체되었습니다.
· strong요소 / 표기법 <strong></strong>
strong 요소는 역시 중요한 문구를 강조하는 HTML 태그 중 하나입니다.
em 요소와는 다르게 글자가 두껍게 표현됩니다.
strong 태그도 마찬가지로 기존 <b>태그와 같은 역할이 였지만 음성으로 인식이 안되어 시각장애인 및 웹 표준성,접근성에 이용이 어려워
<strong>태그로 교체 되었습니다.
기존의<i>나 <b>의 태그의 경우 정보를 나타내는 HTML Dom트리 안에서 아무런의미가 없고 시각적인 효과만 가져오기 때문에 배제가 되었고, <strong>과 <em> 두 요소 모두 강조의 뜻이기 때문에 어디에 사용해야할지 애매할 경우 가 많습니다. HTML5명세에서 둘은 다른 의미를 나타냅니다. <em>요소의 경우 저자의 주관적인 강조를 나타내는 의미를 나타냅니다. 즉, 주관적인 강조일 뿐 중요성을 나타내지 않습니다.
하지만 <strong>요소의 경우 객관적인 사실로써 중요성을 나타냅니다. 아래 예제를 통해 살펴보겠습니다.
예제:
<p>오늘 김밥천국에서 먹은 참치 김밥은 <strong>2,500원</strong> 이였는데, <em>매우 맛이 있었다.</em></p>
예제에서 보면 알 수 있듯이, 객관적인 사실로써 strong 요소를 사용하고, 주관적인 평가로 em을 사용했습니다.
즉, 둘은 강조이긴 하지만 다른 강조의 의미이며, 정확한 의미를 알고 정보의 주체인 HTML에 태그로 잘 사용하시면 됩니다.
※하지만 CSS3가 등장을 함으로써 좀 더 HTML은 정보의 주체로, CSS는 디자인의 요소로 쓰기때문에, HTML태그의 기본 효과들을 전부 배제하고 있는것이 추세입니다. 그 결과로 CSS 초기화 라는것을 진행해줍니다. list목록의 기본 효과를 없앤다던가, 각 태그들의 padding과 margin을 0으로 만들어 준다던가 그리하여 사실상 css로 font-style로 굵게 표시하거나, 기울림 표시를 따로 효과를 주어 사용하고 있는 추세입니다.
또한, 해당 <tag>를 기존의 <i>나 <b>과 같은 태그에서 <em>이나 <strong>으로 사용하는 이유는, 웹 표준성, 접근성에 따른 이유입니다.
위에서 언급 드렸지만 좀 더 상세한 시점으로 접근했을때, 기존의 <i>나 <b>같은 경우 시각 장애인들을 위해 홈페이지에서 따로 음성 지원이 되지 않아 중요성을 강조하지 못하고 그냥 지나가는 반면, <em>태그나 <strong>태그의 경우 중요하다고 음성지원이 따로 되어, 시각장애인들에게 좀 더 접근할 수 있는 접근성을 갖고 있습니다. 그리하여 점점 HTML와 CSS 는 진화하고 그 의미의 정확성을 위해 지속적으로 <tag>또한 버전이 업데이트 되고 있는 것입니다.
※특징 :
a태그의 경우 href:"이동을 원하는 사이트 주소"로 사용될 수 있으며 브라우저 기본 css에 따라 파란색 색갈과 밑줄이 생성됩니다.
또한, target=""속성을 사용하여 새로운 창(_blank)를 만들거나 (title="")로마우스를 올려놓았을때 설명창이 나오게도 만들 수 있습니다.
그리고 a태그의 경우 태그안에 text를 링크하기위해 쓰이는데 li를 링크한다고하여 ul>a>li 이런식으로 써서는 안됩니다.
간혹 초보자분들이 ul>a>li나 ol>a>li 이런식으로 사용하는 경우를 종종 보아왔습니다.
해당 li를 a로 감싸는것에 대한 자세한 태그는 아래에서 확인 해보겠습니다.
예시:
<body>
<strong>리치 벤베스의 실험실</strong>은 <em>"Web에 관해 연구하고 실험하는곳"</em> 입니다.
<a href="http://richvenveis.tistory.com">이곳을 클릭!</a>하면 메인 홈페이지로 이동합니다.
</body>
결과:
리치 벤베스의 실험실은 "Web에 관해 연구하고 실험하는곳"입니다.
이곳을 클릭!하면 메인 홈페이지로 이동합니다.
|
제목과 하위제목에 관한 태그들 - h1, h2, h3, h4, h5, h6
-요약설명
- h1 요소: 최상위 제목, 사이트의 가장 중요한 제목
- h2~h6 요소: 부제목
-심화설명
· h1, h2, h3, h4, h5, h6 / 표기법 : <h1></h1>
h1이란 "Headline no.1"의 약자로 표기된 HTML의 태그입니다.
<h1>태그의 숫자가 1에 근접할 수록 웹사이트의 중요성이 강조되며, 글씨의 크기가 커집니다.
이 <h1~h6>의 요소가 매우 중요한 요소인 이유는, 해당 웹 페이지를 헤드라인 요소를 기준으로 파악하기 때문입니다.
인터넷 웹 사이트가 검색엔진에서 검색될 때 어떤 내용이 중요하고 어떠한 내용이 덜 중요한지를 파악합니다. 그렇게 때문에, 웹페이지를 제작할때, 가장 중요한 제목 부분에 <h1>을 쓰는것이 현명하고, 내용이 들어가는 부제목, 표제목같은곳이 h2,h3,h4...순으로 사용하는게 좋은 예시입니다.
또한, <h1>는 한번만 사용 해주셔야하며, <h1>태그에 포함된 키워드를 너무 많이 기재하거나, 문그의 의미를 알 수 없는 문장을 작성하게 될 경우 역효과가 날 수도 있으므로 주의하셔야 합니다.
아래의 예제를 보고 이해하고 넘어 가겠습니다.
예제:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>오늘의 뉴스</h1>
<h2>리치 벤베스의 실험실 폭파되다!</h2>
<h3>폭파의 원인</h3>
<p>과도한 접속자들의 접속과 엄청난 댓글로 인한 서버 다운이 되었다고 전해진다.</p>
<h3>추후 블로그의 동향</h3>
<p>사이트를 제건하고 1일 1글을 쓰도록 노력하겠다고 인터뷰를 응해주신 저자 리치 벤베스의 인터뷰가 진행되었다.</p>
<h2>리치 벤베스의 실험실 재건하다!</h2>
<h3>재건의 이유</h3>
<p>열심히 복습을 하며, 암기를 하는 리치 벤베스선생님의 개인적인 이유. 그냥</p>
<h3>추후 실험실의 동향</h3>
<p>복습을 착실하게 하면 계속 좋은 정보가 올라올 것이고...</p>
</body>
</html>
하지만 사실상, <h1>태그로 개발자들이 해당 키워드를 악용하여 현재 "Goolgle 검색엔진에서는 순위 상승에 효과는 거의 없다"라고 이야기가 나오고 있습니다. 하지만 검색엔진최적화(SEO)를 위해 <h1~h6>태그는 불가피하며, 사이트의 가독성을 높이고, 유저에게 보다 좋은 평가를 받는 사이트로 연결 될 수 있습니다.
※특징 :
HTML5 으로 넘어오게 되면서, <section></section>태그를 사용할때는 반드시 h1~h6태그중 하나가 들어가야 인식이 됩니다.
사이트 검색엔진이 좀 더 원할하게 검색을 하기 위해 h1~h6을 전부 써주는게 웹사이트를 제작할때 훨씬 효율적이고 효과적입니다.
역시나 브라우저마다 기본으로 설정된 CSS가 적용되어 크기와 글꼴이 정해지며, h1이 가장 큰 기본값을 가지고 있습니다.
주의할 점은, 제목 크기를 작게하기위해 h2, h3로 내려가면 매우 좋지 않으며, 스타일을 관리하는 CSS로 font-size 속성을 이용하여 조절해주는것이 좋습니다.
반드시 h1부터 순차적으로 기입해야하며, h2을 사용했다가 h1이 오는 불상사는 일어나지 않게 주의해주시면 됩니다.
기본값(default)으로 block엘리먼트로 설정되어 있습니다.
예시:
<body>
<h1>안녕하세요?</h1>
<h2>안녕하세요?</h2>
<h3>안녕하세요?</h3>
<h4>안녕하세요?</h4>
<h5>안녕하세요?</h5>
<h6>안녕하세요?</h6>
</body>
결과:
안녕하세요?
안녕하세요?
안녕하세요?
안녕하세요?
안녕하세요?
안녕하세요?
목록과 리스트에 관한 태그들 - ul, ol, li
-요약설명
- ul 요소: 순서가 없는 목록(unordered list)
- ol 요소: 순서가 있는 목록(ordered list)
- li 요소 : 목록 안에 담기는 항목들 (list)
-심화설명
· ol요소
"Ordered List"약자로 1,2,3와 같이 번호 형식의 순서가 있는 목록입니다.
기본값(default)은 블럭요소로 이루어져 있으며 ol다음엔 반드시 li태그가 와야합니다.
또한 순서가 1,2,3 순서가아닌 20부터 시작하여 20,21,22로 하고싶을 경우에, <ol start="20"></ol>와 같이 20부터 시작이 가능하며, 숫자를 거꾸로 5,4,3,2,1 같이 내려오고 싶다면 <ol reversed="reversed"></ol>와같이 속성을 주면 반대로 사용할 수도 있습니다.
<ol>
<li>Hello !</li>
<li>Hello !</li>
<li>Hello !</li>
</ol>
· ul요소
"Unordered List"의 약자로 리스트 목록 앞 에 1,2,3 과같은 순서가 없이 사용할때 사용됩니다.
ol과 비슷하며 기본값(default)은 블럭요소로 이루어져 있고 반드시 ul다음에 자식으로 li요소만 포함할 수 있습니다.
위에서 말씀 드렸다시피 ul>a>li식으로 사용하면 안됩니다.
기본적으로 a태그의 경우 inline 엘리먼트 태그이고, li의 경우 block엘리먼트 태그이기 때문입니다.
또한 검색엔진에서 리스트를 검색할때 ul li 순으로 혹은 ol li 순으로 있어야 원활한 서치가 되기 때문입니다.
단, ul요소의 경우 ol와 같이 순서의 태그가 아니기 때문에 reversed나, start의 속성을 줄 수가 없습니다.
<ul>
<li>Hello !</li>
<li>Hello !</li>
<li>Hello !</li>
</ul>
· li요소
"List item"의 약자로 ul태그와 ol태그의 내부에 사용되는 list태그 입니다.
<li>내용</li>태그안에 내용이 들어 가게되며, 목록의 내용이 되는 실질적인 태그입니다.
ol 직속 자식으로는 li가 와야하지만 li안에 또 다시 ol>li, 또는 ul>li 순으로 중첩으로 사용하는것이 가능합니다.
<ul>
<li><a href="">Hello !</a>
</li> <li><a href="">Hello !</a>
</li> <li><a href="">Hello !</a>
</li> <a href=""><li>Hello !</li></a> // (x)
</ul>
또한, CSS를 이용하여 ol에 순서가 없이 도식으로, 또는 ul에 순서를 줄수도 있습니다.
속성:
disc : ● |
circle:○ |
square:■ |
decimal: 숫자 |
decimal-leading-zero: 0을 포함한숫자 |
upper-roman:로마숫자 |
lower-alpha: 알파벳 |
inside: li 들여쓰기 |
none: li표식 없애기 |
*disc : 기본값 검은 원(default)
circle: 원
square: 사각형
decimal: 숫자 // (1부터 시작하는 십진수),(1,2,3,4,5)
decimal-leading-zero: 0을 포함한숫자 //(01,02,03 식으로 0이붙습니다.)
upper-roman:앞에 upper을 lower로 바꿔주면 대문자가 됩니다. //(i,ii,iii,iv,v)
lower-alpha: 앞에 lower을 upper로 바꿔주면 대문자가 됩니다. //(a,b,c,d,e)
none: li표식 표식은 없애나 표식이 들어가야할 자리는 남습니다.
initial: 기본값으로 초기화*
사용법은 CSS에 list-style 또는 list-style-type속성을 주고 사용해주면 됩니다.
※특징:
기본값(default)으로 block엘리먼트로 설정되어 있다.
목록의 구성뿐만 아니라 레이아웃의 요소로도 많이 사용되고 있습니다.
ul이나 ol의 경우 그룹핑을 해주는 태그로 li태그를 감싸며 사용되며, 순서가 있을땐 ol 따로 표시하고싶지 않을땐 ul를 사용합니다.
li의 경우 list-style-type을 이용해 1,2,3 이나 네모, 동그라미 등 앞에 붙는 도식을 변경할 수도 없앨 수도 있습니다.
가끔 list-style과 list-style-type에 관하여 물어보는 분들이 종종 계십니다.
list-style은 list-style-type의 상위 개념이며 약식화를 할때 사용됩니다. 간결한 코드를 위해 list-style이란 약축형에 모두 넣는것을 말합니다.
ex) list-style : circle inside url(' ') / list-style-type:circle; list-image:url(' ');list-style-position: inside;
이와같이 약축형은 CSS코드 간결화를 위해 많이 사용되고 있으며, list-style뿐만아니라 몇가지가 더 있습니다.
예시:
<body>
<h1>오늘의 점심</h1>
<ol>
<li>짜장면</li>
<li>짬뽕</li>
<li>탕수육</li>
</ol>
<h1>오늘의 저녁</h1>
<ul>
<li>제육복음</li>
<li>불고기덮밥</li>
<li>참치김밥</li>
</ul>
</body>
결과:
