HTML

2. 기본적인 태그 알아보기

삼색이삼랑해 2022. 8. 11. 14:33

  서식 처리용 태그

서식 처리용 태그는 프레이징 콘텐츠용으로 글자의 모양을 바꾼다.

 

1. 글자 태그

  • 제목 태그(h1 ~ h6) : 제목 요소를 작성하는 태그.
  • 본문 태그(p) : 본문 요소를 작성하는 태그. 단축 태그로 줄바꿈 기능으로만 사용이 가능하다 => <p/>

2. 서식 태그(In-line Element)

  • <b>, <i>, <strong>, <em>, <mark>, <sub>, <sup> 등
  • 그중 <strong>, <em>은 스크린 리더에서 강조 처리된다.
<!DOCTYPE html>
<html>
    <head>
        <title>글자 서식</title>
    </head>
    <body>
        <h2>다양한 글자 서식들</h2>
        <p>이 문장에서 <b>여기</b>는 굵은 글씨(볼드체)로 출력됩니다.</p>
        <p>이 문장에서 <strong>여기</strong>는 굵은 글씨(볼드체)로 출력됩니다.</p>
        <p>이 문장에서 <i>여기</i>는 이텔릭 글씨로 출력됩니다.</p>
        <p>이 문장에서 <em>여기</em>는 이텔릭 글씨로 출력됩니다.</p>
        <p>이 문장에서 <mark>여기</mark>는 마킹됩니다.</p>
        <p>이 문장에서 <del>여기</del>는 삭체 처리로 출력됩니다.</p>
        <p>이 문장에서 <ins>여기</ins>는 삽입 처리로 출력됩니다.</p>
        <p>이 문장에서 단어<sup>위첨자</sup>로 출력됩니다.</p>
        <p>이 문장에서 단어<sub>아래첨자</sub>로 출력됩니다.</p>
        <p>이 문장에서 <small>작은글씨</small>로 출력됩니다.</p>
        <hr>
        <p>Lorem ipsum dolor sit amet, <br>
            consectetur adipiscing elit. <br>
            Sed suscipit justo sed tortor ullamcorper, <br> 
            nec porta diam convallis.</p>
    </body>
</html>

 

3. 링크 태그

  • <a> 태그를 사용하며, 다른 페이지와 연결하기 위한 요소를 만든다.
  • 필수 속성 - href : 이동할 페이지를 지정하는 속성으로 해당 페이지의 url을 작성한다.
  • url의 일반적인 형식 = https://www.naver.com
  • 기타 속성 - target : 이동할 페이지를 어디에 보여줄 지 지정. 
  • target의 속성값 : _self, _blank, _parent, _top, bookmark 기능에서 이동할 화면의 위치를 지정, 변경할 iframe 지정
  • 북마크(책갈피) 기능 : 같은 페이지에서 현재 보이는 부분을 변경. id 속성을 활용한다.
<!DOCTYPE html>
<html>
    <head>
        <title>페이지 연결</title>
        <style>
            a:link { color: green; }
            a:visited { color: red; }
            a:hover { background-color: yellow; }
        </style>
    </head>
    <body>
        <h2>페이지 연결</h2>
        <a href="https://www.naver.com" target="_self">네이버</a><br>
        <a href="https://www.youtube.com/c/hahahaYouTube" target="_blank">Youtube haha ha</a><br>
        <a href="text_formatting.html">글자 형식 페이지</a><br>
        <hr>
        <h2>페이지 내 이동(북마크)</h2>
        <p>메뉴 : [ <a href="#five">5장</a> ] </p>
        <p>Lorem ipsum dolor sit amet, <br>
            consectetur adipiscing elit. <br>
            Sed suscipit justo sed tortor ullamcorper, <br> 
            nec porta diam convallis.</p>
        <h3 id="two">제2장</h3>
        <p>Lorem ipsum dolor sit amet, <br>
            consectetur adipiscing elit. <br>
            Sed suscipit justo sed tortor ullamcorper, <br> 
            nec porta diam convallis.</p>
        <h3 id="three">제3장</h3>
        <p>Lorem ipsum dolor sit amet, <br>
            consectetur adipiscing elit. <br>
            Sed suscipit justo sed tortor ullamcorper, <br> 
            nec porta diam convallis.</p>
        <h3 id="four">제4장</h3>
        <p>Lorem ipsum dolor sit amet, <br>
            consectetur adipiscing elit. <br>
            Sed suscipit justo sed tortor ullamcorper, <br> 
            nec porta diam convallis.</p>
        <h3 id="five">제5장</h3>
        <p>Lorem ipsum dolor sit amet, <br>
            consectetur adipiscing elit. <br>
            Sed suscipit justo sed tortor ullamcorper, <br> 
            nec porta diam convallis.</p>
        <!-- 맨 위로 올라감 -->
        <a href="#top">[top]</a>
    </body>
</html>

 

4. 이미지 추가 태그

  • <img> 이미지 파일을 문서에 추가하는 태그. 속성을 사용한다.
  • src : 삽입할 이미지의 경로(위치)와 파일명을 설정.
  • alt :이미지가 출력되지 않을 경우 대신 출력할 문장을 작성.
  • title : 이미지 위에 마우스가 오버될 경우 출력할 문장을 작성.
  • width ;이미지 출력 시 너비를 지정.
  • height : 이미지 출력 시 높이를 지정하는 속성.
<!DOCTYPE html>
<html>
    <head>
        <title>이미지 넣기</title>
    </head>
    <body>
        <h2 title="제목">문서에 이미지 넣기</h2>
        <img src="samsaek2.jpg" alt="삼색이"
            title="귀여운 삼색이" width="400">
    </body>
</html>

  픽셀 알고가기

픽셀이란 Pictures Element의 줄임말로 '화소'를 말한다.

화면을 구성하는 최소이며 기본 단위(px)라고 할 수 있다.

위치(x, y) 정보와 색상(RGB) 정보로 구성된다. -> bitmap(bmp)

화면의 해상도는 픽셀의 개수로 나타난다.

  편집화면과 실화면의 차이

편집화면에서 줄바꿈은 실화면에서 처리되지 않고, 다만 한 칸의 빈 공백이 들어간다.

편집화면에서 여러 칸의 빈 공백도 한 칸의 빈 공백으로 처리된다.

 

* 요소의 속성(Attribute)은 시작 태그에만 작성한다!