728x90
사이트 & 반응형 사이트
드디어 왔습니다. 사이트 완성형 + 반응형 입니다.
01. HTML
저의 🐶고생 끝에 완성되었습니다.
👻 HTML 코드 보기
<body>
<div id="skip">
<a href="#headerType">헤더 영역 바로가기</a>
<a href="#sliderType">슬라이드 영역 바로가기</a>
<a href="#imageType01">이미지 영역 바로가기</a>
<a href="#imgTextType">이미지/텍스트 영역 바로가기</a>
<a href="#cardType">카드 영역 바로가기</a>
<a href="#bannerType">배너 영역 바로가기</a>
<a href="#textType">텍스트 영역 바로가기</a>
<a href="#footerType">푸터 영역 바로가기</a>
</div>
<!-- //skip -->
<header id="headerType" class="header__wrap nexon">
<div class="header__inner">
<div class="header__logo">
<a href="#">Jelly <em>Fish</em></a>
</div>
<div class="header__menu">
<ul>
<li><a href="#sliderType">슬라이드 영역</a></li>
<li><a href="#imageType">이미지 영역</a></li>
<li><a href="#imgTextType">이미지 텍스트 영역</a></li>
<li><a href="#cardType">카드 영역</a></li>
<li><a href="#bannerType">배너 영역</a></li>
<li><a href="#textType">텍스트 영역</a></li>
<li><a href="#footerType">푸터 영역</a></li>
</ul>
</div>
<div class="header__member">
<a href="#">로그인</a>
</div>
<a href="#" class="header__icon">
<img src="../site_img/bars-solid.svg" alt="">
</a>
</div>
</header>
<!-- //hraderType -->
<main id="mainType">
<section id="sliderType" class="slider__wrap nexon scroll">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__img">
<div class="desc">
<span>Under the Sea</span>
<h3>Jelly fish</h3>
<p>
심해 그 저편에는 말랑한 해파리들이 <br>
가득 있습니다! 우리 같이 여러 모습들을 구경해보아요.
</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#" class="black">사이트 보기</a>
</div>
</div>
</div>
<div class="slider__arrow">
<a href="#" class="left"><span class="ir">이전 이미지</span></a>
<a href="#" class="rigth"><span class="ir">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="ir">1</span></a>
<a href="#" class="dot"><span class="ir">2</span></a>
<a href="#" class="dot"><span class="ir">3</span></a>
<a href="#" class="play"><span class="ir">플레이</span></a>
<a href="#" class="stop"><span class="ir">정지</span></a>
</div>
</div>
</div>
</section>
<!-- //sliderType -->
<section id="imageType" class="image__wrap nexon section scroll">
<h2>해파리들이 둥둥 떠다니는 모습</h2>
<p>정해진 갈 길 없이 흘러가는 대로 움직이다보면 새로운 만남이 있어요.</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">화려한 모습의 해파리</h3>
<p class="image__desc">색감과 그 화려한 치마와 같은 구완들이 바다속에서 자유롭게 있어요, <br> 만지면 돌이킬 수 없을 정도로 아프니 주의합시다.</p>
<a class="image__btn" href="#" title="자세히 보기">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">동그란 모습의 해파리</h3>
<p class="image__desc">콕, 찔러보아 젤리처럼 부드럽게 흐물거리는 모습을 보고싶지만 <br>해파리 주변엔 해파리들이 가득있어요 바라보기만 합시다.</p>
<a class="image__btn yellow" href="#" title="자세히 보기">자세히 보기</a>
</article>
</div>
</section>
<!-- //imgeType -->
<section id="imgTextType" class="imgText__wrap nexon section black scroll">
<h2 class="blind">해파리의 신비한 빛깔</h2>
<div class="imgText__inner container">
<div class="imgText__txt">
<span>jellu fisf color</span>
<h3> 해파리의 <br>신비한 빛깔 </h3>
<p> 빛에 따라 달라지지만, 어떠한 색깔도 잘 어울리는 모습을 보입니다.</p>
<ul>
<li><a href="#">노무라입깃해파리</a></li>
<li><a href="#">보름달물해파리</a></li>
<li><a href="#">사자갈기해파리</a></li>
<li><a href="#">스티기오메두사</a></li>
<li><a href="#">숲뿌리해파리</a></li>
<li><a href="#">범피</a></li>
</ul>
</div>
<div class="imgText__wold">
<div class="imgText__img img1">
<a href="#">대양해파리</a>
</div>
<div class="imgText__img img2">
<a href="#" class="blue">커튼원양해파리</a>
</div>
</div>
</div>
</section>
<!-- //imgTextType -->
<section id="cardType" class="card_wrap nexon section scroll">
<h2>해파리가 흘러갑니다 - ଳ</h2>
<p>흔들흔들 , 사람들이 일상에 치이는 것처럼 해파리도 물살에 치여 움직인답니다.</p>
<div class="card_inner container">
<article class="card">
<figure class="card_header">
<img src="../site_img/card_bg01.jpg" alt="고양이가 가만히 있을 때">
</figure>
<div class="card_body">
<h3 class="tit">넙적한 해파리</h3>
<p class="desc">넙적한 상산이 작은 촉수들과 어울려 바다에서 흔들립니다. 파란색 해파리를 멍하게 바라보다 보면 어느샌가 시간이 엄청 지나가있어요, 그렇지만 빠져들게 되지 않나요?</p>
<a href="/" class="btn">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card_header">
<img src="../site_img/card_bg02.jpg" alt="고양이가 자고 있을 때">
</figure>
<div class="card_body">
<h3 class="tit">조그마한 해파리</h3>
<p class="desc">바쁜듯 열심히 구완을 흩날리고 있지만 사실은 해파리는 흘러가고 있답니다. 하루에 할일이 지나다니는 것 뿐이라니 부러워요 저도 요 조그마한 해파리 처럼 가만히 즐기고 싶다.</p>
<a href="/" class="btn">
더 자세히 보기
<span aria-hidden="true"> <!-- 이미지 읽지 않기 표시 -->
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card_header">
<img src="../site_img/card_bg03.jpg" alt="고양이 사진이 너무 잘찍혔을 때">
</figure>
<div class="card_body">
<h3 class="tit">풍선같은 해파리</h3>
<p class="desc">보자마자 풍선같은 생김새에 웃음이 나와요. 후 바람을 부르면 하늘로 올라같 것 같습니다. 사실은 바다가 제 2의 하늘이 아닐까요? 높이 높이 올라가렴 작은 풍선 해파리야</p>
<a href="/" class="btn">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z" fill="black"/>
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- //cardType -->
<section id="bannerType" class="banner__wrap nexon scroll">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner">
<h3 class="title">해파리 사이트</h3>
<p class="desc">해파리들이 얼마나 아름다운지 알리는 사이트
<a href="#" title="해파리 보러가기">어떠신가요?</a>
</p>
<span class="small">배너 유형 01</span>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="text__wrap nexon section scroll">
<span>텍스트 유형 01</span>
<h2 class="mb70">해파리의 신기한 이야기들</h2>
<div class="text__inner container">
<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>
</section>
<!-- //textType -->
</main>
<!-- //mainType -->
<footer id="footerType" class="footer__wrap nexon section gray scroll">
<h2 class="blind">푸터 영역</h2>
<div class="footer__inner container">
<div class="footer__menu">
<div>
<h3>사이트</h3>
<ul>
<li><a href="#">웹표준 사이트</a></li>
<li><a href="#">반응형 사이트</a></li>
<li><a href="#">패럴랙스 사이트</a></li>
<li><a href="#">포트폴리오 사이트</a></li>
</ul>
</div>
<div>
<h3>헤더 영역</h3>
<ul>
<li><a href="#">메뉴 유형01</a></li>
<li><a href="#">메뉴 유형02</a></li>
</ul>
</div>
<div>
<h3>슬라이드 영역</h3>
<ul>
<li><a href="#">슬라이드 유형01</a></li>
<li><a href="#">슬라이드 유형02</a></li>
</ul>
</div>
<div>
<h3>이미지 영역</h3>
<ul>
<li><a href="#">이미지 유형01</a></li>
<li><a href="#">이미지 유형02</a></li>
<li><a href="#">이미지/텍스트 유형01</a></li>
<li><a href="#">이미지/텍스트 유형02</a></li>
<li><a href="#">텍스트 유형01</a></li>
</ul>
</div>
<div>
<h3>컨텍츠 영역</h3>
<ul>
<li><a href="#">카드 유형01</a></li>
<li><a href="#">카드 유형02</a></li>
<li><a href="#">카드 유형03</a></li>
</ul>
</div>
<div>
<h3>푸터 영역</h3>
<ul>
<li><a href="#">푸터 메뉴 유형01</a></li>
<li><a href="#">푸터 컨택트 유형02</a></li>
<li><a href="#">푸터 이메일 유형03</a></li>
</ul>
</div>
</div>
<div class="footer__rigth">
2022 Manyong. Portfolio is Power<br>
All rights reserved.
</div>
</div>
</footer>
<!-- //footerType -->
<script>
</script>
</body>02. Css
각 타입 별로 나눠서 보여드리겠습니다.
👻 CSS header 코드
/* 헤더 유형 */
.header__inner {
position: fixed;
left: 0;
top: 0;
background-color: #141414;
/* backdrop-filter: blur(10px); */
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
border-bottom: 1px solid #000;
z-index: 10000;
}
.header__logo {
width: 10%;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
}
.header__logo a {
color: #715af4;
}
.header__logo em {
color: rgb(145, 145, 145);
font-size: 18px;
font-weight: 400;
}
.header__menu {
width: 80%;
text-align: center;
}
.header__icon {
display: none;
}
.header__menu li {
display: inline;
}
.header__menu li a {
padding: 13px 30px;
margin: 0 5px;
color: rgb(145, 145, 145);
transition: background-color 0.3s ;
}
.header__menu li.active a {
background-color: #3d26c0;
border-radius: 5px;
color: #fff;
}
.header__menu li a:hover {
background-color: #3d26c0;
color: #fff;
border-radius: 5px;
}
.header__member {
text-align: right;
width: 10%;
}
.header__member a {
font-size: 16px;
border: 1px solid rgb(145, 145, 145);
padding: 10px 30px;
border-radius: 50px;
transition: all 0.3s;
color: #fff;
}
.header__member a:hover {
background-color: #3d26c0;
color: #fff;
}
/* @media(max-width : 800px){
.header__inner {
height: 50px;
}
.header__logo em {
display: none;
}
.header__menu ul li {
width: 90%;
}
.header__menu ul li a{
padding: 9px 3px;
}
.header__menu ul li:nth-child(1),.header__menu ul li:nth-child(5),.header__menu ul li:last-child {
display: none;
}
.header__member {
display: none;
}
} */
@media(max-width : 460px){
#headertype {
overflow: hidden;
}
.header__inner {
padding: 10px;
width: 100%;
display: block;
overflow: hidden;
}
.header__logo {
width: 80%;
}
.header__menu {
display: none;
width: 100%;
flex-direction: column;
/* align-items: flex-start; */
padding-top: 15px;
}
.header__menu li {
width: 100%;
text-align: center;
display: block;
margin-bottom: 15px;
}
.header__menu li a {
padding: 7px 115px;
}
.header__member {
width: 100%;
display: none;
}
.header__member a {
padding: 10px 15px;
}
.header__icon {
width: 20%;
height: 15px;
width: 15px;
display: block;
background-color: #715af4;
position: fixed;
top: 18px;
left: 425px;
}
.header__menu.active, .header__member.active {
display: flex;
justify-content: center;
}
}👻 CSS slider 코드
.slider__inner {
margin-top: 70px;
}
.slider {
position: relative;
}
.slider__img {
background: url(../../../slideType/img/slider_bg01.jpg) no-repeat center / cover ;
}
.slider__img:hover {
filter: brightness(120%);
transition: all 0.3s ease;
}
.slider__img .desc {
width: 1160px;
margin: 0 auto;
padding: 100px 20px;
}
.slider__img .desc span{
font-size: 16px;
height: 20px;
line-height: 15px;
background-color: #fff;
padding: 6px 14px 0 14px;
border-radius: 30px;
text-transform:uppercase;
margin-bottom: 15px;
display: inline-block;
}
.slider__img .desc h3{
font-size: 110px;
font-weight: 500;
line-height: 1;
color: #fff;
text-transform: uppercase;
margin-bottom: 16px;
padding-top: 10px;
margin-left: -8px;
}
.slider__img .desc p {
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 1.35;
margin-bottom: 130px;
}
.slider__img .desc .btn {
}
.slider__img .desc .btn a{
font-size: 16px;
background-color: rgba(255, 255, 255, 0.800);
padding: 11px 50px;
display: inline-block;
}
.slider__img .desc .btn a.black {
background: rgba(0, 0, 0, 0.555);
color: #fff;
}
.slider__arrow a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 56px;
background-image: url(../../../slideType/img/slider_icon.svg);
}
.slider__arrow a.left {
left: 20px;
}
.slider__arrow a.rigth {
right: 20px;
background-position: -50px 0px;
}
.slider__dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 25px;
}
.slider__dot a {
display: inline-block;
width: 16px;
height: 16px;
background-image: url(../../../slideType/img/slider_icon.svg);
background-position: -20px -70px ;
}
.slider__dot a.active {
background-position: 0px -70px;
}
.slider__dot a.play {
background-position: -40px -70px;
}
.slider__dot a.stop {
background-position: -60px -70px;
}
@media(max-width : 460px){
.slider__inner {
width: 100%;
margin-top: 55px;
}
.slider__img {
width: 100%;
}
.slider__img .desc {
width: 460px;
padding: 100px 0;
}
.slider__img .desc h3 {
font-size: 40px;
margin-left: 30px;
}
.slider__img .desc span {
font-size: 14px;
margin-bottom: 5px;
margin-left:30px;
}
.slider__img .desc p {
font-size: 14px;
margin-left: 30px;
}
.slider__img .desc .btn {
text-align: center;
}
.slider__arrow a.rigth, .slider__arrow a.left {
top: 300px;
}
}👻 CSS imgType 코드
/* img type */
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
color: #fff;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
overflow: hidden;
transition: all 0.15s ease-in-out;
}
.image.img1 {
background: url(../../../site_img/imgType01_01.png) no-repeat center;
}
.image.img2 {
background: url(../../../site_img/imgType01_02.png) no-repeat center;
}
.image.img1:hover,.image.img2:hover {
transform: scale(1.01);
filter: brightness(110%);
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
}
.image__desc {
font-size: 16px;
font-weight: 300;
margin-bottom: 10px;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.image__btn {
font-size: 16px;
color: #fff;
background-color: #1f1d94af;
padding: 10px 20px;
display: inline-block;
}
.image__btn.yellow {
background-color: #626cc9b6;
}
@media(max-width : 460px){
.image__inner {
width: 100%;
flex-direction: column;
}
.image {
width: 100%;
margin-bottom: 10px;
}
.image__title {
font-size: 28px;
}
.image__desc {
font-size: 16px;
}
}👻 CSS imgTextType 코드
/* 이미지 텍스트 유형 */
.imgText__inner {
display: flex;
justify-content: space-between;
}
.imgText__inner div {
width: 32%;
/* height: 500px; */
}
.imgText__txt span {
font-size: 16px;
color: #666;
text-decoration: underline;
text-underline-position: under;
margin-bottom: 20px;
display: block;
}
.imgText__txt h3 {
color: #fff;
font-size: 50px;
font-weight: 300;
word-break: keep-all;
line-height: 1.4;
margin-bottom: 20px;
}
.imgText__txt p {
font-size: 18px;
font-weight: 300;
line-height: 1.5;
color: rgb(218, 218, 218);
margin-bottom: 10px;
}
.imgText__txt ul {
font-size: 18px;
font-weight: 300;
line-height: 1.6;
}
.imgText__txt ul li {
padding-left: 20px;
position: relative;
}
.imgText__txt ul li a {
color: rgb(148, 148, 148);
}
.imgText__txt ul li::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
left: 5px;
top: 9px;
background: rgb(148, 148, 148);
}
.imgText__wold {
display: contents;
}
.imgText__img {
border-radius: 10px;
position: relative;
}
.imgText__img a {
position: absolute;
left: 30px;
bottom: 30px;
background-color: #66a4ce7a;
color: #fff;
font-size: 18px;
padding: 10px 30px;
border-radius: 30px;
display: inline-block;
}
.imgText__img a.blue {
background-color: rgba(125, 102, 209, 0.527);
}
.imgText__img.img1{
background : url(../../../imgTextType/img/imgText_01.jpg) no-repeat center / cover ;
}
.imgText__img.img2{
background: url(../../../imgTextType/img/imgText_02.jpg) no-repeat center / cover;
}
@media(max-width : 460px){
.imgText__inner {
flex-direction: column;
}
.imgText__inner div {
width: 100%;
text-align: center;
}
.imgText__txt {
height: 350px;
margin-bottom: 40px;
}
.imgText__txt span {
font-size: 12px;
margin-bottom: 10px;
}
.imgText__txt h3 {
font-size: 32px;
margin-bottom: 10px;
}
.imgText__txt p {
width: 60%;
padding-left: 88px;
font-size: 16px;
word-break: keep-all;
}
.imgText__txt ul li a {
font-size: 14px;
}
.imgText__txt ul li::before {
left: 135px;
}
.imgText__wold {
display: flex;
height: 350px;
}
.imgText__img {
border-radius: 15px;
}
.imgText__img.img1{
margin-right: 5px;
}
.imgText__img a {
font-size: 14px;
}
}👻 CSS card 코드
/* cardType */
.card_inner {
display: flex;
justify-content: space-between; /* 가운데 정렬로 맞추기*/
}
.card {
width: 32%;
background-color: #f5f5f5;
}
.card_body {
padding: 24px;
}
.card_body .tit {
font-size: 24px;
margin-bottom: 10px;
overflow: hidden; /* 한줄 효과 */
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 20px;
}
.card_body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
overflow: hidden; /* 2줄 이상 효과 */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
@media(max-width : 460px){
.card_inner {
flex-direction: column;
width: 100%;
}
.card {
width: 100%;
margin-bottom: 10px;
}
}👻 CSS banner 코드
.banner__inner {
background-image: url(../../../bannerType/img/banner_bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
padding: 120px 0;
color: #fff;
}
.banner__inner .title {
font-size: 50px;
line-height: 1;
font-weight: 500;
margin-bottom: 40px;
}
.banner__inner .desc {
font-size: 24px;
line-height: 1.5;
font-weight: 300;
margin-bottom: 70px;
}
.banner__inner .desc a {
color: #fff;
display: block;
}
.banner__inner .desc a:hover {
text-decoration: underline;
}
.banner__inner .small {
font-size: 16px;
text-decoration: underline;
}
@media(max-width : 460px){
.banner__inner {
padding: 80px;
}
.banner__inner .title {
font-size: 40px;
}
.banner__inner .desc {
font-size: 18px;
margin-bottom: 34px;
}
}👻 CSS text 코드
/* 텍스트 유형 */
.text__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text {
width: 32%;
margin-bottom: 2%;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
transition: background 0.4s;
}
.text:hover {
background-color: #f5f5f5;
}
.text__title {
font-size: 24px;
line-height: 1;
margin-bottom: 10px;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
padding-top: 75px;
}
.text__title::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
background: url(../img/text_type_01_.svg);
border-radius: 50%;
}
.text.t1 .text__title::before {
background-position: 0 0;
}
.text.t2 .text__title::before {
background-position: -100px 0;
}
.text.t3 .text__title::before {
background-position: -200px 0;
}
.text.t4 .text__title::before {
background-position: -300px 0;
}
.text.t5 .text__title::before {
background-position: -400px 0;
}
.text.t6 .text__title::before {
background-position: -500px 0;
}
.text__desc {
font-size: 18px;
font-weight: 300;
line-height: 1.4;
overflow: hidden; /* 2줄 이상 효과 */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom: 20px;
}
.text_btn {
font-size: 16px;
line-height: 1;
text-decoration: underline;
color: #666;
text-underline-position: under;
}
@media(max-width : 460px){
.text__inner {
width: 100%;
flex-direction: column;
}
.text {
width: 100%;
}
.text__title {
font-size: 20px;
}
.text__desc {
font-size: 14px;
}
.text_btn {
font-size: 14px;
}
}
👻 CSS footer 코드
.footer__inner {}
.footer__inner .footer__menu {
display: flex;
margin-bottom: 70px;
}
.footer__inner .footer__menu > div {
width: 16%;
}
.footer__inner .footer__menu h3 {
font-size: 18px;
margin-bottom: 20px;
}
.footer__inner .footer__menu li a {
font-size: 14px;
color: #666;
margin-bottom: 10px;
display: block;
}
.footer__inner .footer__rigth {
border-top: 1px solid #d9d9d9;
text-align: center;
padding-top: 40px;
color: #666;
line-height: 1.5;
}
@media(max-width : 460px){
.footer__inner {
}
.footer__inner .footer__menu {
width: 100%;
text-align: center;
}
.footer__inner .footer__menu h3 {
font-size: 14px;
line-height: 1.4;
word-break: keep-all;
}
.footer__inner .footer__menu li a {
font-size: 8px;
line-height: 1.4;
word-break: keep-all;
}
.footer__inner .footer__menu > div {
width: 20%;
}
.footer__inner .footer__rigth {
width: 100%;
}
}03. Javascript
페럴렉스 이펙트에 사용하는 자바스크립트와, width 값이 460px이 되었을 때 햄버거 버튼이 생기는 자바스크립트를 만들었습니다.
👻 Javascript 코드
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; //이렇게 3개 중첩해서 사용 가능
//forEach 문
document.querySelectorAll(".scroll").forEach((e,i)=>{
if(scrollTop >= e.offsetTop-500 ){ //scrollTop이 id값 이상이면
document.querySelectorAll(".header__menu ul li").forEach((li)=>{
li.classList.remove("active");
});
document.querySelector(".header__menu ul li:nth-child("+(i+1)+")").classList.add("active");
};
});
});
document.querySelectorAll(".header__menu li a").forEach( li => {
li.addEventListener("click", e => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({behavior: "smooth"});
});
});
const headerIcon = document.querySelector(".header__icon")
const menu = document.querySelector(".header__menu")
const member = document.querySelector(".header__member")
headerIcon.addEventListener("click", ()=>{
menu.classList.toggle("active")
member.classList.toggle("active")
})마지막으로 , . . . 다들 해파리한 하루 되세요 - ଳ
728x90
'사이트 보기' 카테고리의 다른 글
| 슬라이드 유형 01 (3) | 2022.09.05 |
|---|---|
| 배너 유형 01 (5) | 2022.09.05 |
| 푸터 유형 01 (2) | 2022.09.05 |
| 헤더 사이트 (8) | 2022.09.01 |
| 텍스트 / 이미지 사이트 (6) | 2022.09.01 |
댓글