반응형
CSS 란
웹 문서의 전반적인 스타일을 미리 정해둔 스타일 시트를 말합니다. html로만 작성한다고 하면 예를 들어제목 색깔을 수정하고 싶은 경우 그 동안 작성한 모든 글의 제목 색을 다 바꿔 줘야만 합니다. 시간이 많이들겠죠? 만약 CSS로 제목 스타일을 정해놓고 썼다면 한 번만 바꿔주면 전체적으로 적용이 됩니다. 이런 이유에서 CSS를 써야만 합니다.
CSS 선언
1 | span { color : red ; } | cs |
CSS는 위와 같은 형태로 보통 이루어져 있습니다.
span : selector(선택자)
color : property(속성)
red : value(값)
CSS 적용방법
1. 인라인 스타일 (Inline)
스타일 시트를 사용하지 않고 HTML태그 내의 속성을 이용 CSS 적용. 가장 먼저 적용됩니다.
1 | <h3 style="color:blue; font-size:2em"> CSS </h3> | cs |
2. 내부스타일 시트 (Internal)
<head> 내 <style> 정의, 유지보수 어렵습니다.
3. 외부스타일 시트 (External)
외부에서 불러와 스타일 적용합니다.
1 2 3 | <head> <link rel ="stylesheet" href="style.css"> </head> | cs |
CSS 셀렉터
HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 검색할 수 있습니다.
1. tag로 지정
1 | <style> span { color : red; } </style> | cs |
2. id로 지정
1 2 | <style> #spantag { color : red; } </style> <body> <span id="spantag"> ... </span> | cs |
3. class로 지정
1 2 3 | <style> .spanClass { color : red } </style> ... <body> <span class="spanClass"> ... </span> | cs |
CSS 스타일변경
1. font 색상, 사이즈, 글꼴
1 2 3 4 5 6 | color : red; color : reba(255, 0, 0, 0.5); color : #ff0000; //16진수 font-size : 16px; font-size : 1em; font-family : "Gothic"; | cs |
CSS 배치
white-space : 스페이스와 탭, 줄바꿈, 자동줄바꿈 처리
normal : 기본 자동줄바꿈
nowrap : 줄바꿈 안함
display
block : 블록쌓이듯 배치
inline : 우측으로, 아래쪽으로
position
static : 순서대로 배치
absolute : 기준점에 따라 특별한 위치(top, left, right, bottom)
relative : 원래 자신이 위치해야 할 곳을 기준으로 이동(top, left, right, bottom)
fixed : viewport 좌측, 맨 위를 기준으로 동작
float(left, right)
관련포스트
반응형
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| CSS | 2. 구문과 적용 방법 (0) | 2020.12.14 |
|---|---|
| HTML | 6. 인라인 프레임 (iframe) 속성 (0) | 2020.12.12 |
| HTML | 4. meta 태그의 속성과 종류 (0) | 2020.12.04 |
| JavaScript | Ajax 와 Ajaxform 파일업로드 (0) | 2020.12.04 |
| HTML | 1. 기초 (0) | 2020.11.20 |
| 코드이그나이터 | 모델-뷰-컨트롤러 (MVC) (0) | 2020.11.05 |
| 코드이그나이터 | 개념 (2) | 2020.11.03 |
| PHP | 기초문법 (0) | 2020.10.20 |
댓글