[패스트캠퍼스] 프론트엔드 강의 종합반 week 3 CSS

청수동햄주먹·2023년 2월 2일

국비지원 프론트엔드 종합반 패스트캠퍼스

목록 보기

3/8

개요

기본문법, 주석

선택자 { 속성 : 값; }
- 선택자 selector : 스타일을 적용할 대상
- 속성 property : 스타일의 종류
/* 설명작성 */
- 주석처리
- 브라우저는 이부분을 읽지 않는다.

선언방식

네가지 선언방식이 있다.

1. 내장방식

html,css,js를 구분해서 개발하는 것에 선호되서 자주쓰이진 않음! 유지보수 측면에서 좋지 않다

<style>
  div{
    color: red;
    margin: 20px;
  }
</style>

2. 인라인방식

요소의 style속성에 직접 스타일을 선택자 없이 작성하는 방식

너무 지나치게 우선적용 되기 때문에 유지보수가 어려워서 선호되지 않는다.

<div style="color:red; margin:20px;"></div>

3. 링크방식

html과 병렬연결

<link rel="stylesheet" href="./css/main.css">
/*html 파일 주변에서 css폴더를 찾아 그안의 main.css*/

4. @import url("경로");

css의 @import 규칙으로 css문서 안에서 또다른 css문서를 가져와 연결하는 방식

html과 직렬연결 html - main.css - box.css
적용 순위가 뒤로 밀린다.
많이 사용되는 방식은 아님.

<link rel="stylesheet" href="./css/main.css">

/* main.css */
@import url("./box.css");
div{
  color: blue;
  margin: 20px;
}

/* box.css */
.box {
  background-color: red;
  padding: 20px;
}

선택자_기본 Selector

다음의 기본선택자 4 개는 적용 순서가 다르다

* 전체 선택자 Universal Selector

모든 요소를 선택한다

* {
  color: blue;
}

abc 태그 선택자 Type Selector

태그이름이 abc인 요소선택

li {
  color: blue;
}

.abc 클래스 선택자 Class Selector

HTML class 속성의 값이 abc인 요소 선택

.sky {
  color: blue;
}

#abc 아이디 선택자 ID Selector

HTML id속성의 값이 abc인 요소 선택

#sky {
  color: blue;
}

선택자_복합 Combinator

abcxyz 일치 선택자 Basic Combinator

선택자 abc와 xyz를 동시에 만족하는 요소 선택

선택자를 두번 확인해야 한 후에 적용
태그 선택자는 기호가 없으므로 일치 선택자의 경우 태그선택자부터 쓴다
.skyspan으로 쓰면 속성이 skyspan인 클래스를 찾게 됨

span.sky {
  color: blue;
}

abc>xyz 자식 선택자 Child Combinator

선택자 abc의 자식요소 xyz선택

ul > .sky {
  color: blue;
}

<div>
  <ul>
    <li class="sky">하늘</li> /*pick!*/
    <li>구름</li>
  </ul>
</div>

abc xyz 하위(후손) 선택자 Descendant Combinator

띄어쓰기가 하위 선택자의 기호이다. 선택자 abc의 하위요소 xyz 선택.

div .sky {
  color: blue;
}

<div>
  <ul>
    <li class="sky">하늘</li> /*pick!*/
    <li>구름</li>
  </ul>
  <span class="sky">하늘</span> /*pick!*/
</div>
<span class="sky">하늘</span> /*div에 소속되지 않았으므로 선택되지 않음*/

abc+xyz 인접 형제 선택자 Adjacent Sibling Combinator

선택자 abc의 다음 형제요소 xyz하나를 선택

.sky + li{
  color: white;
}

<div>
  <ul>
    <li>태양</li>
    <li class="sky">하늘</li> 
    <li>구름</li> /*pick!*/
    <li>별</li>
  </ul>
  <span class="sky">하늘</span> 
</div>
<span class="sky">하늘</span>

abc~xyz 일반 형제 선택자 General Sibling Combinator

선택자 abc의 다음 형제 요소 xyz 모두를 선택

.sky ~ li{
  color: white;
}

<div>
  <ul>
    <li>태양</li>
    <li class="sky">하늘</li> 
    <li>구름</li> /*pick!*/
    <li>별</li>/*pick!*/
  </ul>
  <span class="sky">하늘</span> 
</div>
<span class="sky">하늘</span>

선택자_가상클래스 Pseudo-Classes

abc:hover

선택자 abc요소에 마우스 커서가 올라가 있는 동안 선택

.box {
  width: 100px;
  height: 100px;
  background-color: gold;
  transition: 1s; /*전환효과 자연스럽게 1s 동안 변화함*/
}
.box:hover {
  width: 300px;
  background-color: silver;
}

abc:active

선택자 abc요소에 마우스를 클릭을 유지하고 있는 동안 선택

<a href="https://www.naver.com">naver</a>

a:active {
  color: limegreen;
}

abc:focus

선택자 abc요소가 포커스 되면 선택

포커스가 적용 될 수 있는 요소
- input
- select
포커스가 가능하지 않은 요소를 가능하게 하려면
- tabindex="-1" 속성을 추가해준다

<input type="text"/>

input:focus {
  background-color: lavender;
}

abc:first-child

선택자 abc가 형제요소중 첫째선택

.up li:first-child {
  background-color: yellow;
}

<div class="up">
  <ul>
    <li>태양</li>/*pick!*/
    <li>하늘</li> 
    <li>구름</li> 
    <li>별</li>
  </ul>
</div>

abc:last-child

선택자 abc가 형제요소중 막내선택

.up li:last-child {
  background-color: yellow;
}

<div class="up">
  <ul>
    <li>태양</li>
    <li>하늘</li> 
    <li>구름</li> 
    <li>별</li>/*pick!*/
  </ul>
</div>

abc:nth-child(n)

선택자 abc가 형제요소중 n째라면 선택

.up li:nth-child(2){
  background-color: blue;
}

<div class="up">
  <ul>
    <li>태양</li>
    <li>하늘</li>/*pick!*/
    <li>구름</li> 
    <li>별</li>
  </ul>
</div>

n을 숫자 뒤에 붙이면 0부터 시작하는 zero-base numbering
- 2n: 0,2,4,6... 2의 배수마다 선택
- 2n+1 : 1,3,5,7...
- n + 2 : 두번째요소부터 다 선택

.up *:nth-child(2n){
  background-color: blue;
}

<div class="up">
  <ul>
    <li>태양</li>
    <li>하늘</li>/*pick!*/
    <li>구름</li> 
    <li>별</li>/*pick!*/
    <div>땅</div>
    <p>바다</p>/*pick!*/
    <h1>풀</h1>
  </ul>
</div>

abc:not(xyz)

선택자 xyz가 아닌 abc요소 선택

.fruits *:not(span) {
  color: yellow;
}

<div class="fruits">
  <span>귤</span>
  <span>오렌지</span>
  <div>바나나</div>/*pick*/
  <p>망고</p>/*pick*/
</div>

선택자_가장요소 Pseudo-Elements

abc::before

선택자 abc 요소의 내부 앞에 내용(글자요소. 인라인)을 삽입

.box::before {
  content: "앞!";
}

abc::after

선택자 abc 요소의 내부 뒤에 내용(글자요소. 인라인)을 삽입

.box::after {
  content: "뒤!";
}

인라인 요소인 before,after를 블록요소로 전환해주기

display 속성을 사용한다

.box::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: coral;
}
.box::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: coral;
}

선택자_속성 [Attribute]

[abc]

속성 abc을 포함한 요소 선택

[disabled] {
  color:red;
}

<input type="text" value="abcd" disabled/>

data를 이용해 직접 만든 속성도 적용할 수 있다.

[data-fruit-name] {
  color: red;
}

<span data-fruit-name="apple">사과</span>

[abc="xyz"]

속성 abc를 포함하고 그 값이 xyz인 요소 선택

[type="password"] {
  color: red;
}

<input type="password"/>

스타일 상속

해당하는 요소의 하위요소까지 영향을 미친다.

.animal{
  color: red;
}

<div class="ecosystem">생태계
  <div class = animal>동물 ✔️
    <div class="tiger">호랑이</div>✔️
    <div class="lion">사자</div>✔️
    <div class="elephant">코끼리</div>✔️
  </div>
  <div class="plant">식물</div>
</div>

상속되는 CSS속성들

모두 글자/문자 관련 속성들이지만 모든 글자/문자 속성은 아니다.

font-style
font-weight
font-size
font-height
font-family
color
text-align

강제상속

inherit 이라는 값을 통해서 실제로 상속이 되지 않는 속성을 강제로 상속 될 수 있게 한다.

.parent {
  width: 300px;
  height: 200px;
  background-color: orange;
}
.child {
  width: 100px;
  height: inherit;
  background-color: inherit;
}

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css속성을 우선 적용할지 결정하는 방법이다.

점수가 높은 선언이 우선
점수가 같으면, 가장 마지막에 해석된 선언이 우선

Quiz : 브라우저에 뜰 때 무슨색으로 뜰까?

div {
  color: red !important;/*!important - ∞점*/
}
#color_yellow { /*id선택자 100점*/
  color: yellow;
}
.color_green { /*class선택자 10점*/
  color: green;
}
div { /*태그 선택자 1점*/
  color: blue;
}
* { /*전체 선택자 0점*/
  color: darkblue;
}
body { /*상속은 점수를 별도로 계산하지 않음*/
  color: violet;
}

<div
  id="color_yellow"
  class="color_green"
  style="color: orange;"><!--인라인 선언 1000점-->
  Hello world!
</div>

답: 빨간색

점수 계산 연습

.list li.item { /*21점 : 10(class) + 1(tag) + 10*/
  color: red;
}

.list li:hover{ /*21점 : 10(class) + 1(tag) + 10(가상class)*/
  color: red;
}

.box::before{ /*11점 : 10(class) + 1(가상요소)*/
  content:"good"; color: red;
}

#submit span{ /*101점 : 100(id) + 1(tag)*/
  color: red;
}

header .menu li:nth-child(2){ /*22점 : 1(tag) + 10(class) + 1(tag) + 10(가상 class)*/
  color: red;
}

h1{ /*1점 : 1(tag)*/
  color: red;
}

:not(.box){ /*10점 : 10(class), not은 가상 클래스 선택자 이기는 하지만 점수계산 제외*/
  color: red;
}

점수가 같으면 나중에 해석된 속성적용

.hello {
  color: red;
}
.hello {
  color: green;✔️
}

초록색에 나중에 해석되었으므로 초록색 적용됨

div.hello { /*11 점*/
  color: red;✔️
}
.hello {
  color: green;
}

div.hello가 점수가 더 높으므로 빨간색 적용

주의사항

!important; 무한대
인라인 선언 1000점
id 선택자 100점

점수가 너무 높아서 수정이 어려우므로 되도록 쓰지 않는 게 좋다 (!important를 덮으려고 !important를 계속 쓰게됨)

속성

HTML속성 : Attributes
CSS속성 : Properties
JS속성 : Properties

개요

박스모델
- 내부여백, 외부여백, 가로, 세로
글꼴, 문자
- 폰트, 문자사이즈, 글꼴 두께..
배경
- 배경 색상, 배경 이미지
배치
플렉스 flex
- 수평 정렬
전환
- 전, 후 상태를 자연스럽게 애니메이션 처리
변환
- 요소의 회전, 이동, 크기조정 등
- 2d, 3d변환 등이 있다
띄움
- 공중으로 띄운다. 띄워진 요소 주변으로 문자들을 넣을 수 있음.
- 플렉스가 나오기 전 수평정렬을 위해 사용하던 기술
애니메이션
- 전환효과 보다 복잡한 효과
그리드
- 2차원의 레이아웃
다단
필터
- 이미지의 흑백, 블러, 색상반전 기능

박스모델

width, height

기본값: auto 브라우저가 너비를 계산
- 너비를 지정 안해주면 자동으로 브라우저 너비를 다 씀
- 높이는 컨텐츠만큼 자동으로 조절
단위: px, em, vw 등 단위로 지정

max-width, max-height

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

min-width, min-height

기본값 : 0 최소 너비 제한 없음
단위: px, em, vw 등 단위로 지정
상위 속성을 무시하고? 적용 될 수 있다

CSS 단위

px

픽셀(하나의 점). 절대 단위

%

상대적 백분율

em

요소의 글꼴 크기. 1em = 10px

rem

루트(최상위) 요소:html의 글꼴 크기

vw

뷰포트 가로너비의 백분율

vh

뷰포트 세로너비의 백분율

0

일때는 단위를 안붙여도 0 임!

margin : 외부 여백

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

0 외부 여백 없음.
값이 음수가 되면 아이템끼리 겹칠 수 있다.
auto 브라우저가 여백을 계산
단위 pw, em, vw
상,하,좌,우 따로 설정할 수 있다. 시계방향
- margin 10px 20px 30px 40px;
  - top 10px
  - right 20px
  - bottom 30px
  - left 40px
- 값 세개: 상, 중(좌우) 하
- margin : 10px 20px;
  - 상하 10 px
  - 좌우 20 px
- 값 하나: 모두 똑같은 값으로 적용
방향 명시도 가능
- margin-top
- margin-bottom
- margin-right
- margin-left

padding : 내부 여백

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

0 내부여백 없음
pw, em, vw 단위로 지정
% 부모 요소의 가로너비에 대한 비율로 지정
패딩과 동일한 방식으로 상하좌우 따로 지정 가능

border : 테두리선과 색상 표현

요소의 테두리 선을 지정하는 단축속성
border: 선-두께 선-종류 선-색상

border-width : 두꺼울 수록 요소가 커진다
- pw, em, % 등으로 지정
- 마진, 패딩처럼 상하좌우 따로 지정 가능
border-style
- none: 선 없음
- solid: 실선
- dashed: - - -
border-color
- transparent 투명
- 색상표현
  - 색상이름 red, tomato, royalblue
  - hex 색상 코드 16진수 색상(hexadecimal colors #0000, #FFFFFF
  - RGB 빛의 삼원색 rgb(255,255,255)
  - RGBA 빛의 삼원색 + 투명도 rgba(0,0,0,0.5)
방향을 따로 지정할 수 있다. ex) bordor-top

border-radius : 모서리 둥글게

요소의 모서리를 둥글게 깎음

0 둥글게 없음
pw, em, vw등 단위로 지정

box-sizing : 크기 계산

요소의 크기 계산 기준을 지정

content-box 요소의 내용으로 크기 계산. box-sizingd의 기본값
border-box 요소의 내용+padding+border 로 크기계산 -> 명시한 그대로의 width,height 사용하고 싶을 때 유용하다!

overflow : 넘침 제어

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

visible 넘친 내용을 그대로 보여줌 (기본값)
hidden 넘친 내용을 잘라냄
scroll 세로, 가로축에 스크롤바 생성
auto 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 (필요한 축에만)
개별속성들
- overflow-x
- overflow-y

display : 출력 특성

요소의 화면출력 특성

block 상자(레이아웃)요소
- display: block;
inline 글자요소
inline-block 글자+상자요소
flex 플렉스박스 1차원 레이아웃
grid 그리드 2차원 레이아웃
none 보여짐 특성 없음
table, table-row, table-cell 등..

opacity : 투명도

요소 투명도

1 불투명(기본값)
0~1 0부터 1사이의 소수점 숫자로 투명도 조절

글꼴

font-style

글자의 기울기

normal 기울기 없음
italic 이텔릭체

font-weight

글자의 두께(가중치)

normal, 400 기본 두께
bord, 700 두껍게
100~900 100단위의 숫자 9개. normal과 bord이외 두께

font-size

글자의 크기

16px 기본 크기
pw, em, rem등 단위로 지정

line-height

한 줄의 높이, 행간과 유사

숫자 : 요소의 글꼴크기의 배수로 지정. 되도록 배수를 사용!
- line-height: 2; 2배
단위 : px, em, rem등의 단위로 지정

font-family

글꼴 지정.
font-family: 글꼴1, "글꼴2", ... 글꼴계열;

글꼴1
- 가장 먼저 명시되어 있는 글꼴부터 사용시도.
- 사용불가능하다면 두번째 명시 글꼴2시도
글꼴2
- 띄어쓰기등 특수 문자가 포함된 글꼴이름은 큰 따옴표""로 묶어야 한다.
글꼴계열은 필수작성!
- serif 바탕체 계열
- sans-serif 고딕체 계열. 일반적으로 많이 사용
- monospace 고정너비 글꼴 계열
- cursive 필기체 계열
- fantasy 장식 글꼴 계열

문자

color

글자의 색상

rgb(0,0,0) 검정색
기타 지정 가능한 색상

text-align

문자의 정렬방식

left 왼쪽 정렬
right 오른쪽 정렬
center 가운데 정렬

text-decoration

문자의 장식(선)

none 장식없음
underline 밑줄
line-through 중앙선

text-indent

첫줄의 들여쓰기

0 들여쓰기없음
음수 가능함. 내어쓰기 outdent 효과

배경

background-color

배경 색상

transparent 투명
지정 가능한 색상

background-image

요소의 배경 이미지 삽입

none 이미지 없음
url("경로") 이미지 경로

background-size

요소의 배경 이미지 크기

auto 이미지의 실제 크기
px, em, rem등 단위로 지정
cover 비율유지, 요소의 더 넓은 너비에 맞춤
contain 비율유지. 요소의 더 짧은 너비에 맞춤

background-repeat

repeat; 이미지 수직,수평 반복
repeat-x; 이미지 수평 반복
repeat-y; 이미지 수직 반복
no repeat; 반복없음

background-position

방향
- top, bottom, left, right, center
단위
- x축, y축 px, em, rem 단위로 지정

background-attachment

요소의 배경이미지 스크롤 특성

scroll 이미지가 요소를 따라서 같이 스크롤
fixed 이미지가 뷰포트에 고정. 스크롤 없음

배치

position

요소의 위치 지정 기준

static; 기준 없음 (기본값)
relative; 요소 자신을 기준. 거의 사용되지는 않음
- relative로 재배치 하더라도 배치 전자리는 비어 있는 것이 아님
- 원래의 위치의 존재하고 있고 재배치된 것처럼 보이게 해줌
absolute; 위치상 부모 요소_를 기준.
- 부모요소가 relative라던지 위치 기준을 가지고 있어야 함
- 부모요소가 위치값이 없는 경우 (static) 부모의 상위 요소를 찾음
- 부모요소, 상위요소 모두 위치값이 없는 경우 뷰포트 기준이 된다.
- 주변과의 상호작용이 무너진다
fixed; 뷰포트(브라우저)를 기준
- 부모요소, 상위요소가 relative라고 되어 있더라도 무시되고 뷰포트 기준으로 배치된다.
position속성의 값으로 absolte, fixed가 지정된 요소는 display속성이 block으로 변경된다
css 속성들
- left, right, top, buttom, z-index
- px, em, vw 음수 사용 가능
- auto 브라우저가 계산

Stack order 요소 쌓임 순서

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 나중 구조일수록 위에 쌓임

<요소쌓임 순서 연습>
1. Q. 사용자와 더 가까운 container item은?

.container .item:nth-child(1) {
  position: relative;
}
.container .item:nth-child(2) {
  position: absolute;
  top: 50px
  left: 50px;
}

2번 html구조가 나중에 작성 되었으므로

Q. 사용자와 더 가까운 container item은?

.container .item:nth-child(1) {
  position: relative;
  z-index: 1;
}
.container .item:nth-child(2) {
  position: absolute;
  top: 50px
  left: 50px;
}

A. 1번 z-index가 더 높으므로

Q. 사용자와 제일 먼 container item은?

.container .item:nth-child(1) {
  position: relative;
  z-index: 1;
}
.container .item:nth-child(2) {
  position: absolute;
  top: 50px
  left: 50px;
}
.container .item:nth-child(2) {
  z-index: 2;
}

A. 3번 position속성이 설정되어 있지 않음

Q: container아이템 쌓임 순서는?

.container .item:nth-child(1) {
  position: relative;
  z-index: 1;
}
.container .item:nth-child(2) {
  position: absolute;
  top: 50px
  left: 50px;
}
.container .item:nth-child(2) {
  position: fixed;
  z-index: 1;
}

A: (위) 3 > 1 > 2(아래)
3 번 : 위치요소✔️, 1번과 z 값 같지만 html에서 나중에 있음✔️

z-index

요소의 쌓임 정도를 지정

auto(0) 부모요소와 동일한 쌓임 정도(기본값)
숫자가 높을 수록 위에 쌓인다
음수도 있지만 주로 -1까지만 사용
1부터 관리해 나가면서 숫자가 너무 커지지 않도록 주의

Flex: 가로 정렬

수직 정렬을 수평 정렬로 만든다

flex container: display:flex된 요소
flex items: flex container의 자식요소
container와 items 에 부여할 수 있는 속성이 달라진다

Flex Container

display:

Flex Container의 화면 출력(보여짐) 특성

flex; 블록요소와 같이 Flex Container 정의
- container들이 수직으로 쌓인다
inline-flex; 인라인 요소와 같이 Flex Container 정의
- container들이 수평으로 쌓인다

flex-direction

주 축을 설정한다

row; (기본값) 행 축. (시작점)좌 => 우 (끝점)
row-reverse; 행 축. 좌 <= 우
column; 열 축. 위 => 아래
column-reverse; 열 축. 위 <= 아래

flex-wrap

Flex Items(자식요소) 묶음(줄바꿈) 여부

nowrap; 묶음(줄바꿈) 없음
- 자식 요소의 넓이를 바꿔서 한줄로 출력되게 처리
wrap; 여러 줄로 묶음
- 자식 요소의 넓이를 바꾸지 않고 컨테이너에서 자리가 부족한 경우 줄바꿔서 출력 된다.

justfy-content

주 축의 정렬방법

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

align-content

교차축(주로 가로flex니까 세로축)의 여러줄 정렬방법
발동 조건 때문에 상대적으로 덜 쓰임
1. 여러줄이어야 한다 flex-wrap: wrap
2. 위 아래 공간에 정렬이 가능한 여백이 있어야 한다

stretch; Flex Items를 시작점으로 정렬(기본값)
flex-start; Flex Items를 시작점으로 정렬
flext-end; Flex Items를 끝점으로 정렬
center; Flex Items를 가운데 정렬

align-items

교차 축의 한 줄 정렬 방법

stretch; Flex Items를 교차 축으로 늘림(기본값)
- 아이템의 높이값이 늘어나서 한줄을 꽉 채운다
flex-start; Flex Items를 시작점으로 정렬
flext-end; Flex Items를 끝점으로 정렬
center; Flex Items를 가운데 정렬

Flex Items

자식요소에 부여되는 속성들

order

Flex Item의 순서

0; 순서없음(기본값)
숫자; 숫자가 작을 수록 먼저

flex-grow

Flex Item의 증가 너비 비율

0; 증가 비율 없음(기본값)
숫자; 증가 비율
- 1:0:0 일 경우 첫번째 요소가 빈공간을 다 차지
- 0:2:1 일 경우 두번째, 세번째 요소가 2:1의 비율로 빈공간을 채운다

flex-shrink

Flex Item의 감소 너비 비율

1; Flex Container너비에 따라 감소비율 적용(기본값)
숫자; 감소비율
0; 컨테이너가 줄어도 각각의 아이템의 너비를 유지한다

flex-basis

Flex Item의 공간 배분 전 기본 너비

auto; 요소의 content 너비
단위; px, em, rem 등
0; 내부 content의 너비에 상관없이 요소 자체를 시각적으로 1:1:2로 조절 하고 싶을 때

flex를 이용해 요소의 중간에 글자(content) 위치시키기

display: flex;
justify-content: center;
align-items: center;

Transition : 전환

transition

요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
transition: 속성명 지속시간 타이밍함수 대기시간
transition: transition-property transition-duration transition-timing-function transition-delay

transition-property

전환 효과를 사용할 속성 이름을 지정

all; 모든 속성에 적용(기본값)
속성이름; 전환 효과를 사용할 속성 이름 명시
- width; 가로너비만 지속시간 동안 자연스럽게 변함

transition-duration

전환 효과의 지속시간을 지정

0s; 전환효과 없음(기본값)
숫자s; 숫자초 동안 전환

div{
  width: 100px;
  height: 100px;
  background-color:orange;
  transition: 
    width .5s; 
    background-color 1s;
}
div:active {
  width: 300px
  background-color: royalblue;
}

가로너비는 0.5s동안 늘어나고 배경색은 1s동안 변한다

transition-timing-function

전환 효과의 타이밍(easing)함수를 지정. 시각적으로 이해하기

ease; 느리게-빠르게-느리게 (기본값)
linear; 일정하게
ease-in; 느리게-빠르게
ease-out; 빠르게-느리게
ease-in-out; 느리게-빠르게-느리게
cubic-bezier(n,n,n,n); 자신의 값을 정의. 0 <= n <= 1
steps(n); n번 분할된 애니메이션

transform : 변환

<div class="container">
  <div class="item">AB</div>
</div>

.container {
  width: 100px;
  height: 100px;
  background-color: tan;
  position: relative;
  top: 100px; left: 100px;
}


.item {
  width: 100px;
  height: 100px;
  background-color: teal;
  transform: rotate(45deg);
}

transform:

요소의 변환 효과. 효과를 띄어씌기로 나열후 맨마지막에 ;
transform: 변환함수1 변환함수2 변환함수3 ...;
transform: 원근법 이동 크기 회전 기울임;

2D 변환함수

translate(xpx,ypx);

이동(x축, y축)

translateX(xpx);

이동(x축)

translateY(ypx);

이동(y축)

scale(xpx,ypx);

크기(x축, y축)

rotate(degree);

회전(각도)

skewX(xdeg);

기울임(x축)

transform: 
    skewY(-30deg);

skewY(ydeg);

기울임(y축)

3D 변환 함수

원통으로 회전하기.
원근법을 가져야 입체감이 느껴지면서 차이가 남.

perspective(npx);

원근법(거리). 제일 앞에 작성하기!

rotateX(degree);

회전(x축각도)

transform: 
    perspective(500px)
    rotateX(45deg);

rotateY(degree);

회전(y축각도)

Perspective: 함수

하위 요소를 관찰하는 원근거리(px)를 지정
속성과 함수의 차이점

perspective: 600px; | 관찰대상의 부모 | perspective-origin
transform: perspective(600px) | 관찰 대상 | transform-origin

backface-visibility

3d 변환으로 회전된 요소의 뒷면 숨김 여부

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

Overwatch 예제

link

overwatch-hero-selector-vanilla

vanilla의 뜻: 다른 라이브러리나 프레임워크 없이 순수한 css, html로 만듬!

1. vscode 준비

overwatch 폴더를 만듬
index.html, main.css 파일을 만들어준다

2. index.html기본 설정

! + tab : html구조 자동완성 해주기

head

title 바꿔주기
링크탭으로 연결하기
- reset.css cdn jsdelivr
- 같은 파일 안의 main.css 연결

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" rel="stylesheet">
   <link rel="stylesheet" href="./main.css"/>

body

.container + tab
.heroes + tab
.hero*32>.image + tab
- 안에 image class div 가 있는 hero class div 32개를 만들어줘

<div class="container">
  <div class="heroes">
    <div class="hero"> <!--32번 반복-->
      <div class="image"></div>
    </div>
  </div>
</div>

3. main.css 기본 설정

각 요소별 준비

.container {}
.container .heroes {}
.container .heroes .hero {}
.container .heroes .here .image {}

각 hero 를 넣을 칸 기본 셋팅

display:flex로 가로정렬
flex-wrap: 으로 화면에 맞춰서 여러줄로 바꾸기

.container .heroes {
  display: flex;
  flex-wrap: wrap;
}

.container .heroes .hero {
  width:80px;
  height:84px;
  margin: 4px;
  background-color: #555555;
}

flex container 설정해주기
- justify-content: center; 캐릭터 박스들 컨테이너 중간으로 배치
- max-width: 700px; 화면이 700px 이하까지는 줄이 바뀌지만 그 이상이면 줄의 구성이 바뀌지 않음
- margin: auto; 컨테이너 자체를 화면 중간에 위치시키기
  - 블럭요소 여야하고
  - 가로사이즈가 명시가되어 있어야 한다.
```
.container .heroes {
  display: flex;
  flex-wrap: wrap;
  /* 👇새로 추가 부분👇*/
  justify-content: center;
  background-color: orange;
  max-width: 700px;
  margin: auto;
}
```
  화면 넓이가 700px이상일 때 화면 넓이가 700px이하일 때

4. css 세부 설정

body {
  height: 100vh;
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container {
  padding: 50px 0;
}

.container .heroes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
}

.container .heroes .hero {
  width:80px;
  height:84px;
  margin: 4px;
  border: 3px solid #fff;
  border-radius: 10px;
  box-sizing: border-box; 
  background-color: #555555;
  overflow: hidden; 
  transform: skewX(-14deg);
  transition: 
    transform .1s, 
    background-color .6s;
}

.container .heroes .hero:hover {
  background-color: #ff9c00;
  transform: skewX(-14deg) scale(1.3);
  z-index: 1;
}

.container .heroes .hero .image {
  width: 140%;
  height: 100%;
  background-position: center;
  background-size: 90px;
  background-repeat: no-repeat;
  transform: skewX(14deg) translateX(-16px); 
}

.container .heroes .hero:nth-child(1) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png);}
/** ~~ **/
.container .heroes .hero:nth-child(32) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero32.png);}

body
- height: 100vh; 뷰포인트 전체를 사용함
- background-size: cover; 바디를 전부 덮도록 확대/축소
- background-repeat: no-repeat; 스크롤시 반복 없음
- background-attachment: fixed; 스크롤시 움직임 없음
.container
- padding: 50px 0; 위 아래로 50px 안쪽 여백
.container .heroes
- margin: 0 auto; 가로로만 화면 가운데에 위치
- padding: 40px 20px; 위아래로 40px, 좌우 20px 안쪽 여백
.container .heroes .hero
- margin: 4px; 상하좌우 외부여백 4px
- border: 3px solid #fff; 6자리가 모두 같을 땐 세개만 써도 됨
- border-radius: 10px; 모서리 둥글게
- box-sizing: border-box; 보더까지 합쳐서 정한 기준에 맞춘다
- overflow: hidden; 정해둔 칸 밖으로 출력 되는 것 방지
- transform: skewX(-14deg); -14도로 기울여주기
- transition: transform .1s, background-color .6s; 0.1초동안 기울여주고 0.6초 동안 색깔 바꿔주기
.container .heroes .hero:hover
hover 하는 경우 추가
- background-color: #ff9c00; 호버시 배경 바꿔주기
- transform: skewX(-14deg) scale(1.3); 호버 되어서도 기울기는 유지시켜주고 이미지는 1.3배로 확대
- z-index: 1; 확대시에도 다른 요소에 가려지지 않도록 제일 위에 쌓아둔다
.container .heroes .hero:nth-child(1) .image
각 hero의 사진을 백그라운드이미지로 설정해주기
.container .heroes .hero .image
hero안의 img요소 설정하기
-width: 140%; height: 100%; 가로, 세로 지정을 안해주면 설중해둔 이미지가 띄워지지 않음
- background-position: center; 이미지가 칸의 가운데에 오도록
- background-size: 90px; 이미지 사이즈 조절
- background-repeat: no-repeat; 이미지 반복 금지
- transform: skewX(14deg) translateX(-16px);
  부모요소 -14 자식요소 +14 이미지 찌그러짐 방지, 왼쪽으로 캐릭터 끌어와서 중심에 놓아주기

5. logo 추가해주기

<div class="logo">
      <img src="https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png" alt="Overwatch">
</div>

container 요소 이후에 로고 요소를 추가해준다.
이 상태는 로고가 그냥 엄청 크게 밑에 있으므로 css에서 크기조절해준다

.container .logo {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 20px;
}

.container .logo img{
  width: 100%; /* 이미지의 부모요소(300px)보다 커질수 없음 */
}

.container .logo
- max-width: 300px; 로고는 화면이 충분히 넓어져도 가로 300px를 유지한다
- margin: 0 auto; 로고는 화면의 가로 중간에 온다
- padding: 0 20px; 화면이 아무리 줄어들어도 로고는 뷰포인트 테두리에서 좌우 20px떨어져 있다

.container .logo img
- width: 100%; 이미지의 부모요소(300px)보다 커질수 없도록 해준다

완성품

청수동햄주먹

코딩과 사별까지

이전 포스트

[패스트캠퍼스] 프론트엔드 강의 종합반 week 1 ch2 웹에서 시작하기. HTML

다음 포스트