기본적인 html구조를 잘짜야 나중에 css(스타일시트)를 잘 쓸수있는건 말할것도 없다.
플래시를 보기위해선 플래시 플레이어를 설치해서 해석하게 해야하지만,
html은 해석기가 브라우저에 붙어있어 바로 볼 수 있다고 생각하면 된다.
게다가 브라우저가 위에서부터 순차적으로 읽으며 웹에 노출되기 떄문에
일단 html을 작업한 후 자바스크립트 같은걸 나중에 붙여 넣어야 브라우저 로딩속도를 빠르게 띄울 수 있다.
그럼 가장 많이 사용되는 기본 html태그를 알아보자.
일단 태그는 한줄을 전부 꽉차게 차지하는 블럭(block)요소와
한줄의 일부로 들어갈 수 있는 인라인(in-line)요소로 구분된다.
이는 매우 중요한 개념으로 확실히 알아야 한다.
(타이틀을 제외하면 모든 태그는 <body>와 </body>사이에 들어간다.)
<블럭요소인 태그>
1. 크기별 머릿말 타이틀
<h1>~<h6>
h1에서 h6까지 크기별로 글자를 나타나게 한다.
h1이 가장 크다면 h6이 가장 작은데 사실 텍스트의 크기를 지정할때
스타일로 폰트크기를 직접 지정 하기때문에 이걸 알고도 쓸 일이 있나 싶었다.
하지만 '시멘틱웹'이란건 모든일에 컴퓨터가 인식할 수 있도록 최대한 용도에 맞게 써 주는거...라고 생각된다.
(하물며 이름조차도 마구잡이로 짓기보다는 나름의 의미를 부여해서 짓는다.)
때문에 모든걸 죄다 div로 감싸거나 p태그를 사용할수도 있지만
결과물은 똑같을지라도 그런 코딩보다는 최소한 타이틀 정도는 <h>태그를 써주는게 좋은 코딩이라 한다.
특히나 처음 배우는 입장에서는 정석대로 코딩하는 습관을 기르도록 하자.
왼쪽처럼 에디트플러스에 입력 후 파이어폭스에서 열어보면 오른쪽과 같이 웹에 출력되는걸 볼 수 있다.
2. 줄 바꾸기
<br>
html에서는 <body></body>사이에 문장을 써넣고 줄 바꿈을 하더라도 웹에서는 아래와같이 모두 한 줄로 인식되어버린다. (스페이스를 한번치든 백번치든 엔터를 치든 띄어지는 칸은 단 한칸뿐이다.)
이때 필요한 부분에 <br>태그를 넣어 다음줄로 넘길수가 있다.
3. 문단의 구분
<p></p>
텍스트의 문단을 나누어쓸땐 <p>태그를 최대한 활용하자.
물론 위에서 언급한 바와 같이 <div>로 처리해도 같은결과가 나오지만
시멘틱한 코딩을 위해 <p>로 써주는게 좋다.
물론 <p>를 사용했을때 자동으로 문단간격이 생겨버리는데
이건 나중에 스타일로 리셋하여 사용할수 있으므로 개의치 말자.
4-1. 순서가 없는 목록
<ul>
<li></li>
</ul>
아래와 같이 순서가 없는 목록들의 리스트를 나열할때 쓰인다.
이때 디자이너로서 상당히 거슬리는 촌스러운 점이 찍히는데 이 역시 나중에 스타일로 해결할 수 있으니
크게 개의치 말자.
그냥 순서가 없는 목록 리스트를 작성할때 <ul>태그를 사용한다는 것만 알아두자.
4-2. 순서가 있는 목록
<ol>
<li></li>
</ol>
아래와 같이 순번이 매겨질 필요가 있는 목록을 작성시 <ol>태그가 사용된다.
네이버의 실시간 랭킹같은것이 이에 해당된다.
5. dt에 대한 설명 dd
<dl>
<dt></dt>
<dd></dd>
</dl>
dt에 대한 설명을 dd로 한다.
dt와 dd 사이에는 아무것도 들어올수 없으며 위 4~5번 <ul>, <ol>, <dl>안에는 항상 정해진 태그만이 와야한다.
아래와 같이 <dd>가 안쪾으로 들여써진다.
6. 모양의 의미없는 분리(구획을 나눌 때)
<div></div>
아마 웹표준 코딩을 할 때 가장 많이 사용되지 않을까 싶은데
<div>태그는 모양을 분리하고 나누어 그 사이를 꾸밀때 사용된다.
<div>를 사용하면 아래와 같이 나누어지는데 사실 텍스트에 쓰이는 <p>라는 태그가 따로있는데
굳이 <div>를 사용하는건 별로 바람직하지 않다.
물론 그렇게 코딩을 해놓아도 '틀리다'라고 꼬집어 말할 수는 없지만
시멘틱한 코딩을 위해 모든 태그를 적재적소에 사용하는 습관을 들이자.
7. 인용구 마크업 /들여쓰기
<blockquote></blockquote>
<blockquote>는 문장의 들여쓰기가 되며 <p>와 함께 사용 가능하다.
많이 사용되진 않지만 대표인사 인사말 정도에 사용될 수 있겠다.
<인라인요소인 태그>
1.이미지태그
<img src="이미지경로" alt="이미지설명"/>
아래와 같이 이미지를 불러오는 역할을 하는데 html파일이 저장된 경로에
images라는 폴더가 있고 그 안에 flower.jpg라는 이미지 파일이 있을때
"images/flower.jpg"라는 경로를 적어주면 이미지가 웹에 보여진다.
alt는 그 이미지에 대한 설명을 적어주면 되는데 웹에서는 보여지지 않는다.
여기서 태그의 구조를 보면,
<img src="" alt=""/>
태그이름(img), 속성(src/alt), 값("사이글")
이렇게 3가지로 구분된다.
'img'는 수많은 속성을 가지고 있지만 그 중 실제적으로 사용되는건 몇 개 안되니 굳이 다 알 필요는 없다.
나중에 심층적으로 공부할때나 보면 되겠다.
만일 <h1>이면 이건 태그이름만 있고 속성과 값이 없는 태그인거다.
이 때,
<h1>은 '태그'라 불리지만
<h1>안녕하세요</h1> 이 한줄을 지칭할때는 'h1요소' 또는 'h1엘리먼트'라고 부른다.
2. 인라인안에서 의미없이 묶을때
<span></span>
칸을 다 차지하는 블럭요소로 <div>가 있다면 한 줄의 일부로 들어갈 수 있는 <span>이 있다고 보면된다.
그냥 span만 쓴다면 아무 변화가 없지만 나중에 css와 함께 사용하여 문장의 일부분을 꾸미거나 할때 사용된다.
3. 링크 시킬때
<a href="#"></a>
#안에 링크되는 주소를 써 넣으면 된다.
<a>태그에 "href"라는 속성을 가지고 있는 구조이다.
아래와 같이 했을 때 언제라도라는 글씨를 클릭하면 다음사이트로 링크가 넘어간다.
3. 문장의 강조표현
<strong></strong>
"언제라도"라는 글씨가 굵어졌다.
4. 이태릭체
<em>
"언제라도"라는 글씨가 기울어졌다.
코딩은 항상 눈으로만 익히는 것보다
내가 직접 타이핑해가며 결과물을 확인하는게 중요하다는걸 잊지말자~!
그럼 브라우저에서 아래와같이 출력되도록 위의 태그들을 이용해서 코딩해보자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"/>
<title>이력서</title>
</head>
<body>
<h1>이력서</h1>
<img src="images/picture.jpg" alt="이력서사진"/>
<dl>
<dt>이름:</dt><dd>홍길동</dd>
<dt>주소:</dt><dd>서울 송파구 방이동</dd>
<dt>이메일:</dt><dd>qwer1111@naver.com</dd>
</dl>
<h4>경력</h4>
<ul>
<li>2008년 3월-이모회사</li>
<li>2009년 4월-저모회사</li>
<li>2010년 5월-이런저런회사</li>
</ul>
<h4>학력</h4>
<ul>
<li>2000년 3월-모모고등학교졸업</li>
<li>2004년 5월-땡땡대학교졸업</li>
</ul>
<h4>가장좋아하는 일은</h4>
<ol>
<li>소설책읽기</li>
<li>영화감상</li>
</ol>
</body>
'말랑말랑 컴퓨터 > 웹표준코딩 html&css' 카테고리의 다른 글
| [웹표준코딩] 플롯의 초기화 clear:both;와 홈페이지 기본 레이아웃 by S (10) | 2013.07.18 |
|---|---|
| [웹표준코딩] 플롯클리어 방법 by S (8) | 2013.07.07 |
| [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해② by S (3) | 2013.06.22 |
| [웹표준코딩 가로배치의 핵심] 떠서 이동하는 float의 이해① by S (10) | 2013.06.20 |
| 블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box) by S (4) | 2013.06.14 |
| 박스모델의 연습과 멀티클래스 네임, 가상클래스 네임 by S (2) | 2013.05.24 |
| 박스모델의 이해와 리셋(reset) css by S (8) | 2013.05.14 |
| css 구조와 사용 방법 및 스타일시트 속성 by S (6) | 2013.05.13 |
| 웹표준 코딩(HTML+CSS) 배우기위한 준비 by S (7) | 2013.05.02 |
| 웹표준 코딩을 배우기 시작하다 by S (12) | 2013.04.26 |
