CSS 기초 이론 정리

 

#1. 의미, 정의

- Cascading Style Sheet

 

 

 

#2. 선택자

- Selectors

1) *

=> 모든 tag의 색을 남색으로

* {
  color: navy;
}

 

2) Tag

=> li 라고 적으면 <li> 태그에 적용

li {
  color: brown;
}

 

3) #id

=> #input_password 라고 적으면 해당 id를 가진 태그에 적용

#input_password {
  color: red
}

 

4) .class

=> .red 라고 적으면 해당 class 명을 사용하고 있는 태그에 적용

.red {
  width: 120px;
  height: 80px;
  background: red;
}

 

5) Tag : state

=> button : hover 라고 적으면 버튼 위로 마우스를 hover 한 상태인 경우 적용

button:hover {
  color: green;
  background: yellow;
}

 

6) [ ]

=> 특정 태그가 [ ] 속의 attribute를 가지고 있거나  attribute의 값이 해당되면 적용

a 태그에 href attribute 가 있거나  href attribute 의 값이 해당되면 적용

//해당 속성이 있으면 적용
a[href] {
  color: red;
}

//해당 속성의 시작값이 n 이면 적용
a[href^="n"] {
  color: blue;
}

//해당 속성의 마지막 값이 .com 이면 적용
a[href$=".com"] {
  color: red;
}

 

7) ,

=> 여러 개의 태그에 대해 동시 적용

div, span, section, h1 {
  margin: 10px;
  width: 50px;
  height: 50px;
  background: pink;
  border-radius: 50%;
}

 

 

 

#3. display & position

1) Display
1-1) inline
- 내용물에 따라 길이가 달라지는 display
- 한 줄에 여러 개 진열가능한 각각의 물건

1-2) inline-block
- block 의 형태지만 가로로 배치가능한 block display
- 한 줄에 여러 개 진열가능한 상자

1-3) block
- 한 줄에 하나씩만 배치가능한 block display
- 한 줄에 하나만 진열가능한 상자

 

1-4) flex

- flexible 한 박스를 구현. 개념 정리는 아래 링크를 참조.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

2) Position

2-1) position: relative;

=> 자신이 원래 있었던 위치에서 이동

2-2) position: absolute;

=> 자신이 담겨 있는 상자가 기준점이 되어 거기서 이동

2-3) position: fixed;

=> 자신이 담겨 있는 상자에서 벗어나 body 가 기준점이 되어 거기서 이동

2-4) position: sticky;

=> 스크롤해도 원래 있는 자리에 그대로 붙어 있기

2-5) position: static;

=> default

 

 

 

#4. Flexbox

- flexbox 개념을 공부하고 

아래 사이트에 가서

개구리 게임을 즐기면서

배운 것을 활용해 보자.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

Bye ~