[부스트 코스] HTML - FE

 

 

[부스트코스] 웹 프로그래밍 강좌소개 : edwith

 

1. HTML Tags

태그란, HTML 문서를 구성하는 명령어다. 링크나 이미지, 목록, 제목 등 HTML 을 구성하는 것들에 태그를 단다. 

 

태그의 종류는 매우 많기 때문에, 구글링해서 참고할 수 있다.

 

https://www.w3schools.com/TAGS/default.ASP 를 보면, 태그들이 나와있다. 

 

2. HTML Layout 태그

레이아웃을 구성하는 태그에는 다음과 같은 것들이 있다.

• header
• section
• nav
• footer
• aside
• article

이들은 각각 다음과 같이 구성된다.

 

사실 이름만 저렇지, div 랑 똑같이 처리되기는 한다. 위의 레이아웃 태그들은 HTML5 부터 나와서 IE 낮은 버전과의 호환성 때문에, 네이버 웹페이지를 보면 이런 레이아웃 태그들을 안 쓰고, div 에 footer, header등의 id 를 부여한 것을 볼 수 있었다. 하지만 모바일 버전에서는 이 레이아웃 태그들을 썼더라. 

3. HTML 구조설계

 

레이아웃 연습을 해 보았다. 

 

코드는 아래와 같다. header, section 2개, footer 로 나누었다.

4. class 와 id 속성

CSS 를 입히기 위해, HTML 에 속성을 부여한다. 두가지가 있는데,

 

id 는 identifier 의 약자로 아주 고유한 속성이고, 한번만 쓴다.

class 는 하나의 HTML 안에 중복하여 여러 군데에 같이 쓸 수 있다. 

 

 

 

참고 자료 :

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.developer.com%2Flang%2Funderstanding-the-proper-way-to-lay-out-a-page-with-html5.html&psig=AOvVaw0mHQjQUIdFP1EaKbsPj_58&ust=1581046833684000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCNilk9KAvOcCFQAAAAAdAAAAABAD

리디렉션 알림