이연걸

이연걸

끊임없이 연구하는 개발자가 되자

[HTML] HTML 기초

Updated:

개요

HTML에 대한 기본적인 내용과 사용 방법들을 정리한다.

HTML의 태그

태그는 <태그 이름="">과 같이 사용할 수 있다.

콘텐츠가 있는 태그 콘텐츠가 없는 태그
<div>, <p>, <span> <br>, <img>, <meta>

콘텐츠가 있는 태그

<div> 내용 </div>과 같이 사용한다. 이 태그와 콘텐츠가 합쳐진 하나의 단위를 요소라고 부른다.

콘텐츠가 없는 태그

이는 빈 태그라고 부른다.

기본구조와 속성

<!--html5 버전을 의미-->
<!DOCTYPE html>
<!--html 문서의 시작을 의미, lang="ko"는 문서의 언어 정보-->
<html lang="ko">
    <!--html 문서의 정보를 작성하는 영역-->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!--웹 브라우저에 표시되는 영역-->
        <body>
			<p>test</p>
        </body>
    </head>
</html>

h(n) 태그

  • h(n) 태그는 헤딩 태그라고도 불린다.
  • 이런 h(n) 태그가 주로 콘텐츠의 대제목, 중제목, 소제목과 같은 곳에 사용되기 때문이다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>h(n) 태그</title>
        <body>
			<h1>h1 tag</h1>
            <h2>h2 tag</h2>
            <h3>h3 tag</h3>
            <h4>h4 tag</h4>
            <h5>h5 tag</h5>
            <h6>h6 tag</h6>
        </body>
    </head>
</html>

image

  • h1으로 갈 수록 글자가 크다. (가장 중요하다.)

신경써야 할 두가지

  1. <h1> 태그는 한 번만 사용하기
  2. h(n) 태그는 <h1> 태그부터 순차적으로 사용해야 한다.

<p> 태그와 <br> 태그

<p> 태그

  • paragraph의 앞글자를 딴 태그로 단락을 의미한다.

단락은 국어적인 의미로 독자들이 이해하기 쉽도록 내용상으로 매듭을 짓는 단위이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>h(n) 태그</title>
        <body>
			<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 					   Accusantium laboriosam eum repellat nam ratione hic, dignissimos 			   neque ab quos error, quasi maiores aperiam aliquid fuga accusamus 				sunt distinctio ullam numquam.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               Magni amet animi voluptas consequuntur itaque corporis vitae, 				   laboriosam odio commodi dolores facere. Eveniet, maiores 					   voluptatum dolore tenetur distinctio vero neque sint?
            </p>
        </body>
    </head>
</html>
  • <p> 태그는 기본적으로 단락과 단락사이는 띄어져서 출력이 된다.

image

  • <p> 태그는 웹 브라우저의 가로 한 줄을 사용하는 태그이다. 따라서 웹 브라우저의 크기에 따라서 유동적으로 출력된다.
  • 공백은 웹 브라우저에서 한 칸으로 취급된다.
    • 따라서 entity 코드 중 하나인 \ 를 사용하면 스페이스 한 칸을 띄울 수 있다.

<br> 태그

  • 줄 바꿈을 처리할 때 사용된다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>br 태그</title>
        <body>
			<p>Lorem ipsum dolor <br>
                sit amet consectetur, adipisicing elit. 					   					Accusantium laboriosam eum repellat nam ratione hic, dignissimos 			     neque ab quos error, quasi maiores aperiam aliquid fuga accusamus 				   sunt distinctio ullam numquam.
            </p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
               Magni amet animi voluptas consequuntur itaque corporis vitae, 				   laboriosam odio commodi dolores facere. Eveniet, maiores 					   voluptatum dolore tenetur distinctio vero neque sint?
            </p>
        </body>
    </head>
</html>

image

<a> 태그

  • anchor의 앞글자를 딴 태그로 웹페이지에서 링크를 연결할 때 사용하는 태그이다.

  • 크게 내부 링크 방법과 외부 링크 방법으로 구분이 되어진다.

내부 링크 방법

해당 링크를 클릭하게 되면 html 특정 위치로 바로 이동

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>a 태그(링크)</title>
        <body>
			<a href="#one">one로 이동</a>
            <a href="#two">two로 이동</a>
            <a href="#three">three로 이동</a>
            
            <p id="one" style="margin-top: 1500px;">one</p>
            <p id="two" style="margin-top: 1500px;">two</p>
            <p id="three" style="margin-top: 1500px;">three</p>
            <p style="margin-top: 2000px"></p>
        </body>
    </head>
</html>
  • <a> 태그는 기본적으로 한번도 방문하지 않은 링크는 파란색, 그렇지 않다면 갈색으로 표시
  • 보통 목차로 많이 쓰인다.

외부 링크 방법

해당 링크를 클릭하게 되면 다른 웹페이지로 이동

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>a 태그(링크)</title>
        <body>
            <!--target="_blank"란 새 창으로 열기를 의미-->
			<a href="https://www.google.com" target="_blank">구글로 이동</a>
        </body>
    </head>
</html>

img 태그

  • img 태그는 삽입하려고 하는 이미지의 위치에 따라서 내부 리소스 이미지 방법과 외부 리소스 이미지 방법으로 구분된다.

내부 리소스 이미지 방법

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>img 태그(내부 리소스 이미지 방법)</title>
        <body>
            <!--alt 속성으로 이미지 설명-->
            <!--width, height 속성으로 이미지 크기 변경 / %로 변경도 가능하다. (30%, 50%...)-->
			<img src="../images/bridge.jpg" alt="노을이 지는 다리의 모습을 담은 이미지" width="300", height="300">
        </body>
    </head>
</html>
  • img 태그에서 src와 alt 속성은 필수이다.

외부 리소스 이미지 방법

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>img 태그(외부 리소스 이미지 방법)</title>
        <body>
            <!--이미지를 클릭하면 구글 사이트로 이동-->
            <a href="https://google.com" target="_blank">
                <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
            </a>
        </body>
    </head>
</html>

실습, 우산(동요) 가사 출력하기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>우산</title>
        <body>
            <h1>우산</h1>
            <p>이슬비 내리는 이른 아침에 <br> 우산 셋이 나란히 걸어갑니다.</p>
            <p>파란우산 검정우산 찢어진우산<br> 좁다란 학교길에 우산 세개가 <br>이마를 마주대고 걸어 갑니다</p>
            <img src = "umbrella.png" width="15%">
        </body>
    </head>
</html>

다음은 위 코드의 실행 결과이다.

image

HTML 태그는 콘텐츠가 무엇인지 알려주는 용도이다. 즉 태그를 보고 이 내용이 어떤 컨텐츠인지 파악할 수 있다. 이러한 관점에서 바라보면 상황과 맞지 않은 태그를 쓰면 HTML가치가 떨어지고 유지보수도 떨어지게 된다. 그래서 상황에 맞는 적절한 태그를 사용해주어야 한다.

<strong 태그>

  • strong 태그는 중요한 텍스트를 나타낼 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>strong 태그</title>
        <body>
            <p><strong>중요:</strong> 기계적 결합이 아닌
                사용자 부주의로 발생한 사고에 대해서는 책임지지 않습니다.</p>
        </body>
    </head>
</html>
  • 웹 브라우저에 출력될 때 굵게 표시가 된다.

<em> 태그

  • 텍스트를 강조하고 싶을 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>em 태그</title>
        <body>
            <p>이 놀이기구는 <em>임산부, 어린이, 노약자</em>는 탑승할 수 없습니다.</p>
        </body>
    </head>
</html>
  • 웹 브라우저에 출력될 때 기울어져서 표시가 된다.

strong 태그와 em 태그는 서로 중첩해서 사용이 가능하다.

<b> 태그

  • b 태그는 단순하게 시각적으로 굵게만 해주는 태그이다.
  • 따라서 시각적으로는 strong 태그와 같지만 중요하다는 의미는 아니다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>b 태그</title>
        <body>
            <p><strong>중요:</strong> 기계적 결합이 아닌
                사용자 부주의로 발생한 사고에 대해서는 책임지지 않습니다.</p>
            <p><b>중요:</b> 기계적 결합이 아닌
                사용자 부주의로 발생한 사고에 대해서는 책임지지 않습니다.</p>
        </body>
    </head>
</html>

<i> 태그

  • i 태그는 단순하게 시각적으로 기울게만 해주는 태그이다.
  • 따라서 시각적으로는 em 태그와 같지만 강조의 의미는 아니다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>i 태그</title>
        <body>
            <p>이 놀이기구는 <em>임산부, 어린이, 노약자</em>는 탑승할 수 없습니다.</p>
            <p>이 놀이기구는 <i>임산부, 어린이, 노약자</i>는 탑승할 수 없습니다.</p>
        </body>
    </head>
</html>

목록 태그

목록이란 어떤 물품의 이름이나 책 제목 따위를 일정한 순서로 적은 것이다.

<ul> 태그

  • unordered list의 약자로 순서가 없는 목록을 표현할 때 사용하는 태그이다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>목록 태그 - ul</title>
        <body>
            <h1>오늘의 할일</h1>
            <ul>
                <!--li태그와 함께 사용한다.-->
                <li>고양이 목욕 시키기</li>
                <li>숙제하기</li>
                <li>운동하기</li>
            </ul>
        </body>
    </head>
</html>

<ol> 태그

  • ordered list의 약자로 순서가 있는 목록을 표현할 때 사용하는 태그이다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>목록 태그 - ol</title>
        <body>
            <h1>오늘의 할일</h1>
            <!--type을 설정하여 넘버링 기호를 바꿀 수 있다.-->
            <ol type="A">
                <!--li태그와 함께 사용한다.-->
                <li>고양이 목욕 시키기</li>
                <li>숙제하기</li>
                <li>운동하기</li>
            </ol>
        </body>
    </head>
</html>
  • 넘버링이 되어서 출력이 된다.

<dl> 태그

  • definition list의 약자로 정의형 목록 태그이다.
  • 하위 자식 태그로 <dt>, <dd> 태그를 가진다.
  • <dt>는 definition title로 용어의 정의에 쓰이고 <dd>는 definitnion data로 용어의 설명에 쓰인다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>목록 태그 - ol</title>
        <body>
            <h1>수코딩 레스토랑</h1>
			<dl>
                <dt>라자냐</dt>
                <dd>라자냐는 이탈리아 북부에서 유래한 파스타의 일종입니다.</dd>
                <dt>필라프</dt>
                <dd>필라프는 쌀이나 으깬 밀과 같은 곡식으로 만드는 음식이다.</dd>
                <dt>아란치니</dt>
                <dd>아란치니는 기름에 튀기거나 가끔은 구운 주먹밥과 비슷한 요리로 빵가루를 겉에 묻혀서 만드는 요리입니다.</dd>
            </dl>
        </body>
    </head>
</html>

image

참고자료

수코딩 유튜브 HTML + CSS 강의

Categories:

Updated:

Leave a comment

You may also enjoy