소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 텍스트 유형02을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
webstandard
- 01_sliderType01
- 02_sliderType02
- slider02_01.html :
디자인
디자인도 간단합니다.
이론
!를 치고 tab을 누르겠습니다.
언어를 ko로 변경하고 title은 메뉴 유형01로 변경하겠습니다.
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>슬라이드 유형02</title>
<style>
/* font */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: "GmarketSans";
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
em {
font-style: normal;
}
.ir_so {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.gray {
background-color: #F6F8FD;
}
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background: rgba(0,0,0,0.3); */
}
.section {
padding: 120px 0;
text-align: center;
}
/* textType */
.text__inner {
display: flex;
justify-content: space-between;
text-align: left;
}
.text__title {
width: 30%;
}
.text__title span {
background: #FF3344;
color: #fff;
padding: 3px 20px;
display: inline-block;
margin-bottom: 10px;
border-radius: 20px;
text-transform: uppercase;
font-size: 14px;
}
.text__title h3 {
font-size: 50px;
margin-bottom: 20px;
word-break: keep-all;
}
.text__title p {
font-size: 16px;
font-weight: 500;
line-height: 1.6;
word-break: keep-all;
}
.text__text {
width: 66%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text__text .text {
width: 46%;
}
.text__text .text:nth-child(1){
margin-bottom: 60px;
}
.text__text .text h3 {
font-size: 24px;
font-weight: 500;
margin-bottom: 10px;
padding-top: 60px;
position: relative;
}
.text__text .text h3::before {
content: '';
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 0; top: 0;
background-image: url(../img/text_bg01.svg);
background-size: 160px;
}
.text__text .text:nth-child(1n) h3::before {
background-position: 5px 5px;
background-color: #D3D8FA;
}
.text__text .text:nth-child(2n) h3::before {
background-position: -36px 5px;
background-color: #CEF6EE;
}
.text__text .text:nth-child(3n) h3::before {
background-position: -75px 5px;
background-color: #F6F4E0;
}
.text__text .text:nth-child(4n) h3::before {
background-position: -115px 5px;
background-color: #F8D1D8;
}
.text__text .text p {
font-size: 16px;
font-weight: 300;
line-height: 1.6;
text-align: justify;
}
</style>
</head>
<body>
<section id="textType" class="text__wrap section gmarket gray">
<h2 class="ir_so">텍스트 유형2</h2>
<div class="text__inner container type2">
<div class="text__title">
<span>frontent</span>
<h3>프론트앤드 과정</h3>
<p>
프론트앤드 개발자로 취업하기 위한<br>
전문 과정입니다.<br>
여러분들도 도전해보세요!
</p>
</div>
<div class="text__text">
<div class="text">
<h3>웹 디자인</h3>
<p>웹디자이너가 포함된 웹 및 멀티미디어 디자이너는 다른 직업과 비교하여 임금과 복리후생이 낮은 편이다.</p>
</div>
<div class="text">
<h3>웹 퍼블리셔</h3>
<p>퍼블리싱은 웹 사이트를 제작할 때, 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 재정</p>
</div>
<div class="text">
<h3>프론트앤드 개발자</h3>
<p>사이트와 상호작용하는 모든 부분에 대한 개발, 관리, 유지 보수를 하는 것 솔루션의 프로세스</p>
</div>
<div class="text">
<h3>백앤드 개발자</h3>
<p>용어 자체에서 알 수 있듯이, 백엔드는 웹사이트나 웹 애플리케이션 또는 모바일 솔루션의 프로세스와 관련된입니다.</p>
</div>
</div>
</div>
</div>
</section>
<!-- //텍스트 영역(유형2) -->
</body>
</html>
view2
view3
view4
참고
728x90
