CSS = Cascading Style Sheet
HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어
CSS 기본 문법
- 단일 속성 지정
선택자 { 속성: 값; }
- 다중 속성 지정
선택자{ 속성: 값; 속성: 값; 속성: 값; 속성: 값; }
CSS 사용 방법
- HTML 태그 속성에 입력
- <style> 태그에 입력
- CSS 파일을 만들어서 불러오기
HTML 태그 속성에 입력
<a style="background-color:#ffee55; color:#36e52k;">태그에 CSS 속성이 바로 기록되어 있어, 별다른 지정이나 연결이 필요하지 않음
하지만 태그가 많아질수록 html파일의 가독성이 떨어지며, 수정할때 태그를 직접 찾아야하고
한번에 하나씩 수정해야해서 유지보수에 비효율적<style> 태그에 입력
<head> <style> .listup{ color:red; border: 1px solid gray; } </style> </head> <body> <div class="starter"></div> <div class="listup"></div> <div class="closer"></div> </body>태그와 CSS 속성이 html 내에서 분리되어 있어
어떤 태그에 CSS 속성을 적용할지 연결해 주어야함.CSS 파일을 만들어서 불러오기
html파일
<head> <link href="./index.css" rel="stylesheet"/> </head> <body> <div class="starter"></div> <div class="listup"></div> <div class="closer"></div> </body>css 파일
.listup{ color:red; border: 1px solid gray; }태그와 CSS 속성이 파일로 분리되어있어
어떤 태그에 CSS속성을 적용할지 연결해 주어야함.
CSS 선택자
2번과 3번 방식을 사용하려면 태그와 CSS를 연결해줄 필요가 있는데
이때 사용하는 선택자
하나의 html 파일에서 id는 중복이안됨, class는 중복이 가능함
이외에도 많지만 가장 많이 쓰이는 4가지
