[HTML] HTML 제목, 단락, 이미지

웹/HTML|2018. 7. 23. 22:20

HTML 제목, 단락, 이미지

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <title>HTML 제목, 단락, 이미지</title>
</head>
<body>
    <h1>제목, 단락, 이미지</h1>

    <h2>제목</h2>
    <p>
        제목의 경우 h1 ~ h6 로 총 6단계가 있습니다.<br>
        보통 h1의 경우 문서에서 가장 큰 제목으로 1번만 사용되는 경우가 많이 있습니다.<br>
        그러나 꼭 1번만 사용되라는 것은 아닙니다.<br>
    </p>

    <h2>단락</h2>
    <p>
        단락의 경우 p 태그를 사용합니다. 단락은 말 그대로 사용자들이 보기 쉽도록 하는 것입니다.<br>
        보통 3-5줄 정도가 1개의 단락으로 사용하고 있습니다.
    </p>

    <h3>이미지</h3>
    <p>
        이미지의 경우 img 태그를 사용합니다.
    </p>
    <figure>
        <img 
        src="https://ncc-phinf.pstatic.net/20141022_178/1413936226036VMWBA_JPEG/1.jpg?type=w646" 
        alt="태극기"
        width="600"
        height="400">
        <figcaption>이미지 출처 : https://terms.naver.com/entry.nhn?docId=3571098&cid=58840&categoryId=58856</figcaption>
    </figure>
</body>
</html>

  1. 제목
    해당 글의 제목을 말한다. h1 ~ h6 까지 6단계로 사용할 수 있다.

  2. 단락 단락의 경우 p 태그를 사용하여 작성한다. 사용자들이 보기 쉽도록 글의 단락을 만들어준다.

  3. 이미지 이미지의 경우 img 태그를 사용한다.

    <img src="" alt="">
    source -> src : 해당 이미지의 위치
    alternative text -> alt : 대체 텍스트
    width, height : 이미지의 너비, 높이

alt 속성의 경우는 시각 장애인들에게 해당 이미지가 무엇인지 가르쳐주는 방법으로도 사용되니 매우 중요하다고
볼 수 있습니다. 이 뿐만이 아니라 해당 이미지 주소가 잘못 되어있거나 이미지에 문제가 생겨 정상적으로 출력이 되지
않아도 alt 속성의 내용을 보고 어떠한 이미지였는지 유추할 수 있습니다.

  1. figure, figcaption figure : 도표, 차트, 이미지 등을 감쌀 때 사용
    figure caption -> figcaption : figure의 caption (여기서는 이미지 출저로 사용)

다음 시간

HTML 순차, 비순차 목록

'웹 > HTML' 카테고리의 다른 글

[HTML] Anchor, Hyperlink  (0) 2018.07.24
[HTML] HTML 순차, 비순차 목록  (0) 2018.07.23
[HTML] HTML 기본 문법  (0) 2018.07.23
[HTML] HTML 유용한 사이트  (0) 2018.07.23
[HTML] HTML 이란?  (0) 2018.07.23

댓글()

티스토리툴바