CSS - [기초 / 피드백]
1rem ( root em = 16px )
: html태그에 적용된 font-size의 영향을 받습니다. html태그의 폰트 크기에 따라서 상대적으로 크기가 결정
font-family : 서체 지정
font-weight : 폰트 두께
line-height : 행과 행 사이의 간격 지정
cascading
: !important > style attribute > id selector > class selectort > tag selector
vertical-align : top;: 수직 정렬
margin: auto;: 남는 여백을 알아서 나눠가진다.
1. 글자 관련은 height가 아닌 line-height 속성을 적용
2. 클릭 이벤트는 패딩까지 적용하고 마진 적용x
3. swiper 적용시 margin보단 padding을 쓰면 더 깔끔
box-sizing: border-box;: 크기+padding+border만큼 width 차지하는 속성
flex-shrink: 0;: 부모 flex속성 무시, width와 height 크기대로 유지?
: flex-grow와 쌍을 이루는 속성으로 , 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
글자가 넘어갈 시 . . .로 변경하기 위한 요소
.item {
white-space: nowrap; /* 줄바꿈 방지 */
overflow:hidden; /* 영역에 벗어나면 보여주지않음 */
text-overflow: ellipsis; /* 영역을 벗어나면 ...표시 */
}+ flex시 글자 넘어갈 때 . . .하기위한 필요조건
.container {
min-width:0;
}
피드백 내용
- class이름은 카멜방식을 이용할 것
- 태그는 최대한 간소화 할 것
- absolute나 fixed로 띄웠을 경우 padding으로 공간 확보할 것
- 글자 정렬 확실히!!! { display:flex; align-item:center; justify-content:center; }
github : https://github.com/PHyeonMIN/html-css_study
( 사진은 개인정보 문제로 넣어두지 않았습니다. )
media query
@media (max-width:500px) {
body{
background-color: red;
}
}@media ( max-width:500px ) {}
: 500px보다 작을 때 적용
@media ( min-width:500px ) {}
: 500px 이상일 때 적용
<meta name="viewport content="width=device-width, initial-scale=1.0">: 모바일화면에 적용
CSS - animation
animation-name : 애니메이션 이름
animation-duration : 애니메이션 움직임 지속 시간
@keyframes : 애니메이션 움직임 제어
animation-iteration-count : 애니메이션 반복 횟수
animation-direction: 애니메이션 방향
animation-delay: 애니메이션 지연시간
animation-timing-function : 애니메이션 가속도
animation-fill-mode : 애니메이션 끝난 후의 상태
.box {
animation-name: box_ani;
animation-duration: 1s;
}
@keyframes box_ani {
from{
}
to{
}
}2022-04-19
1. CSS문법 ( + Sass문법)
&:not(:last-child) {
margin-right:60px;
}2. 피드백