[WEB] HTML tags

1. HTML Layout

2. ID, Class

ID

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

 

Class

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

3. CSS

CSS의 구성

span {

color : red;

}

• span : selector(선택자)
• color : property
• red : value

style을 HTML페이지에 적용하는 3가지 방법

 

1. inline

HTML태그 안에다가 적용합니다.

다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다.

 

2. internal

style 태그로 지정합니다.

구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다.

별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.

 

3. external

외부파일(.css)로 지정하는 방식입니다.

CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다.

현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 합니다.

internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만듭니다.

 

상속과 우선순위 결정

ID > CLASS > ELEMENT 순으로 반영