728x90
CSS
CSS : Cascading Style Sheets
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트
CSS 선택자
| 선택자 | 예시 | 설명 |
| # | #header{} | id |
| . | .header{} | class |
| (element) | body{} | 엘리먼트 전체 |
| * | *{} | 전체 |
| > | ul > li {} | ul 안에 있는 li |
| , | ul, li {} | ul 과 li |
CSS 속성
| 속성 | 속성값 | 설명 |
| display | none, block, inline, inline-block ... | 블럭형태, 인라인형태를 설정 |
| margin | a, b, c, d; | 블록 바깥 여백(간격 띄울 때) |
| padding | a, b, c, d ; | 블록 내부 여백(간격 띄울 때) |
| float | right, left | 블럭이 기본 틀에서 빠져서 텍스트나 인라인 요소가 그 주위를 감쌀 수 있게 배치 함을 지정 |
| color | color , #000000 | 글자 색 지정 |
| font-size | px, pt ... | 글자 크기 지정 |
| background | color , #000000 | 배경 색 지정 |
| weight | px; | 블럭 너비 설정 |
| height | px; | 블럭 높이 설정 |
| box-sizing | content-box, boder-box | 박스의 크기 결정 |
| list-style | square, none ... | 리스트 스타일 지정 |
CSS 문법
선택자 {
속성 : 속성 값 ;
}
CSS 적용 3가지 방법
- style 태그 사용
<head> 에서 <style> 태그 사용 후 문법에 맞춰서 사용 - inline - style 사용
엘리멘트 옆에 속성 style 로 작성한다.
<div style="background: blue; width: 200px; height: 200px;" ></div> - 외부 파일 사용
<head> 에서 <link> 태그를 이용하여 사용
<link href ="경로" type ="text/css" rel="stylesheet"> 가 기본 문법
경로엔 상대경로, 절대경로가 있음.
상대경로 : 내 파일 기준으로 찾는 경로
절대경로 : 처음부터 파일 위치까지 적는 것. (C: 부터 쭉!!)
반응형
'HTML & CSS' 카테고리의 다른 글
| 일반적인 웹사이트 HTML에 자주 쓰이는 tag(태그),element(엘리먼트) (0) | 2022.10.21 |
|---|---|
| 2진수와 16진수 - bit(비트), byte(바이트), nibble(니블) (0) | 2022.10.21 |
| CSS - 속성과 속성값 (0) | 2022.10.17 |
| CSS - position (블럭 위치조절 3가지 방법) (1) | 2022.10.13 |
| HTML (0) | 2022.10.11 |