다시 시작하는 CSS😊
GitHub Desktop을 사용해 실습 내용 commit 해보면서 github 익히기💕
Background
.box {
width: 300px;
height: 300px;
background-position: center center;
background-size: contain;
background-color: pink;
background-repeat: no-repeat;
background-image: url(http://images.unsplash.com/~~);
}1) background-color
배경색을 지정하는 속성
<배경 색상 사용 방식>
hex : 문자를 사용하여 색상 표현 (예. #0066ff)
rgb : 삼원색을 사용하여 색상 표현 (예. rgba(0, 102, 255))
rgba : rgb와 함께 투명도(alpha)를 사용하여 색상 표현 (예. rgba(0, 102, 255, 0.35)
2) background-image
배경을 이미지로 넣을 때 사용하는 속성
반드시 사용해야 하는 함수 url() 안에 이미지 경로를 작성한다.
3) background-repeat
요소 안에 이미지가 반복되거나 반복되지 않도록 설정하는 속성
속성값: repeat-기본값 | no-repeat
4) background-size
배경으로 사용되는 이미지의 크기를 설정하는 속성
<속성값> (너비 값만 사용. 높이는 자동으로 auto)
≫ contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정. 요소 안에 이미지 전체가 들어가며 요소와 사이즈가 맞지 않으면 여백 발생 가능
≫ cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지를 잘라내어 요소 안에 여백이 없도록 함
≫ custom : 자체적으로 width값과 height값을 지정(예. 100% auto 또는 100px 50px 또는 auto 80%)
5) background-position
요소 안에서 삽입하는 이미지의 위치를 지정하는 속성
x축에서의 위치(가로)와 y축에서의 위치(세로)를 지정해준다.
(예. center center 또는 center 30px 또는 10px 30px 또는 left top 또는 50% 50%)
Transition
스르륵(퐉!❌) '속성'에 변화를 주고 싶을 때 사용!(like PowerPoint SlideShow 효과)
개별적으로 속성마다 각각의 transiton을 선언할 수 있다.
.box {
font-size: 20px
background-color: blue;
transition: font-size 1000ms ease-out, background-color 2000ms cubic-bezier(0.08, 0.57, 0.97, -0.78) 1000ms;
}
.box.active {
font-size: 30px;
background-color: red;
}<속성값>
1) property : 전환하고자 하는 속성
2) duration : 변화가 발생하는 동안의 지속 시간
단위: ms | s (1,000ms === 1s)
3) [timing-function] (생략 가능) : 변화의 속도(스타일)
속성값: ease-in | ease-out | ease-in-out | cubic-bezier()
cubic-bezier 참고 사이트
4) [delay] (생략 가능) : 변화가 일어나기 전까지의 지연 시간
단위: ms | s (1,000ms === 1s)
※ transition 적용 불가 속성: content(가상 요소), display, z-index
(content의 내용을 바꾸는 것은 animation으로 구현 가능)
😅 실무에서 'transition'은 많이 사용하나 'animation'은 많이 사용하지 않는다고 한다.
Animation
transition vs anmation
transition은 요소에 적용한 css의 속성값이 변화할 때 스르륵 전환
animation은 요소에 애니메이션을 적용
.animation {
animation: animation-name 100ms ease-in-out 500ms infinite;
}<속성값>
1) animation-name(애니메이션 로직명)
@keyframes을 사용하여 애니메이션이 어떤 식으로 동작할 것인지 로직을 정의
@keyframes name {
from {
/* Rules */
}
to {
/* Rules */
}
@keyframes name {
0% {
/* Rules */
}
50% {
/* Rules */
}
100% {
/* Rules */
}2) animation-duration : 애니메이션이 동작할 지속 시간
단위: ms | s (1,000ms === 1s)
duration이 지나서 애니메이션이 끝나면 원래 상태로 되돌아온다.
3) animation-timing-function : 변화의 속도(스타일)
속성값: ease-in | ease-out | ease-in-out | cubic-bezier()
4) animation-delay : 애니메이션 발생하기까지의 지연 시간
단위: ms | s (1,000ms === 1s)
5) animation-iteration-count : 애니메이션 반복 횟수
속성값: 정수 | infinite(무한)
6) animation-direction : 애니메이션 진행 방향
속성값: reverse(거꾸로) | alternate(번갈아가면서)
ex. from-to에서 opacity가 0에서 1로, 1에서 0으로 animation이 자연스럽게 변화하길 원할 때! alternate 를 사용한다. (0% 50% 100% 사용하지 않아도 된다)
그 외에 animation에 대한 내용은 아래를 참고
MDN animation 참고 문서
📓 참고
☪ 그림을 삽입할 때 html에 img 태그를 사용해 markup하지 않고 css에서 background-image를 사용하는 이유?
🅰 예를 들어 배경 이미지를 넣거나 (좋아요 버튼 같은)요소로 이미지를 넣을 경우 정도에만 사용한다.
(다수의 사용자들이 자신이 원하는 사진을 업로드하는 경우) 이미지가 가로 또는 세로 형태인지, 어떤 비율과 규격인지 모르는 사진을 업로드하는 상황에서 모든 이미지에 대해 대응할 수 있어야 한다.
그렇기 때문에 가운데 정렬(background-position), 사이즈에 맞춰 이미지 넣기(background-size) 등을 가능하게 하기 위해 background-image를 사용한다.
🌊 코드를 작성하는데 '논리적인 사고의 흐름' 이 필요하다!
✨ 요소가 정보값으로 의미가 없다면 HTML로 markup하지 않고, CSS를 이용한다!
➕ 이미지를 가운데 정렬할 때는?!
(구현하고자 했던 스타일이 동일하며 경우에 따라 속성을 달리 사용한다!)
flex: html 내부의 img 태그를 가운데 정렬
background-position: css의 background-image를 가운데 정렬
📋 막간 note
☪ 요소를 가운데 배치하고 싶은 경우?
🅰 부모 요소에 다음과 같이 css 작성
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.child {
width: 100px;
height: 100px;
}☪ line-height를 em값으로 환산하려면?
🅰 '(line-height)px / (font-size)px'으로 계산한다. (✨단위 em 생략)
줄간격인 line-height가 font-size의 몇 배인지를 알고 싶은 것이기 때문이다.
(예. font-size: 20px; line-height: 32; 라면 '32/20=1.6'이다.)
☪ 스크린 리더 사용자를 위해 'sr-only' 범용 클래스를 사용하고 화면에서 보이지 않도록 하기 위해서는?
🅰 'dispaly: none;'은 화면에 보이지 않으며, 없는 존재라고 생각해 스크린 리더에도 읽혀지지 않는 문제가 발생한다.
존재하는 요소이지만 화면에 보이지 않도록 해야함이 목표이다.
1. 'position: absolute;'
영역으로 차지하지 않고, 자식요소의 존재를 (존재하지만)잊도록.
2. 'z-index: -100;'
눈에 보이지 않도록 요소 가장 아래 배치하기 위해.
3. 'width: 1px; height: 1px;' 작성한다.
(width 또는 height를 0px로 설정하면 'display: none;'처럼 스크린리더가 읽지 못함)
4. 'overflow: hidden;'
설정한 크기 밖의 영역들은 잘려져 보이지 않도록 (최소한의 크기).
5. 'opacity; 0'
안정적으로 투명하게 설정.
☪ css property 속성 작성 순서 패턴?
🅰 (강사님 스타일 참고)
- 변화가 드라마틱한 position 관련 속성들을 먼저 선언한다
- 그 다음 Box에 관한 것들을 선언한다: display, box-model 관련 속성
- typography 관한 것들을 선언한다
- background 관련 코드를 선언한다
- 기타 등등..
