css
1. css 참조 방식 및 우선순위
참조 방식
CSS 에는 인라인, 내장, 링크 방식이 있음
인라인 방식
내장 방식
링크 방식
=> 각각의 장,단점 존재 + 파일 분리 및 간결함을 위해 링크 방식 가장 많이 쓰임
우선순위
인라인 > 내장 ? 링크
인라인 가장 우선적/ 내장, 링크 방식은 늦게 쓰여진 것
3가지 모두 겹치게 된다면 가장 늦게 쓰인 것 우선적
2. 복합 선택자
하위 선택자
자식 선택자
인접 형제 선택자
일반 형제 선택자
3. 가상 클래스 선택자
첫번째 요소일 때
마지막 요소일 때
순서 지정 시
수식 역시 가능
ex) div: nth-child(2n) div: nth-child(2n+1)
특정 요소 제외할 때
input:not([placeholder]){
background-color: blue;
}4. 가상 요소 선택자
요소 앞, 뒤에 content 삽입
ex)
p:: before | after{
content: "추가할 말"
}가상요소 선택자 + 개행
5. 속성 선택자
[속성]
속성 선택자
[disabled]{
background-color: red;
}[속성="값"]
[placeholder="이름"]{
background-color: orange;
}
6. Position
left, right, top, bottom, z-index : position 지정해야 사용 가능
static
default:inline - 왼 => 오 / block - 위 => 아래
relative
원래 있어야 하는 위치 기준 top/right/bottom/left 만큼 이동
absolute
position 속성 갖는 제일 가까운 조상 기준. 없다면 body기준
=> 특정 요소 기준 삼아 top/right/bottom/left 만큼 이동
fixed
viewport(브라우저 화면 전체) 기준 특정 위치 고정: 스크롤 돼도 안 움직임
7. z-index
겹치는 요소 순서 결정
- 양수, 0, 음수 다 쓸 수 있음
- 숫자 클수록 위에 쌓임 == 가장 앞에 놓임
body > img:nth-child(1){
position: relative;
left: 200px;
top: 300px;
transform: rotateY(20deg);
transform: skewY(20deg);
z-index: 4;
}
body > img:nth-child(2){
position: relative;
left: 150px;
top: 300px;
/* transform: rotate(20deg); */
transform: skewY(20deg);
z-index: 3;
}
body > img:nth-child(3){
position: relative;
left: 80px;
top: 250px;
/* transform: rotate(30deg); */
transform: skewY(20deg);
z-index: 2;
}
8. display
display 속성은 기본적으로 block, inline 둘 중 하나
inline
- span, a, img 등: content만큼만 할당 됨
- width, height, padding, margin 사용 불가
- 개행 없이 바로 옆 배치
block
- div, p, ul, ol 등: 한 줄 다 차지
- width, height, padding, margin 사용 가능
inline-block
- block 요소처럼 크기 지정 + inline 요소처럼 줄 공유
display: none
- 요소가 차지하는 공간 역시 사라짐
visibility: hidden
- 요소만 사라짐
- 공간은 남아있음
9. flex
부모 요소에 flex 선언 시 아이템(자식) 이 가로 방향으로 배치 됨
주축(main axis)
item 배치 방향
교차축(cross axis)
주축의 수직 축
flex -direction
flex 방향 설정
-
row (default) : 수평 정렬(좌 -> 우)
-
row-reverse: 수평 정렬 (우 -> 좌)
-
column: 수직 정렬(위 -> 아래)
-
column-reverse: 수직 정렬(아래 -> 위)
justify - content
주축 아이템 배치 방법
사진 flex-direction: row 기준
-
flex-start (default): 아이템을 주축에 대해서 start지점을 기준으로 나열
-
flex-end: 아이템을 주축에 대해서 end 지점을 기준으로 나열
-
space-between: 처음과 마지막 아이템을 양 끝에 붙이고, 나머지 영역 공평하게 나눔 (가장 많이 쓰임)
-
space-around: 아이템들의 모든 여백을 공평하게 갖도록 함 (양끝 영역의 단위가 1이라면, 나머지 영역의 단위는 2)
-
space-evenly: start부터 첫 아이템의 간격, 아이템 끼리의 간격, 마지막 아이템 부터 end 까지의 모든 간격이 일정 (처음, 끝에 안 붙음)
align - items
교차축 아이템 배치 방법
사진 flex-direction: row 기준
- stretch (default): container의 교차축을 채우기 위해 늘림 :flex-items 에 width, height 값이 있다면 늘어나지 않음
- flex-start: 교차축에 대하여 시작점으로 정렬
-
flex-end: 교차축에 대하여 끝점으로 정렬
-
center: 교차축에 대하여 가운데 정렬 (flex-direction : column이면 보통 많이 씀)
- baseline: 아이템을 텍스트의 베이스라인(아래 선) 기준 정렬 */
flex - wrap
개행 처리
컨테이너(부모)가 한 줄에 아이템 다 수용 못 할 때, 줄바꿈 관련 설정
-
nowrap(default): 줄바꿈 안 함
-
wrap: 줄바꿈 함
-
wrap-reverse: 줄바꿈 하는데 아이템 역순 배치
align - content
여러 행에 대한 정렬
(조건) flex-wrap: wrap/wrap-reverse 상태에서 아이템이 두 줄 이상일 때 수직축 방향 설정함
-
align-content: stretch;
-
align-content: flex-start;
-
align-content: flex-end;
-
align-content: center;
-
align-content: space-between;
-
align-content: space-around;
-
align-content: space-evenly;
margin을 통한 가운데 정렬
부모 요소에 width 정의 되어 있어야 함
margin: 0 auto;글자 세로 가운데 정렬
줄 높이를 width와 같은 값으로 두기
line-height: 100px;-
전
-
후
div 안에 div 정가운데 배치
1) position, transform 쓰기
.outer1{
position: relative;
/* 자식 요소에 absolute 쓰려고 position 지정함 */
}
.inner1{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
/* 자신 크기의 절반만큼 - 방향 이동 */
}- flex 쓰기
.outer2{
display: flex;
/* flex-direction: column; 줘도 되고 안 줘도 됨 */
justify-content: center;
align-items: center;
}10. CSS animation
- animation-name: @keyframes 애니메이션 이름 지정
- 시작: from or 0%
- 중간: 0~100%
- 끝: to or 100%
- animation-duration: 한 사이클의 애니메이션이 얼마에 걸쳐 일어날지 결정 (단위: s)
- animation-delay: 요소(element)가 로드된 후, 언제 애니메이션을 시작할지 결정 (단위: s)
- animation-iteration-count: 애니메이션 반복 횟수 (default: 1, infinite: 무한 반복)
- animation-timing-function: 중간 상태들의 전환을 어떤 시간 간격으로 진행할지 지정 : linear, ease, ease-in, ease-out, ease-in-out 등
- animation-direction: 애니메이션 종류 후 반복될 때 진행방향 지정 : normal, reverse(반대 방향), alternate(반복될때마다 방향 바꿔줌), alternate-reverse
- alternate: from -> to 방향으로 애니메이션 진행 -> (다음 회차) to -> from 방향을 바꿔가며 반복
브라우저 기준 바닥에서 공 튀기는 애니메이션 (absolute 사용!)
.bounce-ball2{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: hotpink;
/* 브라우저(body) 기준 동작 */
position: absolute;
animation-name: bounce2;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes bounce2 {
from,to{
bottom: 0px;
animation-timing-function: ease-out;
/* 0px에서 정상속도로 시작 -> 속도 줄이며 300px 됨 */
}
50%{
bottom: 300px;
animation-timing-function: ease-in;
/* 300px에서 천천히 시작 -> 0px로 가며서 정상속도로 끝 */
}CSS 색상
[CSS 색상 참고 사이트](https://developer.mozilla.org/ko/docs/Web/CSS/color_value rgb(0-255, 0-255, 0-255))
CSS 선택자 연습 사이트
느낀 점
이 날은 CSS를 전반적으로 학습하며 꼼꼼하고 스피디하게 지식을 다졌다.
그동안 몰랐거나 헷갈렸던 부분들에 대해 확실히 짚고 넘어갈 수 있어서 유익했다.
css는 종류도 너무 많고 겹치거나 꼬일 때가 많았어서 개인적으로 복잡하고 까다롭게 느껴졌었는데 더 탄탄해진 기분이 들었다.
개인적으로는 flex 부분이 가장 복잡했고, 익숙해지려면 많이 쓰는 수밖에 없다고 생각한다.
z-index 부분도 과거에 동적인 웹페이지를 만드려 했을 때 서치하다 헷갈려서 포기했었는데 생각보다 명료하게 와닿아서 속이 시원해졌다. 시험도 끝났으니 공부를 열심히 해야겠다. 오랜만에 three.js를 다시 해볼까 한다.
