HTML (Hypertext Markup Language)

rmfos82·2021년 11월 19일
0

Computers

목록 보기
1/13
post-thumbnail

웹페이지를 제일 처음 접해본건 생각보다 오래 전 이다
약 12년전 학교 컴퓨터시간, 책상 속에 박혀있는(그때 당시는 컴퓨터가 책상안에 들어가 있는 구조였다)
컴퓨터들 사이로 학우들이 스타크래프트만 하던시간 컴퓨터 선생님이 메모장 하나를 열어 head,와 body를
입력하곤 보여주었던게 아직도 기억이 난다

왜 이런얘기를 하냐면 12년이 지난 지금 내가 그 길 속으로 뛰어들었기 때문이다.

HTML

하이퍼 텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다.
또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

제일 먼저 코드에디터를 깔고나면 보게되는 첫 코드

html lang = "ko" : 문서의 언어를 설정
title : 문서의 제목

<title>여기는 제목입니다!</title>

처음 html문서를 만들었다면 이 두개의 설정은 꼭 해주고 시작을 하는 것이 좋은 방법이다

head

head 태그는 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용합니다.

body

body 태그는 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용합니다.

HTML 문서에는 단 하나의 body 요소만이 존재할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>여기는 제목입니다!</title>
</head>
<body>
    <h1>여기는 본문 입니다!</h1>
</body>
</html>

여기서 h1 태그는 HTML 문서에서 제목을 만들때 사용하는 태그이다
이렇게 아주 간단하게 작성한 후 웹페이지를 열어보면

웹페이즈 본문에 큰 글씨로 텍스트가 작성된 것을 볼 수 있다

HTML에서의 자주사용되는 태그들

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

다 외우지 말자 항상 참고하면서 가져올것!

profile
새벽에 처음 해보는 개발 공부! 뜨거운메로나

0개의 댓글