2022. 11. 14. 20:34ㆍWEB개발/TIL
CSS(Cascading Style Sheet=연속적인 스타일시트)
: 웹 페이지를 디자인하기 위해 사용하는 언어
CSS를 사용하는 이유? 시각적 표현을 위해
CSS 참조 방식
1) 외부 스타일 시트(External Style Sheet)
: CSS확장자를 가진 스타일시트 파일을 생성, html문서에 연결해 사용
2) 내부 스타일 시트(Internal Style Sheet)
: html문서 내에서 <head>태그 내부에 <style>태그를 사용해 CSS를 정의하는 방식
▼ style태그를 head태그에 저장하는 이유?
html 문서는 위에서 부터 아래 순서로 읽음
따라서 style 태그를 우선적으로 읽게 하여 속성이 빠르게 적용되도록 하기 위해 head태그에 위치시킴
3) html태그 내의 스타일 지정(Inline Styles)
: html태그 안에 style속성을 사용해 정의하는 방법
수정이 간편하며 직관적임.
CSS작성법
선택자 {프로퍼티(속성): 값;} //선택자의 프로퍼티를 α값으로 변경하겠다는 의미CSS에서 많이 사용하는 속성
- color, background-color
- font-size, font-weight(폰트 굵기), font-family(글꼴 설정), font-style(글자모양; 기울임꼴 등)
- width, height
- border
- margin, padding: 여백 지정
border를 기준으로 안 쪽 여백이 padding, 바깥 쪽 여백이 margin
CSS 선택자
1. 단일 선택자
1) 전체 선택자: 모든 요소(=모든 태그)를 선택
# 폰트 설정할 때 빈번히 사용
* { color: red; }2) 태그 선택자: 태그 이름이 α인 요소 선택
li { color: red; }3) class 선택자: class속성의 값이 α인 요소 선택
.orange { color: red; }
<li class="orange">오렌지</li> //선택
<span class="orange">오렌지</span> //선택
<span class="lemon">레몬</span> //미선택4) id 선택자: id속성의 값이 α인 요소 선택
# id는 고유값, id 속성 중복 사용 시 첫 번째 코드에만 적용됨
#orange { color: red; }
#lemon { color: yellow; }
<li id="orange">오렌지</li> //선택
<li id="grape">포도</li> //미선택
<li id="orange" id="lemon">오렌지레몬</li> //orange선택자만 선택됨
2. 복합 선택자
1) 하위 선택자: 선택자 α의 하위 요소 β 선택(자식, 손자 등 자손 모두 선택)
'띄어쓰기'가 선택자의 기호
// α(선택자) '띄어쓰기' β(하위요소)
div .orange { color:red; }
<div>
<span class="orange">오렌지</span> //선택
<span>오렌지
<span class="orange">오렌지</span> //선택
</span>
<span class="lemon">레몬</span> //미선택
</div>2) 자식 선택자: 선택자α의 자식 요소 β 선택(자식만 선택)
// α(선택자) '>' β(자식요소)
div > .orange { color: red; }
<div>
<span class="orange">오렌지</span> //선택
<span>오렌지
<span class="orange">오렌지</span> //미선택
</span>
</div>3) 인접 형제 선택자: α태그 다음에 오는 형제 β태그 중 첫 번째가 β태그인 경우 속성 적용
div(α태그) + p(β태그) { }4) 일반 형제 선택자: α태그 다음에 오는 형제 β태그 모두 선택
div(α태그) ~ p(β태그) { }5) 가상 선택자
α:active { }: 활성화 했을 때(클릭하는 순간 보여지는 속성)
α:hover { }: 커서를 올렸을 때
α:focus { }: 내가 입력할 수 있는 상태가 됐을 때(입력창을 눌렀을 때)
α:link { }: 방문하기 전 상태
α:visited { }: 방문한 후 상태
// 예시
div {width:100px; height:100px; background-color:yellow;}
div:hover{cursor:pointer; background-color:blue} //div태그에 커서를 올렸을 때
p:active { color:red;} //p태그를 활성화 했을 때(클릭 했을 때)
input:focus{background-color:blue} //내가 입력할 수 있는 상태가 됐을 때(ex입력창을 눌렀을 때)
a:link{color:yellow} //작성한 주소에 방문하기 전 상태
a:visited {color:green} //작성한 주소에 방문한 후 상태α:first-child = 선택자α가 형제 요소 중 첫째라면 선택
ex) α β:first-child { }: α태그의 첫 번째 태그가 β태그 일 때 속성이 적용됨
α태그의 첫 번째 태그가 γ태그라면 속성이 적용되지 않음
α:last-child = 선택자α가 형제 요소 중 막내라면 선택
α β:nth-child(n) = α태그의 β태그가 형제 요소 중 n째라면 선택
α:not(β) = 선택자β가 아닌 α 요소 선택
// α:not(β) { }
.firuts *:not(span) { color:red; }
<div class="firuts">
<span>딸기</span> //미선택
<span>수박</span> //미선택
<div>오렌지</div> //선택
<p>망고</p> //선택
<h3>사과</h3> //선택
</div>
CSS 선택자 우선 순위?
!important > inline styles > id 선택자 > class/속성/가상 선택자 > tag 선택자 > 전체(*) 선택자 순
>> tag 선택자가 가장 최근에 명령됐다 하더라도 그 태그를 포함하는 class나 id 선택자가 앞에 있으면 묻힘
(class 혹은 id 정의 값으로 값이 나옴)
'WEB개발 > TIL' 카테고리의 다른 글
| CSS 속성(transform, transform-origin) (0) | 2022.11.14 |
|---|---|
| CSS 속성(position, z-index) (0) | 2022.11.14 |
| 상대경로와 절대 경로 (0) | 2022.11.14 |
| HTML 기초와 여러가지 태그 (0) | 2022.11.14 |
| git과 github (0) | 2022.11.14 |