figma처럼 텍스트유형의 site를 만들어봤어요 !
6개의 섹션으로 구성되어 있으며 아이콘은svg를 이용해서 만들었어요!
SVG(Scalable Vector Graphics)가 뭔지 알아보고 갈게요 !
웹 친화적인 벡터 파일 포맷입니다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다. 따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합합니다.
SVG가 웹 디자이너에게 큰 인기인 이유는 크기 조정 기능 때문만은 아닙니다. SVG는 XML 코드로 작성되므로 모든 정보를 모양이 아닌, 텍스트로 저장합니다. 따라서 Google과 같은 검색 엔진이 SVG 그래픽을 키워드로 읽을 수 있으며 이는 웹 사이트의 검색 순위를 높이는 데 큰 도움이 됩니다.
SVG 파일의 확장자는 .svg입니다.
SVG 파일을 어떻게 만들지?
1. 피그마에서 만들 블록을 클릭
2. 오른쪽에 Export에서 SVG 타입으로 변경후
3. 하단 Export 레이어 클릭하여 만들어요 !
SVG 파일을 어떻게 쓰지 ?
.text__inner .text.t1::before {
background-color: #1FC8A9;
background-image: url(../asset/img/textType01_01.svg);
}
.text__inner .text.t2::before {
background-color: #1833C0;
background-image: url(../asset/img/textType01_02.svg);
}
.text__inner .text.t3::before {
background-color: #37C81F;
background-image: url(../asset/img/textType01_03.svg);
}
.text__inner .text.t4::before {
background-color: #C81FA3;
background-image: url(../asset/img/textType01_04.svg);
}
.text__inner .text.t5::before {
background-color: #C81F1F;
background-image: url(../asset/img/textType01_05.svg);
}
.text__inner .text.t6::before {
background-color: #1F63C8;
background-image: url(../asset/img/textType01_06.svg);
}
/* + 버튼 만들기*/
.text__btn::before {
content: '';
position: absolute;
background-image: url(../asset/img/icon__plus.svg);
right: 0;
top: 0;
width: 15px;
height: 15px;
transition: all 0.3s;
}
.text__btn:hover::before {
transform: rotate(360deg);
}해당구문처럼 SVG 파일을 불러오는식으로 썼어요!
SVG 파일을 만들땐 번잡하지만
SVG파일은 단점보다 장점이 많기 때문에 웹에서 많이 쓰여요 !
6개의 섹션.. 정렬을 어떻게 하지 ?
.text__inner {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
<div class="text__inner">
<div class="text t1">
<h3 class="text__title">내일 밤이 남은 까닭이요,</h3>
<p class="text__desc">아직 나의 청춘이 다하지 않은 까닭입니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">별 하나에 추억과</h3>
<p class="text__desc">별 하나에 추억과별 하나에 사랑과별 하나에</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">학교 때 책상을 같이했던</h3>
<p class="text__desc">아기 어머니 된 애들의 이름과,</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">별이 아스라이 멀 듯이,</h3>
<p class="text__desc">어머님,그리고 당신은 멀리 북간도에 계십니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">밤을 새워 우는 벌레는</h3>
<p class="text__desc">부끄러운 이름을 슬퍼하는 까닭입니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">하늘과 바람과 별과 시</h3>
<p class="text__desc">하늘과 바람과 별과 시(詩)라...
출판하지 못하였던 비운의 시집</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>.text__inner {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
구문을 넣어서 layout을 잡았어요
많이 써봐서 눈에 익죠 이젠 ?
flex-wrap: wrap &&& justify-content: space-between를 사용해서 레이아웃을 만들었어요 설명은 아래 !
flex-wrap 속성 값들
nowrap : 부모 넓이에 맞게 요소들의 넓이를 강제 축소
wrap : 부모 넓이보다 요소들의 총 넓이가 크다면 나머지 요소들을 다음줄로 줄바꿈
wrap-reverse : 줄바꿈 하는 요소들을 역순으로 배열
initial : 기본값 (nowrap)
inherit : 부모요소의 설정값을 사용
justify-content: space-between 를 공간안에 균등하게 나누기