-
CSS 기초 - 1 | CSS 란?프로그래밍 언어/CSS 2020. 5. 25. 13:22
CSS 란?
드디어 HTML 기초를 끝내고 CSS 기초 파트로 넘어왔다. 우선 CSS 가 뭔지는 알고 시작하자.
CSS (Cascading Style Sheets)
HTML 을 이용해 웹 페이지의 뼈대를 만들었다면, CSS 는 그 뼈대를 꾸며주는 역할을 한다.CSS 역시 HTML 과 마찬가지로 프로그래밍 언어 라고는 할 수 없다. 또한 HTML 뼈대를 꾸며주는 스타일 역할을 하기 때문에 HTML 파일 없이는 아무런 역할도 하지 못한다.
HTML 에 CSS 적용시키기
HTML 에 CSS 스타일을 적용시키는 방법은 크게 3가지가 있다. 각각의 방법을 하나씩 살펴보자.
1. 인라인 방식
<p style="color: red;">Hello!</p>HTML 태그에 style 속성 을 추가해 해당 태그에 스타일을 적용시키는 방법.
2. 내부 스타일 시트
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Practice</title> <style> p { color: red; } </style> </head> <body> <p>Hello!</p> </body> </html>HTML 파일 내부에 style 태그를 만들어 스타일을 적용시키는 방법.
3. 외부 스타일 시트
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Practice</title> <link rel="stylesheet" href="style.css" /> </head> <body> <p>Hello!</p> </body> </html>HTML 파일의 head 부분에 link 태그를 사용하여 외부 CSS 파일을 연결하여 스타일을 적용시키는 방법.
우리는 이 3가지의 방법 중 외부 스타일 시트 를 연결하는 방법을 사용할 것이다.
개인적으로 각 파일마다 파일에 맞는 형식을 일관되게 사용하는 게 코드 관리성에 있어 좋다고 생각하기에, HTML 파일 내부에 CSS 스타일을 작성하는 일은 웬만해서는 없을 것이다. 대신 따로 CSS 파일을 만들어 HTML 파일과 연결해줄 것이다.
CSS 파일 만들기
이제 실제로 CSS 파일을 한번 만들어보자. 우리가 저번에 HTML 공부를 할 때 사용했던 그 HTML 파일이 있는 폴더에 CSS 파일을 만들어줄 것이다. 혹시나 HTML 파일이 없다면 index.html 이라는 HTML 파일을 하나 만들어주자.
CSS 파일의 확장자는 .css 이다. 이점 참고하여 style.css 라는 CSS 파일을 위에서 말한 위치에 하나 만들어주자.
<link rel="stylesheet" href="style.css" />그리고 index.html 파일에서 link 태그를 이용하여 위와 같이 style.css 파일을 index.html 과 연결시켜 주자.
우린 link 태그를 처음 사용해보니까 rel 속성과 href 속성에 대해 간단하게 알아보자.
link 태그
해당 문서에 외부 소스를 연결할 때 사용한다.
여는 태그만 있는 형태이고 HTML 의 head 부분에만 위치할 수 있다.- rel 속성 : 현재 문서와 외부 리소스 사이의 관계를 명시한다. 필수 속성이다.
- href 속성 : 연결될 외부 리소스의 URL 을 명시한다.
만약 CSS 파일의 이름이 style.css 가 아니라면 href 속성의 값도 그에 맞춰 바꿔주면 된다.