[SeSAC x 코딩온] CSS (Position속성, Transform속성, Transition속성, Display속성, CSS Flex)

타다닥·2023년 9월 20일

html, css

목록 보기

3/3

CSS 복잡한 속성 - Position

레이아웃을 잡을 때 중요하게 사용된다.
위치를 잡아주는 역할을 한다.
속성값을 함께 지정해줘야 한다. 값만 주었을 때는 안움직이고 자기 자리에 있으려 한다!
position 의 속성값으로는 이렇게 있다.
- static : 정적 위치 지정 방식
- relative : 상대 위치 지정 방식
- absolute : 절대 위치 지정 방식
- fixed : 고정 위치 지정 방식
아래와 같이 적용시킬 수 있다.

.box-orange {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: orange;
}

position 과 함께 사용되는 속성들이 있다. position 이 정의되어야 사용이 가능하다!

속성	설명
position	HTML 요소의 위치를 결정하는 방식을 설정
top	위치가 설정된 조상 요소의 위로부터의 여백을 설정
right	위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정
bottom	위치가 설정된 조상 요소의 아래로부터의 여백을 설정
left	위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정
z-index	겹쳐지는 요소들이 있을 떄 스택(stack)의 순서를 설정

💡 top과 bottom, left와 rights는 둘 중 한가지만 사용하는 것이 좋다. 값은 음수로도 설정이 가능하다. (-20px 과 같은 형태로.)

💡 에는 기본적으로 마진이 존재하는데 이렇게 없앨 수 있다. body {margin: 0;}

1️⃣ position - static

정적 위치 지정 방식
기본값이다. (좌표값이 없다.)

2️⃣ position - relative

상대 위치 지정 방식
원래 자신이 있던 위치를 원점으로 움직인다. 원래 요소의 공간이 남아있다.
- 원래 위치(정적 위치 지정방식일때 결정되는 위치)를 기준으로 상대적으로 배치.

3️⃣ position - absolute

절대 위치 지정 방식
공중에 붕 뜬다고 생각하자. 요소의 원래 공간은 사라진다.
배치 기준을 상위 요소에서 찾는다. 즉 부모요소를 기준으로 배치한다.
- 부모 요소가 static이 아닌걸 찾아간다. static이 아닌 첫번째 상위요소를 찾아가는 것. position속성이 relative 인것.
- 부모가 없다면 조상, 조상요소도 없다면 HTML 문서의 <body> 를 기준으로 위치를 잡는다.
그래서 부모요소가 있어야한다. 요소를 감싸는 <div>를 만들고, 부모요소에 보통 relative 를 준다.
요소의 내용은 겹쳐서 출력 가능. 특정개체와 관계없이 겹쳐서라도 배치가 된다.

4️⃣ position - fixed

고정 위치 지정 방식
부모 중 어느 요소가 relative 인지 신경쓰지 않는다.
화면의 시작부분을 기준으로 잡는다. (브라우저 창의 왼쪽 위 꼭지점이 원점인 것)
- 각 브라우저 상하좌우로부터 해당 요소가 얼마나 떨어져있는지를 결정한다.
스크롤을 무시한다. 웹 페이지가 스크롤 되어도 항상 같은 곳에 위치한다.

5️⃣ position - sticky

sticky : 끈적끈적하다는 형용사
스크롤을 계속해서 따라오는 html요소를 만들 수 있다.
- 가만히 있을 때는 position: static; 처럼 작용하다가
- 스크롤을 하면 position: fixed; 처럼 작용하는 것.
fixed와 다른점은, 부모 요소 안에서만 고정되어 스크롤을 따라 움직인다.

참고 링크

6️⃣ 요소 쌓임 순서(stack order)와 z-index

어떤 요소를 사용자와 더 가깝게 놓을지를 결정해준다. (숫자가 높을수록 위로!)
첫번째 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위로 올라온다.
첫번째 두번째 조건이 같은 경우, HTML의 다음 구조일수록 위로 올라온다.
position 값이 주어져야한다. 단position: static; 에는 적용되지 않는다.
position 값이 겹치면 나중에 쓰인게 제일 위로 올라온다.

CSS 복잡한 속성 - Transform

요소에 효과를 적용시켜준다. 특정한 값이라기보다 함수를 제공한다고 보자.
perspective 속성은 무시하는것이 기본값이다. (원근값)
변환효과는 여러개 적용시킬 수 있다. 띄어쓰기로 구분해준다.
- transform: 변환함수1 변환함수2 변환함수3 …; 의 형태로 사용한다.
그리고 작성해야 하는 순서도 있다.
- transform: 원근법 이동 크기 회전 기울임 의 순서로 작성해준다.

skew : 기울기
- {transform: skewX(10deg);} 의 형태..
- X, Y축 둘 다 하고 싶다면? {transform: skew(10deg, 20deg);}
scale : 확대
- {transform: scaleX( 2.0 );} 의 형태.
rotate : 회전
- {transform: rotate(10deg);} 의 형태.
translate : 이동
- {transform: translate( 50px, 50**%** )} 의 형태.
- 오른쪽으로 50px, 아래쪽으로 50% 이동하겠다는 의미.

CSS 복잡한 속성 - Transition

요소가 전환하는 동안(시작과 끝)의 효과를 적용시켜준다.
{transition: 속성명 지속시간 타이밍함수 대기시간;} 의 형태로 작성한다.
- 각각 property, duration, timing-function, delay
- 단축형으로 작성할 때 지속시간은 필수 포함 속성이다!

transition - property
- 전환효과를 사용할 속성 이름을 지정해주어야한다.
- 기본값은 모든 속성에 적용시킨다는 all 이다.
transition - duration
- 전환효과의 지속시간을 지정해준다. 지속시간(s) 의 형태.
- 기본값은 전환효과가 없는 0s 이다.
transition - timing-function
- 전환효과의 타이밍(Easing)함수를 지정해준다.
- 기본값은 모든 속성에 적용시킨다는 ease 이다.
  
  출처: 코딩온 교육자료
transition - delay
- 전환효과가 몇 초 뒤에 시작할지 대기시간(s)을 지정해준다.
- 기본값은 대기시간이 없는 0s 이다.

CSS 복잡한 속성 - Display

inline
- 인라인요소는 요소끼리 한 줄에, 바로 옆에 위치할 수 있다. (콘텐츠 크기만큼 차지)
- 대표적으로 <span>, <a> 태그가 있다.
- 인라인요소는 width, height, margin(top, bottom) 의 속성들이 적용되지 않는다. 애초에 인라인요소는 본인 크기만큼만 공간을 차지하기 때문!
block
- block은 한 줄 전체를 차지한다. 즉 바로 옆에 다른 요소들을 붙여넣을 수 없다.
- 대표적으로 <div>태그가 있다.
- display속성이 block이라면 전 후 줄바꿈이 생기며, 다른 요소들을 다른 줄로 밀어내게 된다.
- width, height, margin(top, bottom) 의 속성들이 적용이 가능하다.
inline-block
- inline과 block의 특징을 합쳐놓은 걸로 생각하자.
- inline처럼 한 줄에 다른 요소들과 함께 배치 될 수 있으면서 + width, height, margin(top, bottom) 과 같은 속성들의 적용이 가능해진다.
- 즉 inline의 성질을 가지면서 사용자가 원하는대로 꾸밈이 가능해진 것.
- display: inline-block; 의 형태로 지정해주면 된다.
flex
- 아래에서 더 자세히 알아보자!

Flex

레이아웃 배치와 관련된 기능이다.
Flexible Box, Flexbox라고 부르기도 한다. 주로 부모요소에 작성한다.
부모요소는 Flex Container, 자식요소는 Flex Item이라고 부른다.
- 컨테이너는 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각 아이템이 어떤 형태로 배치될지를 설정해준다.

기본적은 구조는 이렇게 된다.

<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

아이템들을 가로방향으로 배치시키고,
display: flex; 로 지정해주어야 하며, 이 상태여야 아래 속성들이 적용된다.
```
.container {
display: flex;
flex-direction: row-reverse
}
```

▶️ 얘네들은 Flex Container에 적용가능하다!

flex-direction
- 주축을 설정한다.
- 기본값은 row , 행 축을 기준으로 (좌-우) 정렬된다.
- row-reverse 행 축을 기준으로 (우-좌) 정렬.
- columm 열 축을 기준으로 (위-아래) 정렬.
- columm-reverse 열 축을 기준으로 (아래-위) 정렬.
flex-wrap
- Flex Items 의 묶음 (줄 바꿈) 여부를 설정해준다.
- 기본값은 nowrap , 묶음(줄 바꿈)이 없다. 넘치면 그냥 빠져나간다.
- wrap 여러 줄로 묶음.
- wrap-reverse wrap의 반대 방향으로 묶음.
justify-content
- 주 축의 정렬 방법을 설정해준다.
- 기본값은 flex-start, flex items를 시작점으로 정렬.
- flex-end flex items를 끝점으로 정렬.
- center flex items를 가운데 정렬.
- space-between 각 flex items 사이를 균등하게 정렬. 제일 멀어지게한다고 생각.
- space-around 각 flex items의 외부 여백을 균등하게 정렬.
- space-evenly 각 flex items을 제외하고 보여지는 화면의 여백을 전체적으로 동일하게 하겠다.
  
  이미지 출처:https://studiomeal.com/archives/197
align-items
- 교차 축의 한 줄 정렬 방법 (수직방향으로 어떻게 할건지)
- 기본값은 stretch , flex items를 교차 축으로 늘림.
- flex-start flex items를 각 줄의 시작점으로 정렬.
- flex-end flex items를 각 줄의 끝점으로 정렬.
- center flex items를 각 줄의 가운데로 정렬.
- baseline flex items를 각 줄의 문자 기준선에 정렬
align-content
- 교차 축의 여러 줄 정렬 방법(아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬을 결정해준다.)
- 기본값은 stretch , flex items를 시작점으로 정렬.
- flex-start flex items를 시작점으로 정렬.
- flex-end flex items를 끝점으로 정렬.
- center flex items를 가운데 정렬.
- space-between 각 flex items 사이를 균등하게 정렬.
- space-around 각 flex items의 외부 여백을 균등하게 정렬.

도움받은 링크

💬

구조를 생각하면서 만들어가는 것이 중요하다고 느꼈다. 사람을 예시로 생각했을때 얼굴, 눈, 코, 상체, 하체를 각각 만들기보다 눈과 코는 <얼굴>안에 넣어서 만들어주어야한다. <얼굴>자체는 함께 움직여야 하기 때문. 나중에 수정하기 편하고 눈에 들어오기도 편하게 처음부터 잘 쌓아나가는것이 중요하다고 생각했다.
급하지 않게 신중하게 잘 보아야겠다. 천천히보면서 생각하면 왜 안되는지 어느 부분에서 실수를 했는지 보인다. 침착하게 하자 ㅠ

✏️

html, css는 제일 기초이고 여기서는 어렵지 않다는 이야기를 많이 들었다. 근데 어렵다.. 알듯말듯하다. 알 것 같은데 막상 해보려면 잘 안되고 모르겠고의 반복이다. 그래도 그 과정에서 해결되는 부분이 있으면 뿌듯함이 있어서 기분이 좋다. 근데 시간이 생각보다 많이 흘러가다보니 이런식으로 해서 언제 익숙해지고 배울 수 있을까의 막막함도 느껴진다. 하루 강의듣고 다음날 복습하면서 익히기에 바쁘다ㅠ 빨리 복습하고 배우고 예습까지 하고 싶었지만 너무너무너무 내 욕심이었다. 복습을 확실히 하자..!

타다닥

프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆

이전 포스트