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

HTML

Last updated over 4 years ago

This is 3rd article of series “HTML 스타터”. Series Index

HTML스타터 여러분, 안녕하세요? 지난 연재에서 html 태그 사용법과 사용법에 대한 예시로 안녕하세요? 콘텐츠를 입력해 브라우저에 표기되는것 까지 살펴보았습니다.
오늘은 콘텐츠의 구역을 지정한 후 태그를 이용하여 실제 적용한 다음 태그의 이름을 붙여보도록 하겠습니다. 😃🐵

1. 상상속 콘텐츠 그려보기

무작정 콘텐츠를 입력하는 것도 한가지 방법이지만 먼저 자신이 만들고 싶은 콘텐츠의 구조를 상상해 보는게 가장 좋은것 같아요. 콘텐츠의 구조를 신문이라고 상상해 볼까요? 웹페이지 속 신문이나 종이신문을 보게되면 맨 위에는 헤드라인이 있고 그 밑에 부제목 또는 사진이 있죠. 그리고 그 밑에 본문이 단락으로 나뉘어 기재됩니다.

웹페이지도 이런 형식의 구조를 머리속으로 생각해 놓고 만드는게 효율적인것 같아요. 이제 다음의 콘텐츠 구조로 콘텐츠를 만들어 입력해 보겠습니다🐱. 오늘은 제목과 부제목 입력하는 방법을 중점을오 알아보겠습니다.

콘텐츠 제목
콘텐츠 부제목
이미지
메인 콘텐츠

2. 어렵지 않아요 `div` : 콘텐츠별 영역 표시하기

본격적으로 콘텐츠를 입력하기에 앞서 먼저 위 네가지의 서브카테고리(sub-category)별 영역을 지정해 주도록 하겠습니다. 바로 div라는 태그를 이용하여 지정해 줄텐데요. 여기서 잠깐! 중요한 것은 4가지의 div가 각각 필요하기 때문에 서브 카테고리별대로 div의 이름(class)을 지정해 주는 것이 필요합니다.

class는 해당 태그의 이름을 표시하는 기능으로서 특히 css(이건 또 모임?)를 사용할때 헷갈라지 않게 도와줍니다.

자 그럼, 위 네가지 카테고리별 div태그를 부여하고 이름을 지정해 볼까요?

먼저 첫번째 콘텐츠의 메인 제목을 위한 영역을 만들어 보겠습니다.

<html>
    <body>
        <div class="main-title">

        </div>
    </body>

</html>

앞에서 설명한대로 div를 사용하여 제목을 위한 영역을 만들었습니다(class에 한글은 노노!🙈). 나머지 3개의 영역을 더하면 다음과 같이 입력하면 됩니다.

<html>
    <body>
        <div class="main-title">

        </div>

        <div class="sub-title">

        </div>

        <div class="main-picture">

        </div>

        <div class="main-contents">

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

이 외에도 section태그나 article태그등 다양한 태그를 사용하여 영역을 지정할 수 있습니다.

3. 태그 검색은 w3schools.com !

HTML에는 다양한 태그들이 있어요. 이 태그들을 정리한 웹사이트 하나를 공유합니다. 바로 w3schools.com인데요, 구글에서 html tag 또는 관련된 내용을 검색하면 w3schools 맨 위에 검색될 만큼 유명한 사이트입니다.

위 웹사이트 검색란에 원하는 태그의 내용을 입력하시면 적합한 태그를 모두 보실 수 있습니다. 🐵

Alexis @alexis

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..."

Follow Profile

Series

HTML 스타터

HTML 을 처음 접하는 분을 위하여 최대한 알기 쉽게 설명하려고 노력하였습니다. HTML 을 공부해야 하는데 알기쉬운 설명의 교재를 찾지 못한 분들에게 도움이 되면 좋겠습니다.