HTML이 중요한 이유 – 생활코딩

이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다.

Contents

HTML을 의미에 맞게 사용한다는 것

중요하다.

검색 엔진은 웹 페이지에 담긴 html 코드를 분석한다.

태그에 근거해서 정리 정돈한다.

현대 사회에서 검색 엔진의 위상을 고려해 볼 html의 의미에 맞게 사용한다는 것은 비즈니스 측면에서 중요하다.

또 신체적 장애가 있는 분들이 사용하는 청각화 장비도 html을 고려해 작동한다.

그렇기에 누구나 자유롭게 정보에 접근할 수 있는 웹을 만들기 위해서 html을 의미에 맞게 사용하자.

이미지 넣기

img tag

<img>
Code language: HTML, XML (xml)

이미지 태그의 기본형

<img src="이미지 주소" width="가로 넓이" alt="이미지가 없을 때 출력하는 메시지">
Code language: HTML, XML (xml)

보통 많이 사용하는 속성(Attribute) 추가

무료로 쓸만한 이미지를 구할 수 있는 곳 : https://unsplash.com/

사용할 이미지 검색

선택하고 web 디렉터리로 다운로드한다.

원한는 위치에 <img src=”black_tea.jpeg” width=”100%”> 코드 추가.

이 경우는 소스 코드와 이미지 소스가 같은 디렉터리에 위치하고 있다.

하지만 그렇지 않은 경우는 src 속성의 값으로 파일의 정확한 위치를 표시해야 한다.

이미지가 추가된 것을 확인할 수 있다.

리스트

List

<li>홍차</li>
<li>우롱차</li>
<li>녹차</li>
<li>다즐링</li>
<li>우바</li>
<li>기문</li>
Code language: HTML, XML (xml)

li : list의 약자

이러한 결과값을 얻을 수 있다.

문제는 홍차, 우롱차, 녹차는 차의 종류에 속하고 다즐링, 우바, 기문은 홍차의 종류에 속하니 둘은 구분되어야 한다.

<li>홍차</li>
<li>우롱차</li>
<li>녹차</li><br>
<li>다즐링</li>
<li>우바</li>
<li>기문</li>
Code language: HTML, XML (xml)

이런 방식으로 구현할 수 있겠지만 이건 시각적인 효과에 불과하다.

앞서 html을 의미에 맞게 사용하는 것은 중요하다 했다.

그렇기에 의미적으로 두 목록을 분리시켜 보자.

Unordered List

<ul>
    <li>홍차</li>
    <li>우롱차</li>
    <li>녹차</li>
</ul>
Code language: HTML, XML (xml)

ul 태그에 속하는 자식 li 태그들은 점으로 구현되는 것을 볼 수 있다.

Ordered List

<ol>
    <li>다즐링</li>
    <li>우바</li>
    <li>기문</li>
</ol>
Code language: HTML, XML (xml)

ol 태그에 속하는 자식 li 태그들은 숫자로 구현되는 것을 볼 수 있다.

그리고 이 ul과 ol에 속한 li 태그들은 이제 의미적으로도 분리되었다.

보통 li은 ul 혹은 ol과 같이 사용된다.

표 만들기

table tag

<table>
    <tr>
        <th>tag name</th>
        <th>점유율</th>
    </tr>
    <tr>
        <td>head</td>
        <td>98.1%</td>
    </tr>
    <tr>
        <td>body</td>
        <td>97.9%</td>
    </tr>
    <tr>
        <td>html</td>
        <td>97.9%</td>
    </tr>
</table>
Code language: HTML, XML (xml)

tag name	점유율
head	98.1%
body	97.9%
html	97.9%

th : table head의 약자.

tr : table row의 약자.

td : table data의 약자.

<table border="1">...</table>
Code language: HTML, XML (xml)

tag name	점유율
head	98.1%
body	97.9%
html	97.9%

border 속성을 통해 테두리를 만들 수 있다.

colspan=”…”, rowspan="...": 차지하는 자리 수.

<table border="1">
  <tr>
      <td rowspan="4">내용1</td>
      <td>내용2</td>
      <td>내용3</td>
  </tr>
  <tr>
      <td colspan="2">내용2</td>
  </tr>
  <tr>
      <td>내용2</td>
      <td>내용3</td>
  </tr>
  <tr>
      <td>내용2</td>
      <td>내용3</td>
  </tr>
</table>
Code language: HTML, XML (xml)

내용1	내용2	내용3
	내용2
	내용2	내용3
	내용2	내용3

<table border="1">
	<caption>Caption</caption>
    <thead>
        <tr>
          <th>제목</th>
          <th>작성자</th>
          <th>조회수</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>title1</td>
          <td>Kim</td>
          <td>100</td>
        </tr>
        <tr>
          <td>title2</td>
          <td>Lee</td>
          <td>200</td>
        </tr>
        <tr>
          <td>title3</td>
          <td>Park</td>
          <td>300</td>
        </tr>
    </tbody>
</table>
Code language: HTML, XML (xml)

Caption
제목	작성자	조회수
title1	Kim	100
title2	Lee	200
title3	Park	300

보다 완성도 높은 테이블 예시.

페이지 소스 보기

이렇게 웹 페이지의 소스코드를 볼 수 있다.

2022-07-18 HTML_6