CSS 적용 방법 - HTML에 CSS를 적용하는 방법 3가지

 HTML(하이퍼텍스트 마크업 언어)과 CSS(카스케이딩 스타일 시트)는 웹 페이지를 만들기 위한 두 가지 핵심 기술입니다. 간단히 말하면, HTML은 웹 페이지의 구조를 정의하고, CSS는 그 구조에 스타일을 적용합니다.

 

 

 CSS(Cascading Style Sheet)란 HTML문서에 스타일링을 해줄 디자인 정보를 가진 문서를 말한다. HTML에 CSS을 적용하는 방법은 크게 3가지로 나뉘는데 아래와 같다.

 

1. HTML 태그에 직접 스타일을 해주는 방법
2. HTML 내에  <style> 태그를 사용하는 방법
3. HTML 외부에 CSS 파일을 링크시키는 방법

위 3가지 방법을 좀 더 자세히 설명하도록 하겠다. 

 

 

1. HTML 태그에 직접 스타일을 해주는 방법

• style 속성을 사용하여 html 태그 내부에 직접 스타일을 지정한다.

 

 

2. HTML 내에  <style> 태그를 사용하는 방법

• 스타일을 head 영역으로 분리시켜서 지정한다.
• HTML5의 경우 <style>이라고만 써도 된다.

 

 

3. HTML 외부에 CSS 파일을 링크시키는 방법

• 스타일을 아예 외부 파일(.css)로 만들고, head 영역에서 link 태그로 스타일 파일을 연결한다.
• 대부분의 사이트들은 이와 같이 외부에 CSS파일을 두고 여러 HTML페이지들을 관리한다.
• link 태그에 media 타입을 사용하여 기기마다 최적의 디자인을 제공한다.

 

 

만약 위 3가지 스타일이 하나의 태그에 중복 적용이 된다면, 그 CSS 적용 우선순위는 아래와 같다.

1. 순위 : HTML 태그에 직접 스타일을 해주는 방법
2. 순위 : HTML 내에  <style> 태그를 사용하는 방법
3. 순위 :  HTML 외부에 CSS 파일을 링크시키는 방법

 

 다음 포스팅부터는 코드 하이라이트를 설치하여 코드 복사가 가능하도록 하겠다.

 

HTML / CSS 강의 둘러보기