[새싹X코딩온] 풀스택 웹 개발자 과정 2주차 회고 | CSS(2)

Sohee Kwon·2023년 9월 22일

[SeSAC] 풀스택 웹 개발자 과정

목록 보기

4/17

3. CSS 복잡한 속성

3-1. position

📢 position은 HTML 요소의 위치를 결정하는 방식을 설정함

💡 아래의 속성은 position 속성이 정의되어 있어야 사용 가능!

top : 위치가 설정된 조상 요소의 위로부터 여백을 설정
right : 위치가 설정된 조상 요소의 오른쪽으로부터 여백을 설정
bottom : 위치가 설정된 조상 요소의 아래부터 여백을 설정
left : 위치가 설정된 조상 요소의 왼쪽으로부터 여백을 설정
z-index : 겹쳐지는 요소들이 쌓이는 스택의 순서를 결정함

✔️ static : 기본 위치로, 정적 위치 지정 방식

✔️ relative : 원래 자기 자리를 기준으로 배치

✔️ absolute : position이 있는 상위 요소 기준으로 배치

✔️ fixed : 뷰포트(브라우저)를 기준으로 배치되며 스크롤을 하여도 같은 위치에 고정되어있다. 주로 내부바에 많이 사용된다.

✔️ sticky : 일반적으로는 기본적인 위치(static)와 같은 형식으로 배치되며, 스크롤을 하면 해당 요소의 부모 요소 공간 내에서 fixed처럼 스크롤을 따라온다.

3-2. transform

📢 요소에 이동, 회전, 확대/축소, 비틀기 효과를 부여하기 위한 함수를 제공

✔️ skew : 기울기

ex) transform: skew(10deg, 10deg)

✔️ rotate : 회전

ex) transform: rotate(10deg)

✔️ translate : 이동

ex) transform: translate(10px, 10px)

✔️ scale : 크기

ex) transform: scale(1.5)

✔️ perspective : 원근법

ex) transform: perspective(150px)

💡 transform 한 번에 사용할 때 순서!

transform: 원근법 이동 크기 회전 기울임;

3-3. transition

📢 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

transtion: 속성명 지속시간 타이밍함수 대기시간;

✔️ transition-property(속성명) : 전환 효과를 사용할 속성 이름을 지정

all 모든 속성에 적용
속성이름 전환 효과를 사용할 속성 이름 명시

✔️ transition-duration(지속시간) : 전환 효과의 지속시간을 지정 [필수]

0s 전환 효과 없음
시간 지속시간(s)을 지정

✔️ transition-timing-function(타이밍함수) : 전환 효과의 타이밍(Easing) 함수를 지정

ease 느리게 - 빠르게 - 느리게
linear 일정하게
ease-in 느리게 - 빠르게
ease-out 빠르게 - 느리게
ease-in-out 느리게 - 빠르게 - 느리게

✔️ transition-delay(대기시간) : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

0s 대기시간 없음
시간 대기시간(s)을 지정

3-4. display

(1) inline / block

✔️ inline : display 속성이 inline인 엘리먼트는 줄바꿈없이 한 줄로 나열된다. 그리고 width, height, margin(top, bottom)이 적용되지 않는다.

✔️ block : display 속성이 block인 엘리먼트는 줄바꿈이 들어가 다른 엘리먼트을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.

(2) inline-block

✔️ inline-block : inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.

(3) flex

📢 flex는 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것으로 요소의 크기와 순서를 유연하게 배치할 수 있습니다.

✔️ flex-direction : 주 축을 설정

row 행 축 (좌 -> 우)
row-reverse 행 축 (우 -> 좌)
column 열 축 (위 -> 아래)
column-reverse 열 축 (아래 -> 위)

✔️ flex-wrap : flex items 묶음(줄 바꿈)여부

wrap 여러 줄로 묶음
wrap-reverse wrap의 반대 방향으로 묶음

✔️ justify-content : 주 축의 정렬 방법

flex-start flex items를 시작점으로 정렬
flex-end flex items를 끝점으로 정렬
center flex items를 가운데 정렬
space-between 각 flex item 사이를 균등하게 정렬
space-around 각 flex item의 외부 여백을 균등하게정렬

✔️ align-items : 교차 축의 한 줄 정렬 방법

stretch flex items를 교차 축으로 늘림
flex-start flex items를 시작점으로 정렬
flex-end flex items를 끝점으로 정렬
center flex items를 가운데 정렬

✔️ align-content : 교차 축의 여러 줄 정렬 방법

stretch flex items를 시작점으로 늘림
flex-start flex items를 시작점으로 정렬
flex-end flex items를 끝점으로 정렬
center flex items를 가운데 정렬

3-5. animation

📢 애니메이션을 나타내는 css 스타일

✔️ @keyframes

애니메이션의 중간 지점마다 css 속성 값을 지정하여 세밀하게 애니메이션 조절하는 기능
keyframes로 설정되는 값
- to / from
- 0% ~ 100%

✔️ animation 속성

animation-name 이름
animation-duration 지속 시간
animation-delay 지연 시간
animation-iteration-count 반복 횟수
animation-timing-function 반복 형태
animation-direction 애니메이션 방향

단축 속성 : name duration timing-function delay iteration-count direction

.box {
	width: 100px;
    height: 100px;
    background-color: red;
    animation: movetoright 2s linear 1s 3 alternate;
}

@keyframes movetoright {
	from{
    	left: 0px;
    }
    to{
    	left: 100px;
    }
}

CSS 내용을 한 페이지에 정리하고 싶었는데 양이 너무 방대해서...🤣
html이랑 CSS는 뭔가 어렵기 보다는 정신이 없는 느낌이다(~~아직은 아는 내용이라 그런가~~)
벌써 2주차가 되었는데 단순히 똑같은 코드로 복습하지 않고
강의 내용을 바탕으로 업그레이드해서 좋은 커밋을 날리고 싶은데 그걸 어떻게 해야 할지 모르겠다...❓