이번 장에서는 HTML 파일에 CSS를 적용하는 방법에 대해 알아보겠습니다!
들어가기에 앞서, HTML에 CSS를 적용하는 방법은 3가지가 있는데,
첫 번째는 태그 안에 style 속성을 넣어 적용시키는 방법
두 번째는 <style> 태그 안에 기입해서 적용시키는 방법
세 번째는 CSS파일을 작성해 HTML 파일에 연결하는 방법
이렇게 총 3가지가 있습니다.
우리는 3가지 방법 중 가장 효율적이고 많이 사용하는 방법인 세 번째 방법을 채택하여 배워보겠습니다.
먼저, Visual Studio Code를 이용해 HTML 파일을 하나 작성합니다.
< html 공부 > 2장. HTML의 기본 구조 및 태그 기능
저번에 HTML의 정의에 대해 간략하게 알아봤다면, 이번에는 HTML의 기본 구조 및 각 태그의 기능에 대해 알아보겠습니다! 위의 사진은 Visual Studio Code를 이용해 작성한 HTML의 기본 틀입니다. 작성 방
introducing-turtle.tistory.com
HTML 파일을 작성했다면, 이제 CSS 파일을 만들어야 하는데 CSS 파일은 이런 식으로 만드시면 됩니다!
위의 그림처럼, 파일에 +가 되어 있는 버튼을 클릭해서 만드셔도 되고,
파일이 있는 부분에서 우클릭 한 다음 New file을 클릭해 만드셔도 됩니다.
단, 주의해야 할 점이 있는데 그건 반드시 원하는 파일명.css 로 만들어야 된다는 점입니다!
(이렇게 하지 않을 시, 확장자명이 CSS가 아니므로 실행이 안됩니다!)
이 과정까지 마쳤다면, 이제 CSS 파일을 HTML 파일에 <link> 태그를 이용해 적용시킬 것입니다.
위의 코드처럼 작성하시면 되는데, 그전에 link내에 있는 rel, href에 대해 알고 있어야 작성할 수 있겠죠?
◈ rel
-> relationship의 약자로, 관계를 의미합니다.
즉, 지금 연결되는 파일이 html과 어떻게 이어지는지 알려주는 것입니다.
◈ href
-> 하이퍼링크가 가리키는 URL로, 우리가 연결할 파일을 의미합니다.
즉, rel은 연결되는 파일이 무슨 일을 하는지 알려주는 것이고,
href는 우리가 연결할 파일이 무엇인지 알려주는 것입니다.
그러니 여러분은
<link rel="stylesheet" href="만든 css 파일명.css" >
이렇게 작성하시면 됩니다!
축하합니다! 여러분은 처음으로 HTML파일에 CSS를 적용시켰습니다!
이상, HTML파일에 CSS를 적용시키는 방법에 대해 알아보았습니다.
다음 장에서는 CSS를 이용해 배경색 및 글자색을 바꾸는 방법에 대해
알아보도록 하겠습니다!
'css' 카테고리의 다른 글
| <css 공부> 6장. 디스플레이 - 블록, 인라인 (0) | 2021.02.24 |
|---|---|
| <css 공부> 5장. 클래스와 아이디 (0) | 2021.02.22 |
| <css 공부> 4장. 선택자 (Selector) (0) | 2021.02.19 |
| <css 공부> 3장. 색깔 입히기 (0) | 2021.02.16 |
| < css 공부 > 1장. CSS란? (0) | 2021.02.11 |