HTML

[개념 문제] 01. Introduction to HTML/ 02. HTML tags/

selonjulie 2022. 5. 9. 16:34

[HTML] 01. Introduction to HTML

01-1. HTML(Hypertext Markup Language)의 정의와 기능

디자이너도, 비개발자도 한 번쯤 들어본 단어 HTML. HTML이 뭘까요?

HTML은 웹 페이지를 만들기 위한 언어입니다.
HTML로 웹페이지의 구조를 잡을 수 있습니다.
HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다.
브라우저(safari, chrome, ie..)는 HTML파일을 가지고 뭘 어떻게 그려주면 되는지 파악한 후에 웹 페이지를 생성합니다.

01-2. HTML 파일

HTML은 아래와 같이 .html 확장자가 붙은 텍스트 파일입니다. 파일의 이름은 원하는대로 정할 수 있습니다.

index.html
main-page.html
loginPage.html
1.html

브라우저만 있으면 HTML로 작성한 것을 확인할 수 있습니다.

텍스트편집기(Text Editor)같은 간단한 메모작성 앱을 열고,
.html 확장자로 저장한 후에
해당파일을 브라우저(크롬)에 drag & drop 하면 됩니다.

저는 맥북의 텍스트편집기를 열어서 "아무거나 써보자" 라고 텍스트 밖에 작성하지 않았는데 브라우저에 잘 나왔습니다. 심지어 브라우저가 이 파일을 어떻게 인식 했는지 개발자도구를 열어 확인해보니 제가 작성 하지도 않은 , 같은 것들이 추가되었습니다. 브라우저가 파일의 확장자를 보고 "아, 이 파일은 HTML 이구나" 파악하고 텍스트를 보여 줍니다. 그런데 코드를 한 줄, 한 줄 읽어들이려고 했더니 HTML 문법도 제대로 지켜지지 않은 이상한 파일에 텍스트만 적혀있어서 브라우저가 자동으로 위아래에 필요한 태그를 붙여준 것입니다.

01-3. HTML tag

위의 그림에 보이는 것 처럼 브라우저가 알아서 붙여주더라도, 개발자는 문법에 맞게 HTML 코드를 작성할 수 있어야 합니다. HTML파일에 필요한 최소한의 태그는 아래와 같습니다.

태그와 관련하여 HTML 기초 용어(tag, content, attribute, element)를 알아보도록 하겠습니다.

01-3-1. tag(태그), content(내용)

HTML에서는 이미지나 텍스트를 그려주려면 그에 맞는 태그가 필요합니다. 그래야 브라우저에서 '아, 이것은 텍스트구나, 저것은 이미지구나'하고 알 수 있습니다. 태그는 아래 사진처럼 <> 으로 감싸져 있습니다.

브라우저에서 태그(tag)(<태그이름>과 </태그이름>)은 보여주지 않습니다.
즉, 내용(content) 부분만 보여줍니다.
내용의 왼쪽에 있는 것이 **시작 태그(opening tag)**이고, 내용 우측에 있는 것이 **종료 태그(closing tag)**입니다.
종료태그 괄호를 닫기전에 **/(slash)**가 있다는 것을 꼭 기억해주세요.

대부분의 태그는 시작하면 꼭 끝맺음을 해야합니다. 즉, 시작태그가 있으면 끝 태그도 꼭 있어야한다는 의미입니다.

아래의 태그는 시작과 끝 태그가 존재합니다.

<p></p>
<h1></h1>
<h2></h2>
<a></a>

반면에 시작과 동시에 종료되는 태그도 존재합니다.

<img>
<br>

위와 같은 태그는, 태그와 태그 사이에 내용부분이 필요 없기 때문입니다. 나중에 직접 써보며 더 자세히 살펴보겠습니다.

참고자료) https://www.w3schools.com/tags/tag_a.asp에 들어가 혹시 알고 있는 태그가 얼마나 되는지 보실까요?

01-3-2. attribute(속성)

속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있습니다.

아래에서 div, a, img는 태그이고 class, href, src, alt는 속성입니다.

<div class="title">시작!</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="내사진">

참고자료) https://www.w3schools.com/html/html_attributes.asp

01-3-1. element(요소)

<태그이름> 으로 시작하여 </태그이름> 으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 합니다. 끝 태그가 필요없는 것은 태그가 그 자체로 요소가 됩니다.

<h1>시작!</h1>
<img src="me.png">

Assignment

상단의 run 버튼을 눌러 실행시키면, 큰 글씨로 "시작해볼까요!" 라고 나올 것입니다.
body 태그 안에 h1이라는 제목을 나타내는 태그를 삽입해 두었습니다. 그 밑에 몇 가지 내용을 추가해보겠습니다.
"시작해볼까요!" 밑에 h2태그를 사용하여 "good!" 이라는 요소를 추가해주세요.
1번의 글씨크기가 서로 다른 것을 확인하셨나요? 이제 "good!" 밑에 "다음 장으로!" 라는 텍스트를 추가해주세요.
h1~h5 중에서 good!보다 하나 더 작은 크기로 나올 수 있는 태그를 선택하여 "good!" 밑에 "다음 장으로!" 라는 텍스트를 추가해주세요.

참고자료) https://www.w3schools.com/tags/tag_hn.asp

HTML h1 to h6 tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

문제

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
    <h1>시작해볼까요!</h1>
    
  </body>
</html>

풀기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
    <h1>시작해볼까요!</h1>
    <h2>good!</h2>
    <h3>다음장으로!</h3>
  </body>
</html>

[HTML] 02. HTML tags

02-1. HTML 파일의 구조

html 파일의 구조는 항상 아래와 같습니다.

<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>

index.html에 있는 여러가지 tag들을 만나봅시다! run 버튼을 눌러 실행하고 결과화면을 보면서 설명을 읽어주세요.

02-1-1.

HTML 파일이라면 제일 첫 줄에 위치해야 하는 선언문 입니다. 모습은 태그와 비슷하지만 HTML 태그는 아닙니다. 이 html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 합니다.

<!DOCTYPE html>

index.html에 쓰인 이 선언문은 HTML5 버전을 사용한다는 의미입니다. 가장 최신이자 많이 쓰이는 버전은 HTML5입니다. 우리가 배우고 앞으로 사용할 버전도 HTML5라고 알고계시면 되겠습니다.

02-1-2. <html>

을 제외하고 모든 HTML elements(요소)들은 최상위의

<html></html>

으로 감싸져 있습니다. 브라우저가 html태그를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비를 합니다.

02-1-3. <head>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>

html태그 다음에는 항상 <head>태그가 위치합니다. 사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지)이 들어가는 부분입니다.

<meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 합니다.
<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다.
<title>repl.it</title>: 브라우저 탭에 보이는 페이지 이름입니다. index.html에 작성된 코드는 지금 보고 있는 웹페이지 자체의 index.html 파일이 아니라서, 수정을 하셔도 적용이 되지는 않습니다.

02-1-4. <body>

body태그는 항상 head태그 다음에 위치합니다. body태그 내부에는 화면에 보여질 각종 태그들이 위치합니다. 레이아웃대로 배치되어 있겠죠! 여기서부터 나오는 태그는 뒤에서 더 자세하게 다룰 예정입니다. 이번 장에서는 가볍게 배우고 넘어가겠습니다.

02-2. HTML tags

02-2-1. <h1>, <h2>, <h3>, <h4>, <h5>

주로 제목같은 텍스트를 보여줄때 사용하는 태그입니다.
1에서 5로 숫자가 올라갈 수록, 글씨 크기가 점점 작아집니다.
heading의 줄임말입니다.

<h5>자기소개</h5>
<h1>오늘의 수업 내용</h1>
<h2>중요한 태그들..</h2>

02-2-2. <span>

<span>태그에는 주로 텍스트를 넣어줍니다.
<span>을 사용하면 줄이 바뀌지 않고, 한 줄에 이어서 나오게 됩니다.
이렇게 한 줄에 이어서 나오는 요소를 inline-element 라고 합니다.

<span>이름: 김개발</span>
<span>직업: 프론트앤드 개발자</span>

02-2-3. <p>

<p>태그 또한 텍스트를 주로 넣어줍니다.
<p>는 paragraph 의 줄임말인 만큼, 주로 문단을 통으로 넣을 때가 많습니다.
<p>태그는 <span>태그와 달리 줄바꿈이 일어납니다.

<p>tag들 파헤치기!!</p>
<p>아자!!</p>

02-2-4. <a>

<a>태그는 클릭하면 화면이 이동합니다.
<a> 태그의 href 속성(attribute)에 이동해야 하는 주소를 써주면 됩니다.
화면의 **"div태그?"**을 클릭하여 화면을 이동해 보세요.
target 속성에 "_blank" 값은 클릭하면 새창으로 뜨게 해주는 값입니다.
이제 target="_blank" 부분을 삭제하고 다시 run을 눌러 재실행 해보세요.

<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">a 태그?</a>

02-2-5. <div>

<div>는 division의 줄임말로 웹사이트에서 섹션을 나눌 때 사용합니다. <a>, <p>, <img> 등의 태그는 그 자체로 어떤 기능을 하는지 명확히 알 수 있지만, <div>는 자체로 의미가 있지는 않습니다.

<div>를 사용하는 이유는,

비슷한 부분끼리 그룹지어주고
디자인에 맞게 레이아웃을 분리해주고,
각 <div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문입니다.

예를 들어 헤더, 메뉴, 주요 내용, 푸터.. 이렇게 나누어 div로 묶어 줍니다.

Assignment

HTML 코드를 조금 수정해보겠습니다.
<p> 태그와 <span>의 차이점을 잘 인지하셨나요?
현재 이름과 직업이 한 줄에 나와있어 읽기가 불편한 상황입니다.
다른 태그로 바꿔서 줄바꿈이 일어나게 수정해주세요.

문제

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>

    <h5>자기소개</h5>
    <span>이름: 김개발 직업: 프론트앤드 개발자</span>
    
    <h1>오늘의 수업 내용</h1>
    <p>tag들 파헤치기!!</p>
    <p>아자!!</p>
    <a href="https://www.w3schools.com/tags/tag_div.asp"
      target="_blank">div 태그?</a>
  
    <div>
      <h2>중요한 태그들..</h2>
      <ol>
        <li>ul, ol, li</li>
        <li>p, span</li>
        <li>a</li>
        <li>div</li>
        <li>header, footer</li>
        <li>button</li>
        <li>table, tr, th, td, tbody, thead (이건 나중에)</li>
        <li>등등</li>
      </ol>
    </div>
  </body>
</html>

풀기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>

    <h5>자기소개</h5>
    <p>이름: 김개발 </p>
    <p>직업: 프론트앤드 개발자</p>
    
    <h1>오늘의 수업 내용</h1>
    <p>tag들 파헤치기!!</p>
    <p>아자!!</p>
    <a href="https://www.w3schools.com/tags/tag_div.asp"
      >div 태그?</a>
  
    <div>
      <h2>중요한 태그들..</h2>
      <ol>
        <li>ul, ol, li</li>
        <li>p, span</li>
        <li>a</li>
        <li>div</li>
        <li>header, footer</li>
        <li>button</li>
        <li>table, tr, th, td, tbody, thead (이건 나중에)</li>
        <li>등등</li>
      </ol>
    </div>
  </body>
</html>

03-1. HTML Attributes

HTML Attributes(속성)은 첫 시간에 잠깐 언급했습니다.

a는 tag 이름이고
href는 attribute(속성) 이름이며
https://wecode.com 는 href 속성에 대한 attribute 값이고
"위코드로 이동"은 content(내용)입니다.

<a href="https://wecode.com">위코드로 이동</a>

attribute도 종류가 많습니다. 그리고 어떤 tag인지에 따라 적용할 수 있는 attribute도 달라집니다.

위의 href는 다른 페이지로 이동하는 주소이므로 div같은 태그에는 쓸 수 없습니다. 처음에는 tag도 알아야 하고, attribute도 알아야 해서 헷갈릴 수도 있지만 주로 사용하는 tag와 attribute가 있어서 금방 익숙해집니다. 나머지는 모르거나 필요할 때마다 구글에서 검색해보면서 하나 둘 익혀나가면 됩니다. index.html에 몇 가지 attribute를 추가해 보겠습니다.

03-1-1. id

id는 각 태그에 이름을 주는 속성입니다.

이름은 이름인데, 주민등록 번호와 같이 한국에 단 하나밖에 없어 대상을 식별할 수 있는 고유한 값이어야 합니다. 따라서 웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있습니다. 즉, 중복된 id 이름이 있으면 안된다는 말입니다.

아래와 같이 profile이라는 id를 가진 태그는 단 하나만 있을 수 있습니다. 다른 태그에 profile이라는 id는 더이상 사용할 수 없습니다.

<div id="profile">

id는 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용합니다.

예를 들면 <p> 태그에 글씨 크기를 20px로 적용하면, index.html에 있는 모든 <p> 태그의 글씨가 커집니다. 이런 것을 원한것이 아니라면 id가 profile인 요소에만 글씨 크기를 20px로 적용할 수 있습니다. JavaScript 코드에서도 유용하게 사용합니다. id 이름으로 요소를 찾아서 제목을 유동적으로 바꿀 수도 있고, 새로운 데이터로 내용을 변경할 수도 있습니다.

03-1-2. class

class도 태그에 이름을 주는 속성입니다. id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있습니다. 예를 들어 '이철수'라는 이름을 가진 사람이 여러 명 이듯이 여러 tag에 중복된 class 이름을 줄 수 있습니다.

<div class="content-wrap"></div>
<p class="content-wrap"></p>

03-2. 여러 속성 추가하기

하나의 태그에 2개 이상의 속성을 부여할 수 있습니다. 여러 속성을 주고 싶으면 한 칸 띄어쓰기 후 추가하면 됩니다. 속성의 순서는 상관없이 쓰고 싶은대로 쓰시면 됩니다.

<div id="profile" class="content-wrap"></div>
<img src="./hi.png" alt="내사진" >

Assignment

1.id 를 추가해보겠습니다.

index.html의 15번째줄 <div>에 profile이라는 id를 추가해주세요.
id를 추가 하고 run 버튼을 눌러 실행해봅시다.
네! 아무 변화가 없네요 :)
id 이름을 준다고 딱히 변하는 것은 없습니다. 단지 tag가 이름을 얻은 것 뿐입니다.

2. id를 추가한 15번 째 줄 <div>에 content-wrap 이라는 class 이름을 부여해주세요.

이와 같이 하나의 태그에 id와 class 모두 가질 수 있습니다.

3. 22번 째 줄의 <div>에도 content-wrap 이라는 class 이름을 부여해주세요.

class를 추가 하고 run 버튼을 눌러 실행해봅시다.
이 번에는 결과 화면에 변화가 생겼네요!
제가 content-wrap 클래스에 해당하는 스타일을 이미 작성해 두었습니다.
두개의 요소에 테두리가 생기면 성공입니다.

4. img가 너무 커서 크기를 조절하려고 합니다.

17번째줄 <img>태그에 width, height라는 attribute를 추가하여 크기를 줄여주세요.
크기는 가로 200, 세로 200이면 좋을 것 같네요!

:: 참고링크) https://www.w3schools.com/tags/tag_img.asp

HTML img tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    
    <style>
      .content-wrap { border: 5px solid black; }
    </style>
  </head>
  <body>
    <h1>FRONTEND 101</h1>
    
    <div>
      <h2>자기소개</h2>
      <img src="https://firebasestorage.googleapis.com/v0/b/your-pos-a17a5.appspot.com/o/profile.png?alt=media&token=dd317a02-dbde-43aa-a6ce-08ff221b0e75">
      <p>이름: 김개발</p>
      <p>직업: 프론트앤드 개발자</p>
    </div>
    
    <div>
      <h2>오늘의 수업 내용</h2>
      <p>tag들 파헤치기!!</p>
      <a href="https://www.w3schools.com/tags/tag_div.asp">div 태그?</a>
    
      <div>
        <h3>중요한 태그들..</h3>
        <ul>
          <li>ul, ol, li</li>
          <li>p, span</li>
          <li>a</li>
          <li>div</li>
          <li>header, footer</li>
          <li>button</li>
          <li>table, tr, th, td, tbody, thead (이건 나중에)</li>
          <li>등등</li>
        </ul>
      </div>
    </div>
  </body>
</html>

풀기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    
    <style>
      .content-wrap { border: 5px solid black; }
    </style>
  </head>
  <body>
    <h1>FRONTEND 101</h1>
    
    <div id class = "content-wrap">
      <h2>자기소개</h2>
      <img src="https://firebasestorage.googleapis.com/v0/b/your-pos-a17a5.appspot.com/o/profile.png?alt=media&token=dd317a02-dbde-43aa-a6ce-08ff221b0e75" width = "200" height = "200">
      <p>이름: 김개발</p>
      <p>직업: 프론트앤드 개발자</p>
    </div>
    
    <div class = "content-wrap">
      <h2>오늘의 수업 내용</h2>
      <p>tag들 파헤치기!!</p>
      <a href="https://www.w3schools.com/tags/tag_div.asp">div 태그?</a>
    
      <div>
        <h3>중요한 태그들..</h3>
        <ul>
          <li>ul, ol, li</li>
          <li>p, span</li>
          <li>a</li>
          <li>div</li>
          <li>header, footer</li>
          <li>button</li>
          <li>table, tr, th, td, tbody, thead (이건 나중에)</li>
          <li>등등</li>
        </ul>
      </div>
    </div>
  </body>
</html>

'HTML' 카테고리의 다른 글

Semantic tag 의미론적 태그들 (0)	2022.05.10
HTML의 의미, 기본 문법, 가장 많이 사용되는 태그 32개 (0)	2022.04.30
세계 최초의 웹 페이지, 모든 것은 커뮤니케이션을 하기위해 시작했다. (0)	2022.04.28

현재글[개념 문제] 01. Introduction to HTML/ 02. HTML tags/

슬롱주리 Selon Julie

아프리카 국제개발 전문가에서 웹 개발자로 성장하고 있습니다. 사람들과 프랑스어로 소통하다가 컴퓨터와 자바스크립트로 소통하는 법을 배우고 있습니다. 개발을 통해 세상을 이롭게 할 수 있는 방법을 골똘히 모색하고 있습니다. leejulie09@gmail.com

백엔드, react, CSS, 자바스크립트, 코딩, 프롭스, javascript, 부트캠프, 리액트, 배열, 객체, html, useEffect, Object, 함수, 개발자, 알고리즘, 재귀, 프론트엔드, 훅,

Today :
Yesterday :

슬롱주리 Selon Julie

[개념 문제] 01. Introduction to HTML/ 02. HTML tags/

[HTML] 01. Introduction to HTML

01-1. HTML(Hypertext Markup Language)의 정의와 기능

01-2. HTML 파일

01-3. HTML tag

01-3-1. tag(태그), content(내용)

01-3-2. attribute(속성)

01-3-1. element(요소)

Assignment

[HTML] 02. HTML tags

02-1. HTML 파일의 구조

02-1-1.

02-1-2. <html>

02-1-3. <head>

02-1-4. <body>

02-2. HTML tags

02-2-1. <h1>, <h2>, <h3>, <h4>, <h5>

02-2-2. <span>

02-2-5. <div>

Assignment

03-1. HTML Attributes

03-1-1. id

03-1-2. class

03-2. 여러 속성 추가하기

Assignment

'HTML' 카테고리의 다른 글

'HTML'의 다른글

티스토리툴바

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

[개념 문제] 01. Introduction to HTML/ 02. HTML tags/

[HTML] 01. Introduction to HTML

01-1. HTML(Hypertext Markup Language)의 정의와 기능

01-2. HTML 파일

01-3. HTML tag

01-3-1. tag(태그), content(내용)

01-3-2. attribute(속성)

01-3-1. element(요소)

Assignment

[HTML] 02. HTML tags

02-1. HTML 파일의 구조

02-1-1.

02-1-2. <html>

02-1-3. <head>

02-1-4. <body>

02-2. HTML tags

02-2-1. <h1>, <h2>, <h3>, <h4>, <h5>

02-2-2. <span>

02-2-5. <div>

Assignment

03-1. HTML Attributes

03-1-1. id

03-1-2. class

03-2. 여러 속성 추가하기

Assignment

'HTML' 카테고리의 다른 글

'HTML'의 다른글

관련글

티스토리툴바