html에 design을 입히는 것으로, 유지보수 차원에서 html과 분리해서 관리합니다.
css는 선택자(selector)
, 선언부(property)
, 값(value)
으로 나뉩니다.
selector {
property: value;
}
1. margin : border 바깥 부분
2. border : content 테두리
3. padding : border와 content사이의 간격
4. content : box의 내용
.box {
disply: block;
}
1. keyword : 길막, 자신의 옆에 어떤 요소도 오지 못하게 길막
2. width : 나를 감싸는 부모의 content-box의 width 100%를 따른다. 따로 설정하면, 나머지 width값은 margin으로 채워진다.
3. height : 따로 설정하지 않으면, 내가 감싸는 자식의 height들의 합
4. margin
margin: 0 auto; 자동으로 생기는 margin값을 왼쪽/오른쪽에 두겠다. 결론적으로 가운데 배치
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
block box를 가로배치 하기 위함. inline의 경우 top/bottom 영역을 차지할 수 없기 때문에 영역 차지를 위해 float 사용
float으로 설정되면, 부모는 나를 자식으로 여기지 않고, 빈공간이 여긴다. 형제들은 이 빈 box를 밀어서 채워준다. 결과적으로 width/height가 줄어들 수 있다.
float를 적용하면, 해당 요소는 block box로 변경된다.
하지만, 자신의 content의 영역만 차지하는 block box이다.
자식의 요소들이 float속성을 계속 가지고 있다면, 부모의 width안에서 inline처럼 동작. 하지만, 부모는 float속성을 가지는 요소를 자식으로 여기지 않기때문에 height가 0으로 된다.
float: left; 자신이 갈 수 있는 공간에서 최대한 왼쪽에 배치
float: right; 자신이 갈 수 있는 공간에서 최대한 오른쪽에 배치
text/image와 같이 inline의 속성을 가지는 요소들은 float의 영역을 인지한다.
float로 인해 망가진 layout 해결하기
.psuedo::before {
content: '';
display: block;
clear: left;
}
html: viewport meta
<meta name="viewport" content="width=device-width"/>
css: media query
@media screen and (min-width: 768px)
text design을 뜻한다.
font-size
line-height
font-family
font-family: "Poppins";
font-family: "Poppins", sans-serif;
font-family: "Poppins", "Roboto", sans-serif;
font-weight
text-align
text-indent
text-transform
text-decoration
font-style
// font.css
@font-fact {
font-family: 'kimbug';
font-style: normal;
font-weight: 400;
src: url('./assets/font/webfont.eot');
src: url('./assets/font/webfont.eot?#iefix') format('embedded-opentype');
}
@font-fact {
font-family: 'kimbug';
font-style: normal;
font-weight: 700;
src: url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
}
font import하기
<link rel="stylesheet" href="./fonts.css"/>
@import url('./fonts.css');
background-color
background-image
.box {
background-image: url('./assets/heart.png');
}
background-repeat
background-size
background-size: 50% auto;
background-size: 100% auto;
background-position
background-position: center center;
property dudration [timing-function][delay]
property: 속성
duration: 지속 시간 (ms, s)
font-size가 2500ms동안 animation으로 변했으면 좋겠다.
.box {
transition: font-size 2500ms;
transition: all 2500ms;
}
timing-function
ease-in: 느리다가 빠르게
ease-out: 쁘라다가 느리게
cubic-bezier:
.box {
transition: all 2500ms ease-out
}
delay
여러 요소를 각각에 맞춰 변화시키기
.box {
transition: font-size 1000ms ease-out,
background-color 2000ms cubic-bezier(.08, .57, .83, .67) 1000ms
animation-name duration timing-function
animation: property상관없이 적용할 수 있음
transition: 요소에 적용한 property를 전환 시키는 것
keyframes: animation을 정의해 놓은 것
animation-iteration-count: infinite
animation-direction:
.box {
animation-name: move-box;
animation-duration: 2000ms;
animation-timing-function: ease-in-out;
animation-delay: 1000ms;
animation-iteration-count: 3;
}
@keyframes move-box {
from {
// 변화해야하는 속성 작성
top: 0;
background-color: #0066ff;
}
to {
top: 200px;
background-color: #ff4949;
}
}
@keyframes name {
0% {
}
50% {
}
100% {
}
}
neomorphism
h-offset v-offset blur spread color
x y 흐린정도 그림자사이즈 색상
자식이 부모의 width/height를 넘었을 때 처리하는 법
visible | auto | scroll | hidden
visible: 기본값. 넘어가도 넘어간대로 보여줄 것
auto, scroll: 넘쳐 흐르면 알아서 표시할 것. 넘어간 요소들은 스크롤로 표현됨
hidden: 넘쳐 흐르면 표시X. 스크롤도 X
요소를 2/3차원 공간에서 변형하는 것. transform으로 위치나 크기를 변경해도 기존의 위치와 크기는 기억된다.
translate(x, y): 요소의 위치를 옮길 때. x, y값이 %라면, 현재 자신의 width, height가 기준
scale(N): 자신의 크기를 변경할 때. N은 배율이다. 1이면 1배. 2면 2배
rotate(Ndeg): 각도를 변경할 때. deg단위까지 입력해야한다.
*visible | hidden
visible: 기본값. 보이는 것
hidden: 있는데 안보이는 것( vs display: none; --> 요소 자체를 삭제)
자식 선택자 parent > child
자손 선택자 parent descendants
형제 선택자 parent + sibling | parent ~ sibling
// active 바로 뒤 li
.active + li {
...
}
// active 이후 모든 li
.active ~ li {
...
}
가상 클래스: 상태나 조건에 맞을 때 사용하는 것
구조적 가상 클래스
// li 중 첫 번째
li:first-child {
...
}
// li 중 마지막
li:last-child {
...
}
// li 중 n번쨰
li:nth-child(n|2n|2n-1) {
...
}
유저의 활동에 따른 가상 클래스
// 마우스를 요소 위에 두었을 때
a:hover {
...
}
// 마우스를 눌렀을 때
a:active {
...
}
// 요소가 클릭되었을 때
// input은 active + focus 2개의 css를 set로 사용함
input:focus {
}
나중에 선언될수록 우선순위가 높다
왼쪽에서 오른쪽으로
id > class(+pseudo) > type
우선순위 breaker
!important > inline style
12분할한 화면
왜 12? 12/2 12/3 12/4 12/6 12/12 분할할 수 있는 경우가 많음
grid에 맞춰 제작되어있는 라이브러리
container
row
col
57x: col-sm | mobile
720: col-md | tablet
960: col-lg | desktop
1140: col-xl| large desktop
ul/li 에서 .selected, hover등의 padding적용할 때는 li의 자식요소에서 입히는 것이 좋다.
button의 경우, width를 설정하지않고 padding을 설정하여 content와 border의 간격을 주는 것이 좋다. 왜? 안에 내용이 길어지거나 짧아져도 width는 고정되어있고, 간격은 짧아지거나 길어지기 때문에
modal의 경우 position: fixed가 좋다. 왜? display block의 경우 width 100%로 차지하기 때문에 원하는 컨텐츠보다 넓을 가능성이 높음.
하지만 fixed로 하면 display inline으로 box-sizing만큼 width가 할당됨.
그렇다면 위치는? viewport에 맞춰서 진행하면 된다.
font-family를 body에 작성하면 모든 요소에 적용된다.
input outline 제거
input {
outline: none;
box-shadow: none;
}