1 . 웹 프로그래밍 기초 - #2. HTML

본 게시물의 내용은 edwith 부스트코스 - 웹 프로그래밍 강의를 수강한 내용을 바탕으로 한다. 들은 내용을 정리하고, 복습에 용이하도록 정리해놓은 게시물이다.

이번 차시의 강의는 다음과 같다.

1. 웹 프로그래밍 기초 - #2. HTML - FE

1). HTML Tags

2). HTML Layout 태그

3). HTML 구조 설계

4). Class와 ID 속성

1). HTML Tags

HTML Tags

HTML Tag란 웹 페이지를 구성하는 요소들의 의미를 나타내는 것이다. 예를 들면, 위 줄의 1). HTML Tags는 소제목이다. 그리고 그 밑에 소제목의 한 챕터를 나타내는 글을 썼고, 그 아래 본문을 쓰고 있다. 즉, 전 게시글에서도 말했다시피 구성 요소들이 계층적으로 어떻게 구성이 되어 있는지, 각 요소들은 어떤 의미를 가지고 있는지를 나타내는 것이다.

Tag의 종류

태그에는 여러 종류가 있다. 강의에서는 다음 태그들에 대해 간단히 설명했다.

h1: 헤더를 나타낸다. 즉, 제목을 의미한다
div: 영역을 나타내는 태그이다.
ul: 순서가 정해지지 않은 리스트를 나타내는 태그이다. 즉, 사용자가 쓰는대로 순서를 정할 수 있다.
li: 리스트의 각 요소들을 나타내는 태그이다.

사용 예시

위에 나타난 태그들을 사용해서 정말 간단한 HTML문서를 만들면 다음과 같다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <div>
   <h1>반갑습니다</h1>
   여기 여러분들이 좋아하는 과일이 있어요
   <ul>
     <li>바나나</li>
     <li>사과</li>
     <li>메론</li>
     <li>귤</li>
   </ul>
 </div>
</body>
</html>

div, h1, ul, li 태그가 사용되었다. 각 계층적인 구조는 들여쓰기를 보면 알 수 있다.

2). HTML Layout Tags

HTML Layout Tags

레이아웃은 보통 어떤 구성 요소를 어디에 위치시킬 지를 말한다. 레이아웃 태그는 html문서를 구성하는 요소들을 어디에 위치시키는 지를 정해주는 태그이다. 보통 HTML 페이지를 구성할때는 다음과 같이, 계획을 먼저 짜고 그 계획에 맞게 구현을 한다.

레이아웃의 에시. 출처: https://cphinf.pstatic.net/mooc/20171231_41/15146999078486r8Pv_JPEG/5086.HTML5PageLayout_2.jpg

Layout Tag의 종류

div
section
footer
nav

3). HTML 구조와 설계

실습

다음과 같은 코드를 가지고 실습을 해보았다.

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

  <header>
    <h1>Company Name</h1>
    <img src="...." alt="logo">
  </header>
  
    <section id="nav-section">
      <nav>
        <ul>
        <li>Home</li>
        <li>Home</li>
        <li>About</li>
        <li>Map</li>
        </ul>
      </nav>
      <section></section>
    </section>
    
    <section id="roll-section">
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="22" alt=""></div>
      <div><img src="33" alt=""></div>
     </section>

    <section>
      <ul>
        <li class="ourDescription">AboutUs</li>
        <li>
          <h3>What we do</h3></li>
        <div>Lorem .....</div>
        <li></li>
      
      </ul>
    </section>
    
    <footer><span>Copyright @codesquad</span></footer>

4). Class와 ID 속성

ID

고유한 속성으로, HTML문서에 하나만 사용할 수 있다.
고유한 ID값이 있으면 그 ID를 가지고 그 요소에 접근하여 원하는 제어를 해줄 수 있다.

Class

하나의 HTML안에 같은 클래스가 여러 개 있을 수 있다.
이 클래스를 사용하는 이유는, 페이지 전체의 일관성을 유지하고, 유지보수에 용이하게 하려고 함이다.
예를 들어, 사진을 담는 요소 200개가 있다고 하자. 그런데 사진을 담는 그 요소가 너무 작아서, 크기를 키우려고 한다면, 200개를 모두 수정해야 한다. 그러나 200개가 하나의 같은 클래스로 되어있다면, 그 클래스 정보를 수정하면 된다.

'공부 > 웹 프로그래밍' 카테고리의 다른 글

1 . 웹 프로그래밍 기초 - #3. CSS - FE (2) (0)	2020.01.10
1 . 웹 프로그래밍 기초 - #3. CSS - FE (1) (0)	2020.01.10
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (4) (0)	2020.01.03
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (3) (0)	2020.01.03
1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (2) (2)	2020.01.03

섹시한 개발자의 기록

1 . 웹 프로그래밍 기초 - #2. HTML - FE