HTML 태그

tag의 종류

링크 : a태그
이미지 : img태그
목록 : ul/li 태그
제목 : title 태그

anchor, img, ul.li, heading, p 태그 등이 자주 사용된다.

그 밖에 가장 많이 사용하는 div태그가 있다.

div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용한다.

많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요하다.

실습코드

<!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><a href="http://www.apple.com">사과</a></li>
      <li>사과</li>
      <li>메론</li>
      <li>귤</li>
    </ul>
  </div>
</body>
</html>

HTML Layout 태그

레이아웃(Layout)이란 '배치'란 뜻으로 HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 배치할 것인지를 결정한다. 기본적으로 <header>, <footer> 등이 있다.

레이아웃을 위한 태그

레이아웃을 구성하는 태그도 그 의미에 맞춰 사용한다.

header : 상단
section : 본문
nav : 내비게이션
footer : 하단
aside

내부에서의 의미만 가지고 있는 것이지 동작은 div 태그랑 똑같다.

html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 된다. 지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성된다.

HTML 구조설계

어떠한 화면을 보면서 그걸 실제로 HTML로 구현한다고 해보자

그러기 위해선 우선 화면을 보면서 그 구조를 분석해야 한다.

이를 HTML 구조 설계라 한다.

먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리하고, 그 뒤에 각 영역 안에 내용의 구조를 잡는다.

영역 안의 내용 역시 목록, 이미지 등 여러 형태를 띌텐데 그에 맞게 적절한 HTML 태그를 써주면 된다.

실제로 강의를 보면서 하나하나 따라 해보자. https://www.edwith.org/boostcourse-web/lecture/16668/

실습코드

<!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>
  
  <div>  <!-- section태그를 사용했었지만, 별 의미없는 container에는 section태그가 적절하지 않아서 수정합니다 -->
    <nav><ul>
      <li>Home</li>
      <li>Home</li>
      <li>About</li>
      <li>Map</li>
      </ul></nav>
    
    <div>  
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
    </div>
    <div>
      <ul>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
        </li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
      </ul>
    </div>
  </div>
  <footer>
    <span>Copyright @codesquad</span>
  </footer>
</body>
</html>

class와 id 속성

ID

고유한 속성으로 한 HTML 문서에 하나만 사용이 가능하다.
고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다.

그런데 하나 이상 쓴다고 에러가 나지는 않는다. 개발자들이 의도적으로 하나만 쓰려는 노력을 해야한다.

Class

하나의 HTML문서 안에 중복해서 사용 가능하다.
하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있다.
홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적이다.

비슷한 스타일을 여기저기에 같이 표현하기 위해 많이 쓴다.

이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 한다고 한다. 예를 들어 ID사용을 금하는 곳도 있고, class로만 사용하는 곳도 있다.

실습코드

<!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 id="roll-section">
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
    </section>
    <section>
      <ul>
        <li class="our_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
        <li class="our_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
        </li>
        <li class="our_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
      </ul>
    </section>
  </section>
  <footer>
    <span>Copyright @codesquad</span>
  </footer>
</body>
</html>

웹의 기본적인 HTML에 대해 알아보았다.

① HTML태그

태그는 그냥 실습을 통해 간략하게 HTML태그가 이런거다 정도로만 보여줬다.

웹을 공부할 때 태그는 전체적인 계층 구조만 알고 나머지 세세한 것들은 보통 만들면서 찾아보는 게 일반적이다. 처음부터 다 알고 시작하려 들면 너무 시간이 오래걸리니 태그를 너무 깊게 파려하지 말고 대표적으로 쓰이는 몇몇 태그만 알아둔 뒤 바로 직접 코드를 쳐보는 게 낫다.

② HTML Layout 태그

이걸 시멘틱 태그라고도 하는데 웹페이지에서 어떤 부분이 제목이고 본문이고 이런것들을 쉽게 파악이 가능하도록 특정한 태그에 의미를 부여해서 웹페이지를 만드는 것이다. 시멘틱 태그는 기본적으로 모두 div 태그와 같은 기능을 수행하는 태그들이다. 그래서 <header>라고 쓰지않고 <div class="header"> 라고 표현하기도 한다.

③ HTML 구조설계

구현하고자 하는 화면에 맞게 실제로 HTML을 통해 구조를 그려보았다.

실제로 개발을 할때에도 어떤 식의 웹사이트를 만들것인지 대략 그림을 그려놓고 그에 따라 html 코드를 짠다.

익숙하지 않다면 여러 웹사이트 화면을 참고하면서 실제로 짜보는 연습을 하는 게 좋다.

근데 나도 내가 만들려는 웹서비스 말고는 많이 안짜봤다;;;

④ class와 id 속성

매우 중요한 내용이다. 웹을 공부했다하면 이 둘의 차이가 뭔지 잘 알아야한다. 실제 사용은 개발자에 따라 다 다르다. 나는 주로 class를 쓰되 어쩌다가 고유한 의미를 꼭 부여해야 되는 부분은 id를 쓴다.

● 참고링크

HTML 태그 레퍼런스

https://www.w3schools.com/tags/ref_byfunc.asp

저작자표시 비영리 변경금지

'공부 > [부스트코스] 웹 프로그래밍' 카테고리의 다른 글

[부스트코스] 웹 프로그래밍 - 1차 코드리뷰 (0)	2020.02.26
[부스트코스] 웹 프로그래밍 - Servlet (0)	2020.02.21
[부스트코스] 웹 프로그래밍 - 웹 서버 & WAS (0)	2020.02.05
[부스트코스] 웹 프로그래밍 - browser에서의 웹개발 (0)	2020.02.03
[부스트코스] 웹 프로그래밍 - browser의 동작 (0)	2020.02.01

[부스트코스] 웹 프로그래밍 - HTML

HTML 태그

tag의 종류

실습코드

HTML Layout 태그

레이아웃을 위한 태그

HTML 구조설계

실습코드

class와 id 속성

ID

Class

실습코드

'공부 > [부스트코스] 웹 프로그래밍' 카테고리의 다른 글

티스토리툴바