1. CSS란?
Cascading Style Sheets
HTML은 데이터를 구분해주는 정도까지만 역할을 한다. 그 데이터를 꾸며주고 모양을 만들어주는 역할은 CSS가 한다.
CSS는 단독으로 사용할 수 없고, HTML이랑 같이 사용해야 한다.
2. CSS를 적용시키는 3가지 방법
1. inline 스타일로 작성하기
html 파일에서 엘리멘트 옆에 style 속성을 이용하여 작성한다.
<div style="background: #ffffff;">
</div>
2. <style> 를 이용하여 작성하기
<head> 안에 <style> 태그를 이용하여 작성한다.
CSS문법을 사용해야 하며,
선택자 {
속성 : 속성값 ;
}
3. 외부파일을 이용하여 작성하기 ⭐️중요!!!⭐️
<head> 안에 <link> 태그를 이용하여 작성한다.
<link href=“” type=“text/css” rel=“stylesheet”>
/* " " 안에는 파일을 경로로 작성하여 준다 */
1번에 방법의 비해 2번, 3번을 많이 쓰는 이유는 선택자를 이용하여 따로 작성하였기 때문에 inline 스타일에 비해 파악하기 쉽고, 관리하기 쉽기 때문이다. 제일 많이 쓰는 방법은 3번 (외부 파일을 이용하여 작성하기) 이다.
3번을 사용하면서 코드를 작성하기 전 제일 중요한 작업이 있는데, 외부파일이 제대로 적용되는지 확인하는 과정이 중요하다.
html-body 와 CSS 파일에 직접 간단한 코드를 작성하여 확인하는 방법도 있지만
라이브 서버, 저장된 html 파일을 열어 개발자도구(검사) 의 Network 탭을 이용해서 확인하는 방법이 있다.
하단의 html 파일과 css파일에서 css파일이 빨간색이 아니면 제대로 연결됐다는 뜻이다.
'HTML & CSS' 카테고리의 다른 글
| CSS - flex box : display flex, CSS 개구리게임 (flex 게임) (0) | 2022.10.26 |
|---|---|
| CSS 선택자, CSS 속성과 속성값 (0) | 2022.10.21 |
| 일반적인 웹사이트 HTML에 자주 쓰이는 tag(태그),element(엘리먼트) (0) | 2022.10.21 |
| 2진수와 16진수 - bit(비트), byte(바이트), nibble(니블) (0) | 2022.10.21 |
| CSS - 속성과 속성값 (0) | 2022.10.17 |