HTML 배우기

텍스트

웹 페이지에 내용이 있으려면 글을 얼마만큼 잘 쓰는가도 중요하지만 이 글들을 전체적인 디자인에 맞춰서 크기나 색깔, 폰트 등을 잘 조절하여 넣는 것이 중요합니다. 이번 단계에서는 HTML의 기초가 되는 텍스트 태그 사용법에 대하여 알아보겠습니다.

[중요!] HTML 태그들은 대소문자를 구분하지 않습니다.

도움말
웹에서 사용되는 색상들을 잘 표현하기 위해서는 RGB 코드를 사용하면 됩니다.
그러나 이 코드들은 인간이 색을 지칭할 때 사용되는 단어가 아니기 때문에 원하는 색상을 얻기란 참 힘이 듭니다.
이런 문제를 쉽게 해결할 수 있도록 RGB 코드 찾기를 제공하고 있습니다.

• 일반 글씨
  일반적인 글씨는 그냥 쓰기만 하면 나오게 됩니다. ^^
  
  
• 한 칸 내리기 (개행하기) - <BR> 태그
  글을 쓰다 보면 엔터를 입력하여 한 칸 아래에 글을 써야 할 필요가 있습니다.
  일반 메모장의 경우 그냥 엔터를 치고 입력하면 되지만 HTML은 '여기가 개행 부분이다' 라는 걸 지정해줘야 합니다.
  
  안녕하세요.
  Habit Story입니다.
  
  위의 HTML을 웹 브라우저로 보면  결과물
  
  안녕하세요. Habit Story입니다.
  
  라고 표시되지만 여기에 <BR> 태그를 사용하면 원하는 개행을 표시할 수 있습니다.
  
  위의 HTML을 웹 브라우저로 보면
  입력
  안녕하세요.<BR>Habit Story입니다.
  
  아래와같이 잘 표기가 됩니다.
  안녕하세요.
  Habit Story입니다.
  

 

• 띄어쓰기 - &nbsp;
  HTML 웹 페이지를 만들다가 보면 가끔 2칸을 띄운다거나 그 이상의 칸을 띄워야 할 때가 있습니다. 그냥 스페이스바를 눌러서 칸을 늘린다고 해서 HTML은 띄어쓰기가 2칸 이상 되지 않기 때문에   로 띄어쓰기를 지정해줘야만 합니다.
  
  안녕하세요.                Habit Story입니다.
  
  위의 내용을 웹 브라우저로 표시하면
  
  안녕하세요. Habit Story입니다.
  
  
  이렇게 한 칸만 띄어쓰기가 되지만
  
  안녕하세요.&nbsp; &nbsp; &nbsp; &nbsp;Habit Story입니다.
  
  라고 쓰게 되면
  
  안녕하세요                  Habit Story입니다.
  라고 잘 표시되게 됩니다.
  
• 글씨를 굵게 - <B>
  <B> 태그는 bold를 나타내며 반드시 굵은 글씨가 끝나는 부분에 </B> 태그로 끝을 내줘야만 합니다.
  HTML :
  안녕하세요.<B> Habit Story</B>입니다.
  
  결과 :
  안녕하세요. Habit Story입니다.
  

• 폰트 조절 - <FONT>
  다양한 폰트 옵션을 주어서 글씨의 크기 혹은 색상, 유형을 바꿀 수 있습니다.
  
  HTML :
  안녕하세요. <FONT SIZE=4 COLOR=BROWN FACE=TAHOMA> Habit Story</FONT>입니다.
  
• 결과 :
  안녕하세요. Habit Story입니다.
  
  
  FONT 태그는 태그 내에 다양한 옵션들을 주게 되는데 각 옵션에 대하여 살펴보겠습니다.
  
  SIZE : 사이즈를 나타내게 됩니다. 큰 숫자가 될수록 더 커지게 됩니다.
  COLOR : 색상을 나타내는데 보통 영어 단어로써 색상을 표현할 수 있으며 아주 세밀한 부분까지 조절하려면 RGB 색상으로 조절하면 됩니다.(예 : #9999FF)
  FACE : 글꼴을 나타냅니다. 한글은 '굴림'이 주로 사용됩니다.
  
  
• 이미지
  
  아무리 잡지의 내용이 정말 최신이고 획기적인 내용이라도 관련 사진이나 눈으로 보여주는 자료가 빠진다면 제대로 독자들에게 정보 전달이 되지 않습니다. 이것처럼 HTML 웹 페이지 역시 글씨만으로 이뤄진 사이트 보다는 그림이 적절하게 들어가는 것이 훨씬 보기도 좋고 정보 전달성이 높아집니다.
  
  
  • 이미지 태그 사용법
    
    이미지를 웹 페이지에 넣는 것은 생각보다 간단합니다.
    HTML : <IMG SRC="이미지 경로">
    
    위와 같은 방식으로 이미지를 지정해주면 됩니다.
    
    예를 들어서 링크프라이스 로고를 넣고 싶다면
  • HTML
    <IMG SRC="http://www.linkprice.com/images/article/tech/html_logo.gif">
    

  결과

             이렇게 해주시면 됩니다.
  
  이미지를 그냥 넣는 것도 중요하지만 크기를 조절할 수도 있습니다.
  (가로 세로 중 어느 하나만 조절하면 원본 이미지 크기 비율에 맞춰서 늘어나게 됩니다.)
  

   

• 그림 크기 조절하기
  
  HTML

• <IMG SRC="http://www.linkprice.com/images/article/tech/html_logo.gif" HEIGHT=80 WIDTH=230>
  

  결과

  
  

   

  • 이미지 종류 (Format)>
    인터넷에서 사용되는 이미지 유형들 마다 각자가 가지고 있는 고유한 기능이 있어서 용도에 맞춰서 다양하게 사용되고 있습니다. 한번 살펴보겠습니다.
    
    압축률이란? : 웹 상의 이미지들은 용량이 적을 수록 보는 사람에게 빠르게 전달됩니다. 즉, 웹 페이지가 빨리 뜨게 된다는 의미입니다. 그렇다고 무조건 용량을 줄이면 만사가 해결되는 것이 아니라 유형에 맞게끔 선택적으로 이미지 포멧을 선택해서 조절하는 것이 바람직합니다.
    
    1. JPG :
    (Joint Photographic Experts Group)
    JPEG이라고도 불리는 이 이미지 종류는 영상압축을 연구하는 단체의 이름을 따 만들어졌습니다.
    인터넷 상에서 가장 많이 사용되는 이미지 형식으로써 자연 사진, 인물 사진 들과 같이 색상 표현과 구조가 복잡하며 많은 이미지에 어울립니다.
    
    

    최고압축(1.2KB)	고압축(2.3KB)	보통압축(3.4KB)	최소압축(16.4KB)

    압축률 부분에서는 거의 최고의 압축률을 자랑하지만 원본 이미지 화질의 손상을 주면서 압축을 하기 때문에 적절히 조절하여 사용하는 것이 바람직합니다.
    
    2. GIF :
    (Graphic Interchange Format)
    미국의 컴퓨서브라는 PC통신 업체에서 개발한 방식으로써 특허권 때문에 말이 많았으나 작년에 특허권이 종료되어 현재는 자유롭게 사용이 가능한 형식입니다. 일반적으로 색상이 많이 들어가지 않은 도형, 만화, 아이콘, 윈도우 화면 캡쳐 등에 사용되며 웹 디자인에 있어서 가장 기본이 된다고 할 수 있습니다.
    

    16컬러 GIF(4.7KB)	256컬러 GIF(12.3KB)
    보통압축 JPG(6.5KB)	256컬러 GIF(3.4KB)

    
    압축률 부분에서는 256색상 이하의 단순 구조의 이미지에서는 뛰어난 압축률을 자랑하지만 인물 사진과 같은 다양한 색상이 들어가는 이미지는 색상 부족으로 화면이 깨짐과 동시에 JPG에 비해 용량이 더 나가기도 합니다.
    
       
    또한 GIF는 하나의 화상으로만 머물러 있지 않고 이미지들이 자동으로 바뀌도록 만들 수 있는 애니메이션 GIF 기능을 제공하기 때문에 베너 광고 용도로써도 많이 사용됩니다.
    

링크

하이퍼링크(HyperLink)라고 불리는 이 기능은 인터넷에서 가장 중요한 기능 중의 하나로써 실제로 이 기능 덕분에 인터넷이 탄생했다고 해도 과언이 아닐 정도로 중요한 기능입니다.
보통 인터넷을 서핑 할 때 링크들을 클릭함으로 인하여 페이지를 이동한다거나 다른 사이트로 이동한다 하는 기능을 우리는 차이점을 느끼지 못하고 있지만 원하는 정보를 찾아가는데 가장 빠르고 쉽게 접근할 수 있는 방법이라는 점에서 매우 중요한 의미를 갖고 있습니다.

링크의 대상은 여러 가지가 될 수 있다.

링크를 적용시킬 때 '링크를 건다'는 표현을 하는데 이 링크를 걸게 되는 대상은 크게 2가지 종류가 있습니다. 하나는 텍스트에 링크를 거는 것과 다른 하나는 이미지에 링크를 거는 것입니다. 둘 다 HTML은 모두 <A 태그를 사용하지만 대상에 따라 눈에 보이는 차이가 큽니다.

1. 텍스트에 링크 걸기
   말 그대로 HTML 웹 페이지에 나타난 글자에 링크를 거는 것으로써 링크의 기본이자 가장 많이 사용되는 기능입니다.
   
   HTML : 안녕하세요. <A HREF="http://folds.tistory.com">Habit  Story</A>입니다.
   결과 : 안녕하세요. Habit  Story입니다.
   
   위의 HTML을 보면 Habit  Story라는 단어 부분에만 링크를 걸어놓은 것을 볼 수 있습니다.
   링크를 걸기 위해서는 <A HREF= 형식으로 링크가 시작된다는 것을 알려줘야 하며 링크가 끝나는 부분에 이르러 </A> 라고 닫아줘야 합니다.
   
   텍스트 링크는 보통 파란색에 밑줄이 그어진 상태로 나타나는데 이를 좀 더 바꿔줄 수도 있습니다.
   
   HTML : 안녕하세요. <A HREF="http://www.linkprice.com"><B>Habit</B><FONT COLOR=RED>S<I>to</I>ry</FONT></A>입니다.
   결과 : 안녕하세요. HabitStory입니다.
   
   <I>태그는 이탤릭으로 글씨를 약간 오른쪽으로 기울게 만들어줍니다.
   
   
2. 이미지에 링크 걸기
   웹 페이지에 작은 사진을 올려놓고 그 사진을 클릭하면 좀 더 큰 사진이 나타나게 하려면 이미지 링크 방식을 사용하면 됩니다. 텍스트 링크는 <A HREF 태그 사이에 글자를 두었지만 이미지는 <A HREF 태그 사이에 이미지를 두면 됩니다.
   
   HTML : <A HREF="http://www.linkprice.com"><IMG SRC="http://www.linkprice.com/images/article/tech/html_logo.gif"></A>
   결과 :
   
   그런데 위의 결과를 자세히 보면 원래 그림은 테두리 부분이 파란색으로 표시되지 않는데 링크를 걸기만 하면 테두리가 나타나게 됩니다. 보기에도 좋지 않고 디자인도 많이 흐트러뜨리는 파란 테두리가 안 나오게 하려면 아래와 같이 BORDER 옵션을 넣어주면 됩니다.
   
   HTML : <A HREF="http://www.linkprice.com"><IMG SRC="http://www.linkprice.com/images/article/tech/html_logo.gif" BORDER="0"></A>
   결과 :
   
   이제 이미지 링크가 테두리 없이 깔끔하게 걸린 것을 확인할 수 있습니다.
   
   

새 창으로 링크 열기
링크를 어느 항목에 거는 것 외에도 링크를 어떻게 열 것인가에 대한 해결책도 있어야 합니다. 예를 들어서 한 사이트에서 열심히 내용을 보다가 링크를 클릭했는데 다른 사이트로 넘어가버리면 다시 예전 정보를 보기 위해서 '뒤로'를 눌러야 하는 불편함이 있습니다. 이를 해결하기 위해서 링크를 클릭하면 새 창으로 해당 링크가 열리게 하여 두 사이트를 번갈아 가며 볼 수 있게 할 수 있습니다.


HTML : <A HREF="http://www.linkprice.com" TARGET="_BLANK"><IMG SRC="http://www.linkprice.com/images/article/tech/html_logo.gif" BORDER="0"></A>
결과 :

위의 HTML 부분을 보면 <A HREF 태그 부분에 예전과는 다르게 TARGET 옵션이 들어간 것을 확인할 수 있습니다. 이 옵션은 링크가 어떻게 열릴 것인지를 지정하게 되는데 TARGET 옵션 자체가 없다면 현재 웹 브라우저 창에서 그대로 열리게 되며 위와 같이 _BLANK 옵션을 주게 되면 새 창으로 열리게 됩니다.