부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-1 강의 정리

[1] 강의

웹 프로그래밍(풀스택)

2. HTML - FE

1) HTML Tags

 

[2] 강의 정리

  이번 시간에는 HTML 태그에 대해서 알아보겠다. HTML 태그는 굉장히 많은 것들이 있다. 또한 그 많은 것들은 모두 각각의 쓰임새에 대해서 정확한 의미를 가지고 있다. 우리는 그걸 또 영어로 표현해서 semantic한 태그다. 이런 표현을 한다. 각각의 어떤 의미를 가지고 있다고 할 수 있다. 그래서 그 많은 태그들을 A라는 용도에 써야 되는데 B 태그를 쓴다던가 또 B라는 용도가 분명히 있는데 A를 쓴다던가. 이렇게 잘못 써도 어떤 큰 문제가 안 나올 수도 있지만 각각의 태그들은 그 의미가 맞고 그래서 우리가 그 의미에 맞게 문서를 표현해주는게 중요하다. 화면상으로는 잘못 쓴 의미들, 의미를 다르게 썼다 해도 화면에서는 표시가 되지만 사실은 시각장애인분들이라던가 인터넷을 쓰기 어려운 분들이 장애가 좀 있으신 분들 인터넷 쓸 때는 가끔씩은 어떤 HTML 코드를 읽어서 음성으로 그 태그들을 다 말을 해준다. 근데 이제 그렇게 될 때는 기계가 그 태그 그 자체의 의미를 가지고 있는 것, 약속된 의미를 그대로 읽어줄 때 다른 의미로 쓰기 어려운 분들에게 이제 그런 것들을 읽어 줄 수 있다. 잘못 읽어줄 수 있기 때문에 스크립트 리더기 이런 것들이 있다. 그런 것들을 통해서 잘못 전달될 수 있기 때문에 우리가 태그들을 각각 의미에 맞는 게 굉장히 중요하다. 그리고 또한 검색할 때도 검색할 때 어떤 내용들을 검색기들이 구글과 같은 어떤 검색을 해주는 프로그램들이 의미에 맞는 태그에 맞춰서 그런 것들을 아, 이게 혹시 네가 찾는 이거랑 매칭 되는 것 같아라고 표현해줄 수 있기 때문에 올바른 태그들을 쓰는 게 상당히 중요하다. 오류가 안 난다고 이것저것 쓰시면 안되는 거다.

  그래서 태그들을 실제 알아보겠다. 태그는 이미지면 이미지, 어떤 리스트. 사과, 배, 귤 이런 과목 목록이다. 그러면 또 목록에 해당하는 태그가 있다. 하나씩 알아보도록 한다. html tag list라고 치면 여러개가 많이 나온다. 이런데 w3schools.com에도 이런 태그들이 나온다. Description 이래가지고 태그가 나오고 설명이 나온다. HTML 주석은 이렇게 쓴다. 문서의 어떤 기본 형태는 이렇게 표현하는구나. 하이퍼링크라고 말은 어렵지만 우리가 흔히 링크라고 한다, 또 다른 문서로 이동하기 위한 링크 이런 것들이 있고 이렇게 빨갛게 나오는 것들은 이제 최신 표준인 HTML5에서 지원되지 않는다. 아마 브라우저에서 오류는 안나지만 사용해서는 안되는 거라고 알고 있으면 된다.

  이런 태그들이 쭉 나온다. 태그들이 엄청 많다. div, 어떤 문서를 어떤 특정 영역을 정의하는 div 태그도 있고. 또 font, 어떤 색깔을 바꾸는 그런 태그도 있는데 이건 의미는 있지만 스타일을 바꾸고 있다. 이런 것들은 이제 쓰지 않는 게 좋다. 각각의 스타일은 HTML이 아니고 CSS로 표현해주는게 좋다. 이렇게 많은 태그가 있다. 여기 보면 ul. ul를 한번 찾아보자 unordered list. 순서가 없는 목록을 표현해주는 것도 아주 많이 쓰이는 ul이라는 태그도 있다. p, 문단을 얘기할 때. paragraph 할 때 p라는 태그도 있다. 한번 JS Bin에서 간단하게 태그 몇 개를 어떻게 쓰는지만 테스트를 해보겠다. 기본 형태가 이쪽에 있고 우리가 div 이렇게 해서 division, 어떤 영역을 약간 더미(dummy) 영역을 표현할 때 이렇게 한다. h1, h1 하고 탭만 하면 이렇게 완성이 된다. 모든 태그는 /해가지고 또 닫아줘야 되기 때문에. 여기 여러분들이 좋아하는 과일이 있어요라고 했다. ul 하고 이건 리스트다. 그래가지고 하나하나의 리스트들은 또 li로 또 표시를 할 수가 있다. li*4하고 탭을 치면 쭉 나온다. 사과 다음에 바나나. 그 다음에 메론, 귤 이런 것들을 리스트를 쭉 쓸 수 있다. 바나나는 어떤 링크가 있다. 사과는 어떤 링크가 있다. 사과, a 태그로 이렇게 또 표시를 할 수가 있다. 사과니깐 www.apple.com, apple.com 표시를 했다. 저거를 이렇게 넣어주면 된다. 그래서 사과, apple.com. 한번 들어가 보자, 사과가 있는지 이렇게 해서 우리가 HTML 기본 형태들을 표시할 수 있다.

  이게 이제 계층적인 구조를 가지고 있다. 물론 다 이렇게 여기 보면 div 아래 h1이 있고, ul 아래 li가 있고, 그래서 ul은 여기서 다시 닫아주고. 이렇게 표현하면 된다. 여러 가지 태그들이 많이 있다. 여러 가지를, 거의 방법은 똑같다. 이런 식으로 한번 사용을 해서 기본적인 HTML 페이지를 만들 수 있다. HTML 태그에 대해서 간단히 알아봤다.