시작하며
어제가 CSS 마지막 내용인 줄 알았는데 오늘도 CSS만 배웠다. 아직 CSS에 대한 내용이 한참 더 남은 것 같다.
역시 디자인 관련 언어다 보니 상당히 내용이 많은 것 같다. JavaScript와 React도 많이 궁금한데 비중이 많이 줄어들 것 같아서 조금 걱정이다.
CSS 크기 단위
절대 단위
- px : 픽셀 단위 / 고정된 크기 / 기본적으로 가장 많이 사용
상대 단위
<body>
<h1>CSS 단위 연습</h1>
<div class="box percent-box">%단위</div>
<div class="box em-box">em단위</div>
<div class="box rem-box">rem단위</div>
<div class="box viewport-box">vw/vh단위</div>
</body>- em : 자신의 font-size 영향을 받음 (font-size * em)
.em-box {
font-size: 16px;
width: 10em;
background-color: lightyellow;
}- rem : 루트(html) 요소의 font-size 영향을 받음 (font-size * rem)
.rem-box {
font-size: 16px;
width: 10rem;
background-color: lightsalmon;
}- % : 부모 요소의 크기를 기준으로 비율 지정
.percent-box {
width: 50%;
background-color: lightcyan;
}- vw / vh : 뷰포트(화면 크기)의 너비 / 높이를 기준으로 % 비율 지정
.viewport-box {
width: 70vw;
height: 10vh;
background-color: azure;
}자주 사용하는 속성
- color / background-color
- font-size / font-weight / font-family / font-style
- width / height / max-width / min-width / max-height / min-height
- border
- border-top 등 원하는 위치만 설정 가능
- margin / padding
- box-sizing 속성을 사용해서 요소의 크기 기준 설정
- content-box : 콘텐츠 영역 기준 (기본 값)
- border-box : content + padding + border 통합으로 기준 (자주 사용)
Position
Position 종류
- static : 정적 위치 지정 방식 (기본 값)
- relative : 상대 위치 지정 방식 / 현재 위치에서 설정값만큼 이동
- absolute : 절대 위치 지정 방식 / relative 지정된 부모 요소 기준으로 설정값만큼 이동
- fixed : 고정 위치 지정 방식 / 화면 기준으로 설정값만큼 이동
Position 속성
- top : 위의 여백 설정
- right : 오른쪽의 여백 설정
- bottom : 아래의 여백 설정
- left : 왼쪽의 여백 설정
- z-index : 겹쳐지는 요소들이 쌓이는 스택의 순서를 설정 / 레이어 설정
각 요소별 position 속성이 정의되어 있어야 사용 가능
Display
Flex
-
요소를 1차원 구조로 쉽게 정렬하고 공간을 분배할 수 있도록 해주는 속성
-
display: flex;로 flex 선언 -
flex-direction:: 정렬 방향 설정- row : 가로 정렬 (기본 값)
- row-reverse : 가로 역순 정렬
- column : 세로 정렬
- column-reverse : 세로 역순 정렬
-
justify-content:: 정렬 방향에 대한 정렬- flex-start : 정렬 방향 시작점에 위치 (기본 값)
- center : 정렬 방향 중간에 위치
- flex-end : 정렬 방향 끝에 위치
- space-between : 시작점부터 끝까지 자연스럽게 위치
- space-around : 작점부터 끝까지 살짝 떨어져서 위치
-
align-items:: 정렬 방향의 수직에 대한 정렬- flex-start : 정렬 방향 시작점에 위치 (기본 값)
- center : 정렬 방향 중간에 위치
- flex-end : 정렬 방향 끝에 위치
-
flex-warp:: 아이템 줄바꿈- wrap : 원본 크기를 보존하며 줄바꿈
- warp-reverse : 원본 크기를 보존하며 역순으로 줄바꿈
-
gap:: 요소간의 거리
Grid
-
웹 페이지를 행과 열로 나누어 2차원 레이아웃을 설계할 수 있도록 해주는 속성
-
display: grid;로 grid 선언 -
grid-template-columns:: 열의 크기 정의repeat(3, 1fr);: 3개의 열을 1:1:1 비율로 설정200px 2fr 1fr;: 3개의 열을 200px 2:1 비율로 설정
-
grid-template-rows:: 행의 크기 정의 -
justify-content:/align-items:/gap:등은 Flex와 동일하게 적용 -
각 요소별
grid-column/grid-row속성으로 grid에서의 위치 설정 가능- ex )
1 / 3/auto / span 2
- ex )
Transform
- 요소에 이동, 회전, 확대, 축소, 비틀기 효과를 부여하기 위한 함수를 제공
- 주로 hover와 함께 사용
이동
-
transform: translate(x, y): 요소를 x, y축 방향으로 이동 -
transform: translateX(n): 요소를 x축 방향으로 n만큼 이동 -
transform: translateY(n): 요소를 y축 방향으로 n만큼 이동
확대 / 축소
transform: scale(n): 요소를 n(비율)만큼 확대 / 축소
회전
transform: rotate(deg): 요소를 입력 값만큼 회전 (deg=각도)
마치며
CSS를 배울수록 JavaScript에 대한 기대감이 높아지는 것 같다. CSS만으로도 꽤 높은 퀄리티의 웹을 제작할 수 있을 것 같은데, 여기에 JavaScript의 기능적인 부분이 더해진다면 어떨지 상당히 기대가 되는 부분이다.
