[Course 1 ] Part1. HTML/CSS/JS로 만드는 스타벅스 웹사이트_CSS(2)

Minji Lee·2023년 5월 10일

CSS CSS 속성 패스트캠퍼스 프론트엔드

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.

목록 보기

5/9

CSS 속성

박스 모델

width, height: 요소의 가로/세로 너비

auto: 브라우저가 너비를 계산 → 요소에 이미 들어있는 속성의 값(기본값)
단위: px, em, vw 등 단위로 지정

max-width, max-height: 요소가 커질 수 있는 최대 가로/세로 너비

none: 최대 너비 제한 없음
단위: px, em, vw 등 단위로 지정

min-width, min-height: 요소가 작아질 수 있는 최소 가로/세로 너비

0: 최소 너비 제한 없음
단위: px, em, vw 등 단위로 지정

단위

px: 픽셀

%: 상대적 백분율

부모가 가지고 있는 요소의 상대적 크기

em: 요소의 글꼴 크기

rem: 루트 요소(html)의 글꼴 크기

최상위 요소 기준 → 초기값은 16px임

vw: 뷰포트 가로 너비의 백분율

vh: 뷰포트 세로 너비의 백분율

margin(외부 여백)

: 요소의 외부 여백(공간)을 지정하는 단축 속성

0: 외부 여백 없음
auto: 브라우저가 여백을 계산 → 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용
단위: px, em, vw 등 단위로 지정 → %를 margin으로 사용하는 경우는 거의 없음
음수 사용 가능

margin: 10px; /* top, right, bottom, left 모두 적용 */
margin: 10px 20px; /* top/bottom, right/left 적용 */
margin: 10px 20px 30px; /* top, right/left, bottom 적용 */
margin: 10px 20px 30px 40px; /* 각 top, right, bottom, left 적용 */

margin-방향 → margin-top, margin-bottom, margin-right, margin-left

padding(내부 여백)

: 요소의 내부 여백(공간)을 지정하는 단축 속성

0: 내부 여백 없음
단위: px, em, vw 등 단위로 지정
%: 부모 요소의 가로 너비에 대한 비율로 지정
요소의 크기가 커짐

padding: 10px; /* top, right, bottom, left 모두 적용 */
padding: 10px 20px; /* top/bottom, right/left 적용 */
padding: 10px 20px 30px; /* top, right/left, bottom 적용 */
padding: 10px 20px 30px 40px; /* 각 top, right, bottom, left 적용 */

padding-방향 → padding-top, padding-bottom, padding-right, padding-left

border(테두리 선)

border: 선-두께 선 종류 선-색상;

요소의 크기가 커짐 → 테두리 선이 늘어나며 요소의 크기가 커진다.
요소의 테두리 선을 지정하는 단축 속성
- border-width: 요소 테두리 선의 두께 → medium(기본 값), 단위로 명시하는 것이 좋음
- border-style: 요소 테두리 선의 종류 → none(기본 값), solid(실선), dashed(파선)
- border-color: 요소 테두리 선의 색상을 지정하는 단축 속성 → black(기본 값), transparent(투명)
색상 표현 방식
- 색상 이름: 브라우저에서 제공하는 색상 이름 → ex) red, tomato, royalblue
- Hex 색상코드: 16진수 색상 → ex) #000, #FFFFFF
- RGB: 빛의 삼원색 → ex) rgb(255, 255, 255)
- RGBA: 빛의 삼원색+투명도 → ex) rgba(0,0,0,0.5)
border-방향/border-방향-속성
- border-top: 두께 종류 색상;
- border-top-width: 두께;
- border-top-style: 종류;
- border-top-color: 색상;
  
  → bottom, left, right도 같음

border-radius(모서리 둥굴게)

ex) border-radius: 3px;

요소의 모서리를 둥글게 깎음 → 0(기본 값), 단위로 지정
시계 방향으로 속성 따로 적용 가능 → 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래

box-sizing(크기 계산)

요소의 크기 계산 기준을 지정
- content-box(기본 값): 요소의 내용으로 크기 계산 → 수동으로 계산해야하는 단점 존재
- border-box: 요소의 내용 + padding +border로 크기 계산
원래 지정한 박스 크기를 사용하고 싶은 경우, border나 padding에 의해 요소의 크기가 커지는 걸 막기 위해 box-sizing: border-box; 사용

overflow(넘침 제어)

ex) overflow: hidden;

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
- visible(기본 값): 넘친 내용을 그대로 보여줌
- hidden: 넘친 내용을 잘라냄
- scroll: 넘친 내용 잘라냄, 스크롤바 생성 → x축, y축 둘다 스크롤바 생성
- auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
개별 속성 존재
- overflow-x, overflow-y

display(출력 특성)

요소의 화면 출력(보여짐) 특성
- block: 상자(레이아웃) 요소 → 이미 지정되어 있는 값
- inline: 글자 요소 → 이미 지정되어 있는 값
- inline-block: 글자 + 상자 요소 → 이미 지정되어 있는 값
- flex: 플렉스 박스 (1차원 레이아웃) → 따로 지정하여 사용하는 값
- grid: 그리드 (2차원 레이아웃) → 따로 지정하여 사용하는 값
- none: 보여짐 특성 없음, 화면에서 사라짐 → 따로 지정하여 사용하는 값
- table, table-row, table-cell 등등
인라인 요소가 block 속성을 가질 수 있게 설정 가능

opacity(투명도)

ex) opacity: 0.5;

요소의 투명도 → 1(기본값, 불투명), 0~1(0부터 1사이의 소수점 숫자)
소수점 작성할 때 정수 부분 0 생략 가능 → opacity: .5;

font(글꼴)

font-size: 글자 사이즈(크기) → 16px(기본 값), 단위로 크기 지정
font-style: 글자의 기울기 → normal(기본 값, 기울기 없음), italic(이텔릭체)
font-weight: 글자의 두께(가중치) → normal, 400(기본 두께), bold, 700(두껍게), 100~900(이외 두께)
line-height: 한 줄의 높이, 행간과 유사 → normal(기본 값), 숫자(글꼴 크기의 배수), 단위로 지정
font-family: 글꼴(서체) 지정 → font-family: 글꼴1, 글꼴2, … 글꼴 계열;
- 여러 개의 글꼴 중 브라우저가 사용 가능한 글꼴 사용
- 명시해놓은 글꼴들 중 하나씩 확인해보고 모두 사용 불가능하다면 마지막 글꼴 계열 사용
- 글꼴 계열 종류
  - serif: 바탕체 계열
  - sans-serif: 고딕체 계열 → 가장 많이 사용
  - monospace: 고정 너비 글꼴 계열
  - cursive: 필기체 계열
  - fantasy: 장식 글꼴 계열

문자

color: 글자의 색상 → rgb(0,0,0) (기본 값, 검정색), 색상
text-align: 문자의 정렬 방식 → left(왼쪽 정렬, 기본 값), right(오른쪽 정렬), center(가운데 정렬), justify(양쪽 정렬)
text-decoration: 문자의 선 → none(선 없음, 기본 값), underline(밑줄), overline(윗줄), line-through(중앙 선)
text-indent: 문자 첫 줄의 들여쓰기 → 0(기본 값), 단위로 지정
- 음수를 사용하여 내어쓰기 가능

배경

background-color: 요소의 배경 색상 → transparent(투명함, 기본값), 색상으로 지정
background-image: 요소의 배경 이미지 삽입 → none(기본 값), url(”경로”)
background-repeat: 요소의 배경 이미지 반복 → repeat(이미지 수직, 수평 반복, 기본 값), repeat-x(수평 반복), repeat-y(수직 반복), no-repeat(반복 안됨)
background-position: 요소의 배경 이미지 위치 → 방향(top, botton, left, right, center), 단위로 지정
background-size: 요소의 배경 이미지 크기 → auto(이미지 실제 크기, 기본 값), 단위, cover(비율 유지, 요소의 더 넓은 너비에 맞춤), container(비율 유지, 요소의 더 짧은 너비에 맞춤)
background-attachment: 요소의 배경 이미지 스크롤 특성 → scroll(이미지가 요소 따라서 같이 스크롤, 기본 값), fixed(이미지가 뷰포트에 고정, 스크롤 없음)

배치

position: 요소의 위치 지정 기준

음수 사용 가능
position과 같이 사용하는 CSS 속성 → top, bottom, left, right, z-index
기준 → static(기준 없음), relative(요소 자신을 기준), absolute(위치 상 부모 요소 기준),fixed(뷰포트 기준), sticky(스크롤 영역 기준)
absolute, fixed가 지정된 요소는 display 속성이 block으로 변경됨

💡 요소 쌓임 순서: 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1) 요소에 position 속성의 값이 있는 경우가 위에 쌓임(static 제외)

2) 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3) 1번, 2번 조건까지 같은 경우, HTML의 다음 구조일수록 위에 쌓임

z-index: 요소의 쌓임 정도를 지정

auto(부모 요소와 동일한 쌓임 정도, 기본 값), 숫자
position값이 존재해야 적용 가능(static 제외)

플렉스(정렬)

1차원 레이아웃

[Container]

display: flex;
- display: flex;가 부여된 속성이 container이고, 그 안의 자식들이 items
- flex: 블록 요소와 같이 Flex Container 정의
- inline-flex: 인라인 요소와 같이 Flex Container 정의
flex-direction: 주 축을 설정 → row(행 축, 기본 값, 좌⇒우), row-reverse(행 축, 우⇒좌), column(열 축, 위⇒아래), column-reverse(열 축, 아래⇒위)
flex-wrap: Flex Items 묶음(줄 바꿈) 여부 → nowrap(줄바꿈없음, 기본값), wrap(여러 줄로 묶음)
justify-content: 주 축(수평)의 정렬 방법
- flex-start: Flex Items를 시작점으로 정렬
- flex-end: Flex Items를 끝점으로 정렬
- center: Flex Items를 가운데 정렬
- space-between: 각 Flex Item 사이를 균등하게 정렬
- space-around: 각 Flex Item의 외부 여백을 균등하게 정렬
align-content: 교차 축(수직)의 여러 줄 정렬 방법 → item들이 두줄 이상으로 구성되어야하고, 여백이 있어야 한다.
- stretch(기본 값): Flex Items를 시작점으로 정렬
- 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를 각 줄의 가운데 정렬
- baseline: Flex Items를 각 줄의 문자 기준선에 정렬

[Items]

order: Flex Item의 순서 → 0(순서 없음, 기본 값), 숫자(숫자가 작을 수록 먼저)

flex-grow: Flex Item의 증가 너비 비율 → 0(증가 비율 없음, 기본 값), 숫자(증가 비율)

.container .item:nth-child(1){
   flex-grow: 1;
}
.container .item:nth-child(2){
   flex-grow: 1;
}
.container .item:nth-child(3){
   flex-grow: 3;
}
/* 1:1:3 비율로 가득 너비를 채움 */

flex-shrink: Flex Item의 감소 너비 비율 → 1(컨테이너 너비에 따라 감소 비율 적용, 기본값), 숫자(감소 비율)

.container .item:nth-child(1){
   flex-shrink: 3;
}
.container .item:nth-child(2){
   flex-shrink: 3;
}
.container .item:nth-child(3){
   flex-shrink: 0;
}
/* 줄어드는걸 하지 않게하기 위해서는 flex-shrink:0으로 설정 */

flex-basis: Flex Item의 공간 배분 전 기본 너비 → auto(요소의 내용 너비. 기본 값), 단위로 설정

전환

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

transition: 속성명(transition-property) **지속시간(transition-duration)** 타이밍함수(transition-timing-function) 대기시간(transition-delay);
지속 시간은 단축형으로 작성할때, 필수적인 속성!
속성
- transition-property: 전환 효과를 사용할 속성 이름 지정 → all(모든 속성에 적용, 기본 값), 속성이름(전환 효과 사용할 속성 이름 명시) ex) transition: width 3s; → width부분만 3초정도 전환 지속 시간을 적용
- transition-duration: 전환 효과의 지속시간 지정 → 0s(전환 효과 없음), 시간(지속시간 지정)
- transition-timing-function: 전환 효과의 타이밍(Easing) 함수 지정
  - ease: 느리게-빠르게-느리게
  - linear: 일정하게
  - ease-in: 느리게 - 빠르게
  - ease-out: 빠르게 - 느리게
  - ease-in-out: 느리게 - 빠르게 - 느리게
    
    참고 자료 검색어: easing function, easing function mdn, tweenmax easing
- transition-delay: 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정 → 0s(대기 시간 없음, 기본 값), 시간 ex) transition: width 3s 3s; → 앞이 지속 시간, 뒤가 대기시간
여러 속성의 transition을 적용 가능 → 쉼표로 구분
```
transition:
	width .5s,
	background-color 2s;
```

변환

transform: 요소의 변환 효과

transform: 변환함수1 변환함수2 변환함수3 …;
transform: 원근법 이동 크기 회전 기울임;
2D 변환함수
- translate(x,y): 이동(x축, y축) → px
- translateX(x): 이동(x축) → px
- translateY(y): 이동(y축) → px
- scale(x,y): 크기(x축, y축) → px
- scaleX(x): 크기(x축) → px
- scaleY(y): 크기(y축) → px
- rotate(degree): 회전(각도) → deg
- skew(x,y): 기울임(x축, y축) → deg
- skewX(x): 기울임(x축) → deg
- skewY(y): 기울임(y축) → deg
3D 변환함수
- translateZ(z): 이동(z축)
- translate3d(x,y,z): 이동(x축, y축, z축)
- scaleZ(z): 크기(z축)
- scale3d(x,y,z): 크기(x축, y축, z축)
- perspective(n): 원근법(거리) → 제일 앞에 작성해야함!
- rotateX(x): 회전(x축)
- rotateY(y): 회전(y축)
- rotateZ(z): 회전(z축)
- rotate3d(x,y,z): 회전(x축, y축, z축 ex) transform: perspective(150px) rotateX(45deg);

perspective: 하위 요소를 관찰하는 원근 거리를 지정(함수)

px 등 단위로 지정
속성과 함수의 차이
- 함수는 관찰 대상의 부모요소에 적용 → 기준점 설정(perspective-origin)
- 속성은 관찰대상 자체에 적용 → 기준점 설정(transform-origin)

backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김 여부

visible(뒷면 보임, 기본값), hidden(뒷면 숨김)

예시

```css
.container{
  width: 200px;
  height: 100px;
  background-color: royalblue;
}
.container .item{
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 60px;
  color: red;
  text-align: center;
  line-height: 100px;
}
```

```css
.container .item{
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 60px;
  color: red;
  text-align: center;
  line-height: 100px;
  transform: rotateY(180deg); /* 추가 */
  /* backface-visibility: visible이 적용되어 있어서 뒤집힘이 보임 */
}
```

```css
.container .item{
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 60px;
  color: red;
  text-align: center;
  line-height: 100px;
  transform: rotateY(180deg); /* 추가 */
  backface-visibility: hidden /* 뒷면이 안보이게 하는 속성 */
}
```

Minji Lee

이전 포스트

[Course 1 ] Part1. HTML/CSS/JS로 만드는 스타벅스 웹사이트_CSS(1)

다음 포스트