HTML_CSS/HTML & CSS
Codeit_CSS 파일 연결과 스타일을 적용하는 다양한 방법
AngeRay
2021. 5. 25. 18:35
CSS 파일 연결과 스타일을 적용하는 다양한 방법
프로그래밍을 할 때 반복적인 코드는 되도록 피하는 것이 좋다.
반복적인 코드 작성을 피하기 위해 CSS를 style 태그안에 작성하는 것이 아닌 CSS 파일을 만든다.
우선 CSS 파일들을 모아 놓을 수 있는 폴더를 하나 만든다.
CSS 폴더 안에 CSS파일명.css 으로 작성한다.
확장자는 .css 이다.
HTML 파일과 CSS 파일을 연결시켜 주려면 <link> 태그를 사용해야 한다.
<link> 태그는 <head> 태그 안에 작성한다.
<link href="css/style.css" rel="stylesheet" >
- href 속성은 연결시켜 줄 파일의 주소를 써준다.
- rel(relationship) 속성은 이 페이지와 이 파일과의 관계를 알려준다.
- 즉 CSS 파일은 HTML 페이지의 stylesheet 이다.
스타일을 적용하는 다양한 방법
HTML 코드에 스타일을 입히는 방법은 세가지가 있다.
<style> tag를 활용 하거나,
<html>의 본문인 <body> 안의 본문에 style 속성사용(비추천, element style),
외부 CSS 파일 생성 후 <link> tag 사용,
이런 여러가지 방법 중에서 외부 CSS 파일에 스타일을 쓰고 HTML 코드에서 <link> tag로 연결해주는 것이 가장 좋은 방법이다.
이유는 정돈의 목적, 반복피함 이 있다.
;이 마침표 역할을 한다.