1. MEDIA QUERY
미디어 쿼리는 특정 브라우저 폭을 지정해서 css 구문을 입력하면 해당 브러우저 폭에서는 미디어 쿼리 안쪽의 구문이 기존의 css구문을 덮어쓴다. 원본 CSS와 속성값이 같다면 생략이 가능하고 속성을 추가적으로 작성해도 된다. 미디어 쿼리 구간에서는 전체 너비 합이 100%가 되도록 구성해야한다. 그러기 위해 고정 픽셀이 아닌 %로 바꾸어야만 한다.
@media screen and (max-width:1179px) {
section {
padding: 100px 0;
}
section .inner {
width: 100%;
}
section .inner .wrap article {
width: 49%;
margin-right: 2%;
}
}
화면 크기를 줄여도 유사한 비율을 유지하는 것을 볼 수 있다.
@media screen and (max-width:768px) {
section {
padding: 50px 0;
}
}
화면 크기를 줄여도 유사한 비율을 유지하는 것을 볼 수 있다.
@media screen and (max-width: 480px) {
section {
padding: 50px 0;
}
section .inner .wrap article {
width: 100%;
margin-right: 0;
margin-bottom: 2%;
}
}
화면 크기를 줄이니 사각형 하나가 아래로 내려가는 것을 볼 수 있다.
2. SVG
svg의 path 스타일을 변경할 수 있다.
svg path {
fill: transparent; /* 배경색 */
stroke: red; /* 선의 색 */
stroke-width: 1; /* 선의 굵기 */
}
2-1. view box
svg에는 viewbox라는 개념이 존재한다. 주어진 크기 내에서 좌표평면을 활용해 svg의 위치를 지정하는 것이다.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
(0, 0)에 svg를 넣으니 다른 테두리는 괜찮은데 아래부분 테두리가 잘리는 것을 볼 수 있다. 이미지와 주어진 크기가 맞지 않아서 생긴 문제다.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-10 -10 512 512">
(-10, -10)에 단풍을 옮기니 우하단으로 이동하는 것을 볼 수 있다. 하지만
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="10 10 512 512">
(10, 10)에 단풍을 옮기니 좌상단으로 이동하는 것을 볼 수 있다.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="10 10 532 532">
532, 532로 크기를 조정하니 사진이 조금 더 커졌다.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="-10 -10 532 532">
532 532의 크기에서 (-10, -10)으로 이동하니 크기도 조정되고 위치도 적절히 조정된 것을 볼 수 있다.
2-2. stroke-dasharray / stroke-dashoffset
dasharray는 선의 간격을 띄우는 기능을 하고, dashoffset은 보이는 선의 시작 위치를 지정할 수 있다.
/* 선의 간격을 띄우는 속성 */
stroke-dasharray: 100;
/* 가시영역에 보이는 선의 시작위치 */
stroke-dashoffset: 0;
dasharray를 100, dashoffset을 0으로 바꾸니 보이는 테두리가 조금 달라진 것을 볼 수 있다.
/* 선의 간격을 띄우는 속성 */
stroke-dasharray: 100;
/* 가시영역에 보이는 선의 시작위치 */
stroke-dashoffset: -50;
dasharray를 100, dashoffset을 -50으로 바꾸니 보이는 테두리가 조금 달라진 것을 볼 수 있다.
/* 선의 간격을 띄우는 속성 */
stroke-dasharray: 100;
/* 가시영역에 보이는 선의 시작위치 */
stroke-dashoffset: -100;
dasharray를 100, dashoffset을 -100으로 바꾸니 보이는 테두리가 조금 달라진 것을 볼 수 있다.
/* 선의 간격을 띄우는 속성 */
stroke-dasharray: 2173;
/* 가시영역에 보이는 선의 시작위치 */
stroke-dashoffset: 0;
dasharray를 2173, dashoffset을 0으로 맞추니 테두리가 모두 보이는 것을 볼 수 있다.
/* 선의 간격을 띄우는 속성 */
stroke-dasharray: 2173;
/* 가시영역에 보이는 선의 시작위치 */
stroke-dashoffset: 2173;
dasharray를 2173, dashoffset을 2173으로 했더니 테두리가 보이지 않는 것을 볼 수 있다.
3. FLEX
flex 속성은 블록 속성을 유지하면서 자식 요소에 flex 속성을 지정할 수 있다.
display: flex;
inline-flex 속성은 인라인 속성을 유지하면서 자식 요소에 flex 속성을 지정할 수 있다.
display: inline-flex;
3-1. flex-direction
flex-direction은 자식요소의 정렬방향을 지정할 수 있다.
/* 자식요소 정렬방향 지정 */
flex-direction: row;
/* 자식요소 정렬방향 지정 */
flex-direction: column;
3-2. justify-content
justify-content는 자식요소의 정렬을 지정할 수 있다.
/* 자식요소 정렬 */
justify-content: flex-start;
/* 자식요소 정렬 */
justify-content: flex-end;
/* 자식요소 정렬 */
justify-content: space-between;
/* 자식요소 정렬 */
justify-content: space-around;
/* 자식요소 정렬 */
justify-content: space-evenly;
3-3. order
order 속성으로 자식 요소의 순서를 지정할 수 있다.
/* 자식 요소의 순서 지정 */
section article:nth-of-type(1) {
order: 5;
}
section article:nth-of-type(2) {
order: 3;
}
section article:nth-of-type(3) {
order: 2;
}
section article:nth-of-type(4) {
order: 4;
}
section article:nth-of-type(5) {
order: 1;
}
3-4. flex-grow
flex-grow 속성은 요소의 안쪽 여백 확대를 할 수 있다.
.box2 article:nth-of-type(1){
/* 요소의 안쪽 여백 확대 */
flex-grow: 1;
}
.box2 article:nth-of-type(2){
/* 요소의 안쪽 여백 확대 */
flex-grow: 5;
}
.box2 article:nth-of-type(3){
/* 요소의 안쪽 여백 확대 */
flex-grow: 1;
}
3-5. flex-shrink
flex-shrink 속성은 요소의 안쪽 여백 축소를 할 수 있다.
.box3 article:nth-of-type(1) {
flex-shrink: 1;
}
.box3 article:nth-of-type(2) {
flex-shrink: 5;
}
.box3 article:nth-of-type(3) {
flex-shrink: 1;
}
'Today I Learned > CSS' 카테고리의 다른 글
| [CSS] rem, em - 에이블런 프론트엔드부트캠프 8일차 (0) | 2024.07.24 |
|---|---|
| [CSS] FLEX를 활용한 반응형 레이아웃 - 에이블런 프론트엔드부트캠프 7일차 (1) | 2024.07.24 |
| [CSS] CSS 4 - 에이블런 프론트엔드부트캠프 5일차 (0) | 2024.07.19 |
| [CSS] Loading bar - 에이블런 프론트엔드부트캠프 5일차 (0) | 2024.07.19 |
| [Task] 과제 리팩토링 - 에이블런 프론트엔드부트캠프 4일차 (2) | 2024.07.19 |
