px em rem
16px = 1em = 1rem
em
부모태그에 font-size 속성이 있으면,
그 값을 1em 으로 계산한다.
따로 속성이 지정되어 있지 않으면 16px로 지정된다.
rem
일반적으로 html은 16px로 계산되어 있고 1rem이다.
즉, 2rem은 32px
rem으로 font size 설정하는 것이 원론적으로는 맞음.
사용자에게 글꼴 크기를 변경할 수 있게 하기위해 (크롬에서 글꼴크기 변경할 때 rem만 반영됨)
but 지켜지기는 쉽지 않음. 배율 등의 이유 때문에 px로 설정하는 경우가 많음
웹페이지 우클릭 검사-computed 탭에서 확인할 수 있음
레이아웃
float
float = 레이아웃 배치를 위해 만들어진 css속성
요즘엔 많이 안쓰는데 간단하게 사용하기엔 좋음
html의 모든 태그들은 디폴트 기본값으로 float : none 으로 부여되어있음
쉽게 말해서 위성뷰로 봤을 때 float 태그에 none이 아닌 값을 부여하면 내용이 2층에 표시됨.
다음 태그가 1층에 깔릴 수 있음. 이를 해결하기 위해서 깔려서 가려지는 태그에 clear: both; 를 입혀주면 됨.
float 속성이 끝나는 태그부터는 다시 1층으로 돌아와서 태그가 정렬됨
flex
많이 사용하는 레이아웃 속성
CSS에 flex속성 부여한 다음에 크롬 개발자도구 style탭에서 flex속성 관련하여 이것저것 해볼 수 있음
참고
https://velog.io/@adguy/align-content-vs-align-items
grid
제일 많이 사용하는 속성
부모태그에 레이아웃 비율, 크기 설정
display: grid;
grid-template-columns: ;
grid-template-rows: ;
부모태그에 격자로 나눈 구간에 각각 어느 태그가 들어갈지 설정
줄이 바뀔 때마다 쌍다옴표로 감싸고 마지막에 세미콜론
grid-template-areas:
"top top";
"right left";
"bottom bottom";태그 간 간격 설정
grid-gap: ;
각 태그 스타일 속성으로 grid-area로 영역 부여.
.right {
background: green;
width: 200px;
height: 200px;
grid-area: right;}폰트
font-weight
lighter=100 / norma=400 / bold=700 / border=900
line-height
줄 간격
font-family
컴마를 통해서 여러개 설정할 수 있음
맨 앞에있는 것이 설정되지만, 만약 사용자가 해당 글꼴이 없을 때 다음 글꼴이 적용됨
css에서 폰트 불러오는 방법
@font-face {
font-family: 폰트이름;
src: url(폰트url ex) ./font/lalala.ttf);
}제로베이스 프론트엔드 스쿨을 수강하며 작성한 내용입니다.
