Front end

비주얼 디자인에서 제목(Headings), 단락(Paragraph)구조 도출하기

제목(Hedings), 단락(Paragraph) 도출하는 과정

단락(Paragraph)

  • 사용자가 가장 많이 읽는 콘텐츠는 단락으로 단락은 p요소로 구성된다.

제목의 단계(Hedings Level 1 - 6)

  • 사용자가 가장 먼저 읽은 콘텐츠는 제목으로 제목은 h요소로 구성된다.

  • h1 요소는 문서에서 단 한번만 사용하며 HTML5에서는 섹션 콘텐츠 마다 사용 가능하다.

  • HTML 제목

  • HTML 단락
  • HTML 주석
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko-KR" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>HTML 제목(Headings) 그리고 단락(Paragraph)</title>
    </head>
    <body>
    오늘의 나이, 대체로 맑음
    <h1>이제 좀 살아본 사람들의 마흔, 자기 생의 날씨를 적절히 대처하기 알맞은 나이.</h1>
    <h2>이 나이에도 여전히 미숙하고 꾸준히 실수한다.</h2>
    <img src="sbs-drama__do-you-want-to-kiss-first.png" alt="SBS 드라마 <키스 먼저 할까요?>의 한 장면: 배우 김선아가 홀로 겨울바다를 걷는 중...">
    </body>
</html>

HTML 이미지 & 피규어 & 캡션

  • HTML 문서에 연결되어 화면에 표시되는 이미지 요소와 도표, 차트, 표 이미지 등을 캡션과 함께 묶어주는 피규어 요소에 알아본다.

  • 위에서 img 요소의 alt 속성을 해두는 이유는 링크가 깨질 경우에는 화면에 alt 속성 값이 출력 되어 어떤 이미지 였는지 정보를 제공할 수 있으며, 또한 시각 장애인의 경우 이미지를 보지 못하므로 이런 대체 속성을 통해서 정보를 얻을 수 있기 때문이다.

  • 또한, HTML의 이미지 같은 경우는 서버를 통해 연결되어 있다. 즉, 한글이나 기타 문서 작업의 프로그램에서 처럼 이미지를 실제로 포함하고 있는 것(임베딩)이 아니라는 점이 크게 다른 점이라고 할 수 있다.

  • 웹 문서에 주로 사용되는 이미지 포멧은 다음과 같다.

    • 비트맵 그래픽 파일 : JPG, GIF, PNG 포멧이 사용
    • 벡터 그래픽 파일 : SVG 포멧이 사용 (위의 비트맵 그래픽 파일은 픽셀로 구성되어 있기 때문에 크기를 키울 경우 뿌옇게 흐려진다.)

JPG 이미지

JPG 이미지는 압축률이 높고, 다양한 색상을 처리하도록 설계되었으며, 그러므로 사진 또는 복잡한 그래픽(그레디언트와 같은) 이미지에 많이 사용된다. 하지만, GIF, PNG와 달리 투명한 픽셀을 허용하지 않는다.

PNG 이미지

사진의 경우 동일한 품질의 PNG 파일 크기가 일반적으로 JPG보다 크기 때문에 PNG는 사진이나 애니메이션을 제외한 모든 유형에 적합하다. 하지만 JPG와 달리 투명 처리가 가능해 아이콘, 로고, 다이어그램 등에 사용하면 좋다.

GIF 이미지

GIF는 표현 가능한 색상이 256색으로 제한되어 있기에 사진에는 적합하지 않다. 하지만, 애니메이션을 적용할 수 있는 포멧으로 단순한 그래픽의 애니메이션에 사용하면 좋다. 투명하게 처리가 가능하긴 하지만, PNG 포멧 보다 표현력이 떨어진다.

SVG 이미지

SVG는 벡터 기반 그래픽 포멧으로 품질 손실없이 확대, 축소 할 수 있다. 오늘날 처럼 다양한 스크린에 대응하는 반응형 웹 디자인에 매우 적합하다.

HTML 이미지
HTML 피규어
HTML 피규어 캡션

HTML 문법 유효성 검사 & 엔티티(Entity) 코드

HTML 문법 유효성 검사(Validator)

  • HTML 문서의 문법의 유효성 검사 방법과 각 괄호(Angle Bracket,< >) 모양의 문자를 브라우저가 태그로 인식하지 않도록 이스케이프(Escape) 처리하는 엔티티(Entity)코드에 대해서 알아본다.

  • 참고자료
    vaildator.w3.org
    entitycode.com

위에서 첫번째 사이트의 경우 HTML 문법을 검사할수 있는 온라인 서비스를 제공하고 있어서 서비스를 이용하면 좋다. 또한, 이스케이프 처리를 할려는 문자들은 두번째 사이트에서 찾아서 수정하면 된다. 위의 코드에서 이스케이프 처리를 해준다면, 다음과 같이 <> 부분이 변경된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko-KR" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>HTML 제목(Headings) 그리고 단락(Paragraph)</title>
    </head>
    <body>
    오늘의 나이, 대체로 맑음
    <h1>이제 좀 살아본 사람들의 마흔, 자기 생의 날씨를 적절히 대처하기 알맞은 나이.</h1>
    <h2>이 나이에도 여전히 미숙하고 꾸준히 실수한다.</h2>
    <img src="sbs-drama__do-you-want-to-kiss-first.png" alt="SBS 드라마 &lt키스 먼저 할까요?&gt의 한 장면: 배우 김선아가 홀로 겨울바다를 걷는 중...">
    </body>
</html>

HTML 목록 디자인

HTML 문서 작성 시, 목록은 매우 빈번하게 사용 되는 요소이다.

  • 비순차 목록(Unorderd List) : 순서가 없는 목록
  • 순차 목록(Ordered List) : 순서가 중요한 목록

여기서 가장 중요한 것은 ol이나 ul요소의 자식은 꼭 li요소로 감싸고 시작해야한다는 점이다!!!

참고 자료



    1. 현재 페이지에서 다른 페이지로 이동하게 해주는 것을 하이퍼링크라고 한다. 이렇게 하이퍼 링크를 할때 사용하는 요소는 앵커요소이며, 다음과 같다.

      앵커(Anchor) : 페이지를 다른 페이지로 전환하지 않고, 현재 페이지 하단으로 이동할 때 사용한다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <!DOCTYPE html>
      <html lang="en" dir="ltr">
          <head>
              <meta charset="utf-8">
              <title></title>
          </head>
          <body>
              <h2>목차(Table of Contents)</h2>
              <!-- Depth 1: ul -->
              <ul>
                  <li><a href="#intro">소개</a></li>
                  <!-- Depth 2: ul -->
                      <ul>
                          <li><a href="">영상소개</a></li>
                          <li><a href="">어렵진 않을까 걱정되시나요>?</a></li>
                          <li><a href="">GSAP에 대해 간략하게 정리해볼까요?</a></li>
                          <li><a href="">TweenLite</a></li>
                      </ul>
                  <li><a href="">다운로드 &amp; CDN</a></li>
              </ul>

              <h3 id="intro">소개</h3>
          </body>
      </html>

      예를들어, 위의 코드에서는 앵커를 사용하여 소개를 누르게 되면, 주소가 file:///Users/heungbaelee/workspace/myBlog/source/_posts/day.html에서 file:///Users/heungbaelee/workspace/myBlog/source/_posts/day.html#intro로 바뀌게 되는 것을 확인 할 수 있다.

      참고자료
      하이퍼링 요소

      웹사이트는 폴더로 구성된 HTML 파일의 모음일 뿐이다. 다른 파일 내부에서 이들 파일을 참조하기 위해 인터넷은 URL(uniform resource locators)를 사용한다.

      URL은 웹 사이트의 리소스 위치 경로를 말하며 다음과 같이 구성된다.

      예를들어 다음과 같은 주소가 있을때, https://Developer.mozila.org/EN-US/DOCS/WEB/HTML 에서

      • https:// : SCHEME
      • Developer.mozila.org : DOMAIN
      • /EN-US/DOCS/WEB/HTML : PATH

      웹 문서에 URL을 입력하는 방법은 3가지 정도가 있다.

      • 절대 경로 : 현재 HTML 문서와 상관없이 URL 주소를 사용해 리소스를 찾는
      • 상대 경로 : 현재 HTML 문서에서 상대적인 위치를 설정하는 것을 말한다. ex) “../mics/extra.html”과 같이 사용한다.
      • 루트 상대경로 : 현재 HTML 문서가 존재하는 영역의 최상위 루트 경로에서 대상을 찾는 것 ex)”/images.html”
      Share