Kudos
Collect
Twiiter
Facebook
Share

[HTML 스타터] 콘텐츠 입력하기 II

마지막 업데이트 2년 전
1 0 0 0
이 글은 시리즈 ‘HTML 스타터’ 의 4 번째 포스팅입니다. 시리즈 더보기

HTML스타터 여러분, 안녕하세요? 저와 함께 HTML 베이비 스텝을 밟고있는 여러분을 응원합니다! 👶🏻💪🏻 어제는 실제 콘텐츠를 넣기전 사전작업을 완성했죠. div를 이용해서 콘텐츠의 구역을 나누는 작업을 했습니다. 콘텐츠의 전체 구조를 쉽게말해 신문기사라고 상상하며 만들어 봤습니다.

오늘도 피터와 함께 태그 몇가지를 이용해서 HMTL의 콘텐츠 입력을 배워볼게요! 👩🏻‍💻

1. 헤드라인: 콘텐츠 메인 제목

지난 연재에서 콘텐츠 구조를 다음의 영역으로 나누었습니다:

  1. 콘텐츠 제목
  2. 콘텐츠 부제목
  3. 이미지
  4. 메인 콘텐츠

오늘은 콘텐츠 제목과 부제목 넣는 방법에 대해 알아보겠습니다. 먼저 콘텐츠의 헤드라인! 메인 제목은 h1태그를 이용합니다. h는 heading의 역확을 담당하는 테그인데요, h1부터 h6까지 사용할 수 있어요. 낮은 숫자부터 메인 제목을 의미하고 숫자가 높을수록 부제목 격의 역활을 담당합니다. 글씨 크기도 숫자에 비례하는데요, h1은 메인 제목이니깐 물론 크게 표현되겠죠! html에서 h1부터 h6까지 어떻게 표현되는지 볼까요?

h1부터 h6까지
h1부터 h6까지

그럼 어제 지정해 놓은 main-title이라는 구역에 h1을 입력해 보겠습니다.

<html>
    <body>
        <div class="main-title">
            <h1>HTML 스타터를 위한 가이드!</h1>        
        </div>

        <div class="sub-title">

        </div>

        <div class="main-picture">

        </div>

        <div class="main-contents">

        </div>    
    </body>
</html>

어제도 이야기했지만 태그는 항상 시작태그종료태그를 붙여야 합니다! 🙋🏻‍♀️ 잊어버리면 앙대욧!🙅🏻‍♂️
그럼 위 h1태그를 통해 입력한 제목이 실제로 어떻게 보여지는지 볼까요?

실제 브라우저에서 h1 보기
실제 브라우저에서 본 h1

2. 썹타이틀(sub-title) : 부제목은 h2!

메인 타이틀을 완성했으니 이제 부제목을 붙여볼까요?
부제목은 h2 태그를 이용합니다. 메인 제목보다 글씨 크기가 작게 나오겠죠?

<html>
    <body>
        <div class="main-title">
            <h1>HTML 스타터를 위한 가이드!</h1>        
        </div>

        <div class="sub-title">
            <h2>컴알못도 할수있다! HTML 베이비들을 위한 안내서</h2>
        </div>

        <div class="main-picture">

        </div>

        <div class="main-contents">

        </div>    
    </body>
</html>

위에 h2로 부제목을 입력했습니다. 브라우저에서 한번 확인해 볼까요?

실제 브라우저에서 본 h2
실제 브라우저에서 본 h2

다음 연재에서는 본격적인 콘텐츠를 입력하고 이미지도 넣는 방법에 대해 알아보겠습니다!

여러분도 직접 한번 만들어 보면서 연습해 보세요! 🙋🏻‍♂️

Hi, it's Alexis here! I recently began studying coding (basically HTML) and thought I can share some of infos (that I've been learning so far) with some of you who just stepped into this world. I will be posting the basics of HTML and others including stuff like "Mac How to..."

연재
HTML 을 처음 접하는 분을 위하여 최대한 알기 쉽게 설명하려고 노력하였습니다. HTML 을 공부해야 하는데 알기쉬운 설명의 교재를 찾지 못한 분들에게 도움이 되면 좋겠습니다.
Essedrop - 이미지 주소를 만드는 가장 빠른 방법
 

독자 의견

저자 @alexis 에게 의견 남기기:

Please sign in to comment.
Markdown is also available in comment.