- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
피그마에서 작업한 프레임 입니다.
HTML 코드입니다.
<section class="silder_wrap nexon">
<h2 class="blind">메인 슬라이드 영역</h2>
<div class="slider_inner">
<div class="slider">
<div class="silder_info container">
<span class="small">event</span>
<h3 class="title">반려묘와 함께하는 싸이트</h3>
<p class="desc">고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청,
고양이와와 함께 산책, 고양이와 함께 요리, 고양이와 함께 수면,
고양이와 함께 휴식을 공유 합니다.</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">상담 신청</a>
</div>
</div>
<div class="slider_arrow">
<a href="#"><span class="blind">이전 이미지</span></a>
<a href="#"><span class="blind">다음 이미지</span></a>
</div>
<div class="slider_dot">
<a href="#" class="dot active"><span class="blind">첫번쨰 이미지</span></a>
<a href="#" class="dot"><span class="blind">두번쨰 이미지</span></a>
<a href="#" class="dot"><span class="blind">세번째 이미지</span></a>
<a href="#" class="play"><span class="blind">플레이</span></a>
<a href="#" class="stop"><span class="blind">정지</span></a>
</div>
</div>
<!-- <div class="slider"></div>
<div class="slider"></div> -->
</div>
</section>코드정리
일단 section 태그를 만들어 주었고 class를 silder_wrap 과 nexon을 넣어 주었습니다. 그리고 그안에 h2태그를 넣어서 글씨를 써 주었습니다. h2안에 class를 blind를 추가해서 가렸습니다. 그다음 div태그 만들어서 class silder_inner 로 지정해 주었습니다. 그안에 EVENT모형,제목,글,자세히보기,상담신청 및 아이콘을 넣어 주었습니다.
CSS코드입니다.
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}
img{
vertical-align: top;
/* 화면 여백 없애기 */
width: 100%;
}
.blind{
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.container {
width: 1160px;
margin: 0 auto;
padding: 0px 20px;
/* background-color: rgba(0,0,0,0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.center {
text-align: center;
}
.section_small {
font-size: 14px;
border-radius: 50px;
background-color: #d85050;
color: #fff;
padding: 0 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section_h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section_desc {
font-size: 22px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* silder_wrap */
.slider_inner .slider {
height: 600px;
background-image: url(../asset/img/silderType01_01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.slider_inner .slider::after{
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0,0.1);
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.silder_info {
padding: 100px 0;
}
.silder_info .small {
display: inline-block;
padding: 1px 30px;
background-color: #fff;
color: #000;
font-size: 16px;
border-radius: 50px;
text-transform: uppercase;
margin-bottom: 10px;
}
.silder_info .title {
font-size: 80px;
color: #fff;
margin-bottom: 40px;
margin-left: -5px;
}
.silder_info .desc {
font-size: 18px;
line-height: 1.5;
color: #fff;
width: 50%;
word-break: keep-all;
}
.silder_info .btn {
margin-top: 100px;
}
.silder_info .btn a {
width: 180px;
height: 40px;
background-color: #fff;
font-size: 16px;
display: inline-block;
text-align: center;
line-height: 40px;
margin-right: 4px;
}
.silder_info .btn a:last-child{
background-color: #000;
color: #fff;
}
.slider_arrow a {
position: absolute;
top: 50%;
background-image: url(../asset/img/icon_main.svg);
background-size: 500px;
width: 30px;
height: 56px;
display: block;
margin-top: -28px;
}
.slider_arrow a:first-child {
left: 20px;
}
.slider_arrow a:last-child {
right: 20px;
background-position: -52px 0;
}
.slider_dot {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
}
.slider_dot a {
width: 16px;
height: 16px;
display: inline-block;
background-image: url(../asset/img/icon_main.svg);
background-size: 500px;
margin: 0 3px;
}
.slider_dot a.dot {
background-position: -101px -1px;
}
.slider_dot a.active {
background-position: -121px -1px;
}
.slider_dot a.play {
background-position: -141px -1px;
}
.slider_dot a.stop {
background-position: -161px -1px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
.slider_inner .slider {
background-image: url(../asset/img/silderType01_01.jpg);
}
}코드정리
전이랑 리셋css는 동일한데 blind가 추가되었습니다.
blind는 글자는 html에 들어가 있으나 시각적으로 보이지 않게 웹표준을 준수하기 위해서 만들었습니다.
silder_inner 에서 가상 선택자를 after를 넣어서 배경에 투명도를 넣어 주었습니다.
silder_arrow로 화살표 이미지를 넣어서 위치를 잡아주었습니다.
silder_dot에는 a태그를 넣고 그안에 span을 넣어서 글자는 안보에게 blind를 넣어 주었습니다. 그리고 나머지는 피그마를 참고해서 값을 넣어 주었습니다.
@media 쿼리는 디바이스의 픽셀 밀도(pixel density)가 2보다 큰 경우에만 적용되는 스타일을 정의합니다.
완성 사진입니다.
완성 사진 크게 보기
https://ture403.github.io/web2023/site/silderType/silderType01.html
슬라이드드 유형01
event 반려묘와 함께하는 싸이트 고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청, 고양이와와 함께 산책, 고양이와 함께 요리, 고양이와 함께 수면, 고양이와 함께 휴식을 공유 합니
ture403.github.io
완성 코드 보기
https://github.com/ture403/web2023/blob/main/site/silderType/silderType01.html