2022-07-18 HTML_6

 

https://opentutorials.org/course/3084/18488

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

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

---

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

 

중요하다.

 

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

 

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

 

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

 

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

 

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

 

---

이미지 넣기

 

img tag

<img>

이미지 태그의 기본형

 

<img src="이미지 주소" width="가로 넓이" alt="이미지가 없을 때 출력하는 메시지">

보통 많이 사용하는 속성(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>

li : list의 약자

 

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

 

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

 

<li>홍차</li>
<li>우롱차</li>
<li>녹차</li><br>
<li>다즐링</li>
<li>우바</li>
<li>기문</li>

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

 

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

 

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

 

Unordered List

<ul>
    <li>홍차</li>
    <li>우롱차</li>
    <li>녹차</li>
</ul>

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

 

Ordered List

<ol>
    <li>다즐링</li>
    <li>우바</li>
    <li>기문</li>
</ol>

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>

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

th : table head의 약자.

tr : table row의 약자.

td : table data의 약자.

 

 

<table border="1">...</table>

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>

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

 

<table "border">
	<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>

Caption

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

 

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

 

---

페이지 소스 보기

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

---