[부스트코스] HTML

HTML?

HTML은 하이퍼텍스트 마크업 언어라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
[참고] 위키백과

 

HTML에는 태그라는 것이 존재한다.

<a>...</a> 와 같이 꺽새 형태로 이루어져있는데, HTML 태그는 많은 종류를 가지고 있고  각각의 쓰임새에 대한 정확한 의미가 있다.

'각각의 의미를 지닌다'는 것을 'Semantic'하다고 표현한다.

 

태그(tag)

태그는 그 의미에 맞춰서 사용해야 한다. 잘못 써도 화면상으로는 크게 문제가 되지 않지만, 시각장애인분들은 기계가 HTML을 태그를 일거주는 경우가 있는데 의미에 맞지 않게 사용하면 잘못 전달될 수 있다. 또한, 검색할 때 구글과 같은 검색기들이 태그의 의미를 기반으로 검색을 하기도 하기 때문에 올바른 용도에 맞게 사용하는 것을 권장한다.

 

구글에 html tag list를 검색하면 많은 태그와 설명이 나온다.

 

많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적할한 의미에 맞는 태그를 사용하는 것이 중요하다.

 

jsbin.com을 이용하면 html, css 실습을 쉽게 해볼 수 있다.

 

 

Layout을 위한 태그

'레이아웃(Layout)'이란 '배치'라는 뜻으로, HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리잡을지 결정하는 것을 말한다. 레아아웃을 구성하는 태그도 그 의미에 맞춰서 사용해야한다.

 

html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 된다.

 

 

HTML 구조설계

구조화 설계는 마치 문서를 쓴다고 생각하면 쉽다.

 

현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작한다. 즉 어떠한 화면을 보면서 그대로 구현하는 것인데 그 화면을 보면서 구조를 분석해야 한다.

 

먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리하고 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적이다.

각 영역 안의 내용 역시 여러 가지 형태일 것인데 이때마다 적절한 태그를 쓰면 된다.

 

그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가면 된다. 이때 CSS코드를 같이 구현하지 않고 HTML로 먼저 문서의 구조를 잡아나간다면 전체 뼈대가 튼튼해지기 때문에 개발 단계에서 유리하다.

 

 

class와 id 속성

ID

• 고유한 속성으로 한 HTML 문서에 하나만 사용 가능
• 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이

 

Class

• 하나의 HTML문서 안에 중복해서 사용 가능
• 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수 있음
• 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적임

 

많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 한다. (id를 사용하지 않는다던가, class만 사용한다던가)

 

 

[관련 부스트코스 강의 링크]

HTML tag - https://www.edwith.org/boostcourse-web/lecture/16669/

HTML Layout 태그 - https://www.edwith.org/boostcourse-web/lecture/16669/

HTML 구조설계 - https://www.edwith.org/boostcourse-web/lecture/16668/

class와 id 속성 - https://www.edwith.org/boostcourse-web/lecture/16670/