기본적인 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>

 

 

 

 

 
 
 
 

 

 

Posted by 두여자 Y&S
TAG    

댓글을 달아 주세요

  1. 비밀댓글입니다

    2013.07.26 11:14 [ ADDR : EDIT/ DEL : REPLY ]
    • 그러네요~ 실습에서 오타가 났군요 ㅋ

      드림위버에선 테두리가 생긴다구요?
      아..링크를 사용하셨나 보네요
      이미지에 링크걸때 테두리 생기는건 개발자가 해놓은 기본 속성입니다.

      그래서 보통 리셋css를 처음에 넣어서 속성의 디폴트값을 전부 없애줍니다. 이미지에 기본으로 생기는 테두리도 이 리셋을 사용해서 보더값0으로 처음에 없애고 시작하거든요.
      이건 한번만 하면 되니까요.

      http://yslife.tistory.com/402
      위 글을 보시면 좀 더 이해가 수월하실겁니다.

      웹표준이라고 드림위버랑 따로 생각하지마시고 그냥 html과 css를 가장 효율적이고 규정에 맞게 사용하는 코딩이라고 생각하시면 됩니다.
      에디트플러스가 아닌 드림위버로 코딩하셔도 전혀 상관없구요~

      단지 드림위버에선 보통 테이블을 사용하여 레이아웃을 배치하고 하는데 원래 테이블은 표를 짜기 위해 만들어놓은 속성이거든요.
      그런것들을 기존 원래의 목적에 맞게 사용하는게 웹표준이라고 생각하시면 됩니다.
      웹표준에서도 표를 짤때는 테이블 사용한답니다.^^

      2013.07.26 14:32 신고 [ ADDR : EDIT/ DEL ]
  2. 보면서 연습하겠습니다.

    2013.08.22 13:39 [ ADDR : EDIT/ DEL : REPLY ]
  3. ㅇㅎ

    이미지 태그할때 html파일이 저장된 경로에 image란폴더 ….... 이부분이 이해가 가지 않네요.
    설명해주실수 있나요?

    2013.09.11 21:50 [ ADDR : EDIT/ DEL : REPLY ]
    • 이미지 경로 지정하는부분이 이해가 안간다는 말씀이시죠?
      음...간단한건데 보여드리지않고 말로만 설명하려니 어렵네요.
      그러니까 만약 내가 제작하려는 사이트를 폴더하나 만들어서 '홈페이지'라고 이름붙이고
      '홈페이지'라는 폴더안에 html페이지들과 이미지들을 넣겠죠?
      그렇지만 수많은 이미지들이 html페이지들과 섞여있으면 불편하니까 '홈페이지'폴더안에 'images'라는 이름의 폴더하나를 더 만들어서 보통은 모든 이미지들을 이안에 넣어둡니다.
      (폴더 이름은 꼭 images라고 하지 않아도 되지만 영어나 숫자만으로 지정해야 합니다.)

      이때 이미지 경로를 잘 잡아주셔야 이미지가 엑박처리되지 않는데
      폴더가 안으로 들어가면 계속 슬러시/ 를 넣어줘야합니다.
      그러니까 images/flower.jpg 라고 한다면 images라는 이름의 폴더안에 flower.jpg라는 이미지 파일이 있다는 겁니다.

      만약 이미지폴더 이름을 images라고 지정하지 않고 예를들어 'main'이라고 만들었다면 꽃의 이미지경로는 main/flower.jpg 가 되겠죠?
      한발 더 나아가 images라는 폴더안에 main이라는 폴더하나를 더 생성해서 그 안에 이미지를 넣어뒀다면
      이미지 경로는 images/main/flower.jpg 라고 넣어주시면 되는겁니다.

      2013.09.11 22:21 신고 [ ADDR : EDIT/ DEL ]
  4. 김영관

    초짜라서 잘 이해는 안되지만 반복해서 따라 해보고 있는 중 입니다.
    하다보면 이해가 되겠지요^^
    자주 들려 공부하겠습니다.

    2014.10.17 17:09 [ ADDR : EDIT/ DEL : REPLY ]
  5. Kim

    4번에 이탤릭체 em이 strong으로 바뀌어 잇어용^^

    2015.05.26 13:53 [ ADDR : EDIT/ DEL : REPLY ]
  6. 용이s

    안녕하세요.시멘틱마크업을 하고있는 학생입니다. h1태그다음에 h4로 바로 넘어가는데요 이것은 틀린 구조라고 알고있어요 h1에서는 바로 그아래 단계로 가야해서 h2가 맞는거같습니다.

    2016.11.11 11:02 [ ADDR : EDIT/ DEL : REPLY ]
    • 음...이력서 코딩한거 말씀하신거죠? 음..잘 이해가 안되는데 h태그 자체가 글자크기를 표현한건데 과연 그렇게 순서대로 글자크기를 맞춰서 디자인할까 싶네요. 그게 정석이라해도 좀 현실성이 떨어지지 않을까요? 작은글씨 쓴 다음에 큰클씨 쓸수도 있는건데...암튼 제 개인적인 생각입니다^^

      2017.03.24 17:31 신고 [ ADDR : EDIT/ DEL ]