우리는 웹 사이트의 콘텐츠 중 상당한 지분을 가진 '텍스트'를 표현할 수 있게 되었습니다. 이번에는 텍스트 이외의 태그에 대해 배워 보겠습니다.

1. 이미지 삽입하기


첫 번째로 이미지를 출력할 수 있는 img 태그입니다. 웹사이트에 접속 했을 때 볼 수 있는 수많은 이미지는 모두 이미지 태그들을 이용해 삽입된 콘텐츠들입니다.

<img src="삽입하고 싶은 이미지의 URL" alt="그림의 간단한 설명을 적어보세요.">

img 태그는 src 속성을 필요로 합니다. a 태그를 사용할 때 링크를 href 속성에 넣는 것 처럼 img 태그를 사용할 때에는 삽입하고 싶은 이미지의 URL을 src 속성에 넣어야만 이미지가 출력됩니다.

  • src : source의 약자로, 불러올 이미지의 url을 속성값으로 가집니다.
  • alt : alternative text(대체 문구)의 약자로, 불러올 이미지가 없거나 이미지를 불러오는 행위를 실패 할 경우 표시되는 문구를 지정할 수 있습니다.

그럼 이제 직접 코드를 작성해보겠습니다. 구글에서 이미지를 검색한 후 우클릭하여 이미지 주소를 복사합니다.

 

 

그리고 아래와 같이 alt에 텍스트를, src에 복사한 이미지 주소를 작성합니다.

사자입니다.

그러면 아래와 같이 사진이 나오는 것을 볼 수 있습니다. 정상적으로 사진이 나오는 것을 확인했다면, 이번에는 src 속성을 지워보세요. alt 속성에 적은 대체 문구가 출력됩니다. img 태그의 속성 중에는 가로와 세로 크기를 설정할 수 있는 width, height 속성 또한 존재하지만 이는 HTML이 아닌 CSS에서 조정하는 것을 권장하고 있습니다.

  • 왜 굳이 CSS에서 조정해야 하나요?

 

 

2. 유튜브 삽입하기


이번에는 유튜브를 웹 페이지에 직접 삽입 해보겠습니다. 웹페이지에 띄우고 싶은 영상 페이지에 접속해, 공유 버튼을 클릭해주세요. 그리고 동영상 퍼가기 버튼을 클릭해줍니다.

 

 

그럼 위와 같이 태그의 형태를 띈 텍스트가 자동으로 생성됩니다. iframe이라는 태그에 우리의 동영상을 삽입한 형태입니다. 위 코드를 복사해 아래와 같이 body 태그 사이에 붙여넣겠습니다.

우리가 출력하고자 했던 동영상이 나타나는 것을 볼 수 있습니다.

 

위 동영상 링크는 https://www.youtube.com/embed/TLHUTCs3lJg 입니다. 여기서 embed/ 뒤에 위치한 문자열이 동영상의 고유 ID입니다. 고유 ID만 바꿔서 쉽게 원하는 영상으로 변경할 수 있습니다.

3. TABLE


3-1. TABLE의 구조

테이블 태그와 관련된 문법을 배우기 전에, 먼저 표의 구성에 대해 알아보겠습니다. 표는 크게 행(Row)와 열(Column)으로 구성됩니다. 더 작게 쪼개면 각 열의 이름을 담은 제목 셀, 각 열의 데이터를 담은 데이터 셀, 그리고 이들이 모여 행을 이루게 됩니다. 그럼 이런 구성들을 html에서는 어떻게 표현할까요?

 

 

'표'에 해당하는 태그는 table 태그입니다. 큰 틀을 table 태그로 잡아주고 시작합니다. 그리고 각 행, table row 을 나타내기 위해 tr 태그를 사용합니다. 다음은 제목, table heading 을 잡아주기 위해 th태그를 사용합니다. 데이터를 나타내기 위해 table data, td 태그를 사용합니다.

  • table - 표 전체를 감싸는 태그
  • tr - table row - 표에서 행을 구분하는 태그
  • th - table heading - 표의 행 내부에 제목 셀을 담는 태그
  • td - table data - 표의 행 내부에 데이터 셀을 담는 태그

그럼 이 요소들을 어떻게 조합해서 구조를 만들어야 할까요? 먼저 표를 담을 table 태그를 생성합니다. 그리고 원하는 행의 갯수만큼 tr 태그를 생성합니다. 그리고 원하는 열의 갯수만큼 td 혹은 th 를 tr 안에 채워 넣습니다.

 

3-2. TABLE 생성하기

3*3 테이블을 만들어 성별과 학년, 이름을 셀에 넣어보겠습니다. 아래와 같이 각각 코드를 작성한 후 두 코드의 차이를 눈으로 직접 확인해보세요.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>테이블 태그</title> </head> <body> <table> <tr> <th>성별</th> <th>학년</th> <th>이름</th> </tr> <tr> <td>남</td> <td>3</td> <td>철수</td> </tr> <tr> <td>여</td> <td>3</td> <td>영희</td> </tr> </table> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>테이블 태그</title> </head> <body> <table> <tr> <th>성별</th> <td>남</td> <td>여</td> </tr> <tr> <th>학년</th> <td>3</td> <td>3</td> </tr> <tr> <th>이름</th> <td>철수</td> <td>영희</td> </tr> </table> </body> </html>

4. LIST


4-1. LIST 생성하기

LIST 형식의 목록은 크게 순서가 있는 목록과 순서가 없는 목록의 두 가지로 구분할 수 있습니다.

순서가 없는 목록은 ul 태그를 사용합니다. unordered list의 약어입니다.

  • 순서가 없다는 게 무슨 뜻인가요?

순서가 있는 목록은 ol 태그를 사용합니다. ordered list의 약어입니다.

  • 순서가 있다는 게 무슨 뜻인가요?

ul 과 ol 태그 안에 li 태그를 사용하여 리스트를 표현합니다. 직접 작성하며 알아보겠습니다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>테이블 태그</title> </head> <body> <h3>내가 가고싶은 여행지</h3> <ul> <li>몽골</li> <li>페루</li> <li>인도</li> </ul> <h3>오늘 해야할 일</h3> <ol> <li>숙제하기</li> <li>청소하기</li> <li>독서</li> </ol> <br> </body> </html>

그럼 아래와 같이 ul 태그를 사용한 리스트는 순서 없이 출력되고, ol 태그를 사용한 리스트는 앞에 번호를 달고 출력되는 것을 볼 수 있습니다.

 

리스트는 중첩하여 사용할 수도 있습니다. 아래처럼 li 태그 내에 ol 태그를 삽입하여 작성해보세요.

<h3>오늘 해야할 일</h3> <ol> <li>숙제하기</li> <li>청소하기</li> <li>독서 <ul> <li>안네의 일기</li> <li>콩쥐팥쥐</li> <li>데미안</li> </ul> </li> </ol>

그럼 아래와 같은 리스트 구성이 나오는 것을 볼 수 있습니다.

 

4-2. ol 과 관련있는 속성

ol 태그 내 작성할 수 있는 속성들에 대해 간단하게 알아보겠습니다.

  • start="숫자" : 리스트가 시작하는 숫자를 지정합니다.

  • type="문자" : 리스트를 시작하는 문자를 지정합니다.

  • reversed : 순서를 반대로 시작합니다.

  • value : li 태그에 기재하는 속성으로, 해당하는 리스트 아이템 번호를 지정합니다.

    <h3>오늘 해야할 일_1</h3> <ol start="3"> <li>숙제하기</li> <li>청소하기</li> <li>독서</li> </ol> <h3>오늘 해야할 일_2</h3> <ol type="A"> <li>숙제하기</li> <li>청소하기</li> <li>독서</li> </ol> <h3>오늘 해야할 일_3</h3> <ol reversed> <li>숙제하기</li> <li>청소하기</li> <li>독서</li> </ol> <h3>오늘 해야할 일_4</h3> <ol> <li>숙제하기</li> <li value="8">청소하기</li> <li>독서</li> </ol>

위와 같이 코드를 작성해보세요.

 

그럼 위 화면과 같이 보다 복잡하고 체계적인 리스트를 작성할 수 있습니다.


강의자료 pdf 다운

[1-5] HTML_Tag_2.pdf

'웹(html,css,javascript)' 카테고리의 다른 글

javascript(ES6) & webpack  (0) 2021.06.02
css Basic  (0) 2020.03.01
Semantic Tag  (0) 2020.03.01
html  (0) 2020.03.01
웹 이란?  (0) 2020.03.01

+ Recent posts