프론트엔드/특강
특강6일 :반응형 웹사이트만들기
김곰댕
2021. 12. 6. 12:56
728x90
<!doctype html>
<html class="no-js" lang="ko">
<head>
<title>조선해양 경량소재 온라인라이브러리 MARIN CONVERGENCE MATERIALS CENTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta name="description" content="MARIN CONVERGENCE MATERIALS CENTER"/>
<meta name="keywords" content="MARIN CONVERGENCE MATERIALS CENTER"/>
<meta name='viewport' content='user-scalable=yes, width=device-width, target-densitydpi=medium-dpi'/>
<link rel="stylesheet" type="text/css" href="../css/swiper.css"/>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<!-- <link rel="stylesheet" type="text/css" href="../css/contents.css"/> -->
<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/jquery-migrate-1.4.1.min.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/placeholders.min.js"></script>
<script src="../js/html5.js"></script>
<script src="../js/modernizr.custom.70111.js"></script>
<script src="../js/prefixfree.dynamic-dom.js"></script>
<script src="../js/jquery-ui.js"></script>
<!-- <script src="../js/script.js"></script> -->
<style>
/*header*/
#header { height: 113px; background : #191919; position: relative; }
#header .logo{ position: absolute; left:44px; top:36px; width: 297px; height:41px; }
#header .logo a{ display:block; width: 100%; height:100%; background: url(../imgs/logo.png) no-repeat; background-size: 100%; text-indent: -9999px ; font-size: 0; }
.gnbWrap { position: absolute; left: 50%; top: 0; height: 114px; width: 760px; margin-left: -380px; transition: all 0.3s;}
.menu { display: flex; justify-content: center; }
.menu li a{ padding: 0 30px; display: flex; align-items: center; height:114px; font-size:17px ;color : #fff; }
.utility { position: absolute; right: 44px; top:40px; width:40px; height: 40px;}
.tLogin { display: block; width:40px; height: 40px; background: url(../imgs/ic-login.png) no-repeat; text-indent: -9999px; }
.allMenu { display:none; position: absolute; right:20px; top: 26px; width: 25px; height: 40px; }
.allMenu a { display: block; width: 100%; height: 100%; }
.allMenu a i { display: block; width: 100%; height: 2px; background: #fff; margin-bottom: 8px; }
.mainSearchArea { padding: 70px 0 78px; width: 50%; margin:0 auto; max-width: 750px; }
.sBox { border: 1px solid #191919; width: 100%; height: 75px; border-radius: 40px; padding: 0 40px; position: relative; display: flex; align-items: center; }
/*display:flex를 하면 자식에 적용*/
.sBox { display: flex; }
.sBox > * { border:none; background:none; }
/* flex에 0을 주고 뒤에 px를 하면 그 px만큼만
flex에 1을 주면 가득 채워줌*/
.sBox select { flex: 0 0 140px; height: 26px; }
.sBox input { flex: 1; height: 40px; padding-left: 10px; }
.sBox button { flex: 0 0 26px; height: 26px; background: url(../imgs/ic-search.png) no-repeat; text-indent: -9999px; }
.baseWidth { width: 1440px; margin: 0 auto; }
.mainCopy { font-family: Montserrat; text-align:center; }
/* line-height:1은 지금 font-size만큼 */
.mainCopy em { font-size: 20px; font-weight: 700; color: #afafaf; line-height: 1; display: block; margin-bottom: 25px; }
.mainCopy strong { font-size: 55px; font-weight: 700; color: #000; line-height: 1; letter-spacing: -0.25px; }
/* justify-content: space-between; : 공간을 알아서 배분함 */
.mList { padding-top: 128px; display: flex; justify-content: space-between; }
.mList li { width: 448px; }
.mList li.even { padding-top: 230px; }
/* .mList li ul.con li { } : 원래 .con li의 구조 */
.con li { padding-bottom: 95px; }
.con li a{ display: block; }
.con li a img { }
.con li a h3 { margin: 24px 0 0; font-size: 24px; font-weight: 700; color: #000; letter-spacing: -0.25px; font-family: Montserrat; }
/* word-break: keep-all; : 줄바꿈시에 단어단위로 될 수 있게 */
.con li a p { color: #515151; line-height: 1.5; letter-spacing: -0.25; padding-top: 12px; word-break: keep-all; }
.moreDiv { text-align: center; }
.moreDiv a { font-size: 19px; color: #111; font-weight: 600; font-family: Montserrat; position: relative; display: inline-block; line-height: 1; padding: 9px 75px 15px 0; margin-bottom: 100px; }
/* before : 빈공간? 을 만들어서 동그라미 만든것 */
.moreDiv a::before { content: ""; display: block; width: 38px; height: 38px; border-radius: 20px; background: #e2e5f3; position: absolute; right: 0; top: 0; }
.moreDiv a::after { content: ""; display: block; width: 33px; height: 8px; background: url(../imgs/ic-arrow2.png) no-repeat; position: absolute; right: 23px; top:15px; }
.mView { display: none; }
/* max-width는 값이 큰거부터 적어야 하지만 min-width는 값이 작은거부터 적어야함 (보통 min-width는 모바일을 기준으로 할때 많이 사용) */
/*미디어쿼리*/
@media only screen and (max-width: 1280px) {
/* 바뀌는속성만 넣으면됨 */
.gnbWrap { margin-left: -250px;}
}
@media only screen and (max-width: 1024px) {
#header { height: 75px; }
#header .logo{ left:20px; top:20px; width: 220px; }
.gnbWrap { display: none; }
.allMenu { display: block; }
.utility { top: 24px; }
}
</style>
</head>
<body>
<div id = "wrap">
<header id = "header">
<h1 class = "logo">
<a href = "#n">조선해양 경량소재 온라인라이브러리</a>
</h1>
<div class = "gnbWrap">
<div id = "top_menu">
<div class = "menu_wrap">
<ul class = "menu">
<li class = "first_mm mn1">
<a href = "#n" class ="mm1">소재정보</a>
</li>
<li class = "mn2">
<a href = "#n" class ="mm2">회원사정보</a>
</li>
<li class = "mn3">
<a href = "#n" class ="mm3">지식정보</a>
</li>
<li class = "mn4">
<a href = "#n" class ="mm4">알림마당</a>
</li>
<li class = "mn5">
<a href = "#n" class ="mm5">센터소개</a>
</li>
</ul>
</div>
</div>
</div>
<div class="gnbOverBg"><div></div></div>
<div class="utility">
<a href="#m" class="tLogin">로그인</a>
</div>
<div class="allMenu">
<a href="#n">
<!-- <i> : 글자를 이태릭체로 -->
<i></i><i></i><i></i>
</a>
</div>
</header>
<div id = "container">
<!-- 검색영역: start -->
<div class = "mainSearchArea">
<form>
<fieldset>
<legend>검색영역</legend>
<div class = "sBox">
<select class = "selType">
<option>소재 정보 전체</option>
</select>
<input type = "text" class="inpSearch">
<button class=btnSearch>검색</button>
</div>
</fieldset>
</form>
</div>
<!-- 검색영역: end-->
<section id = "section1">
<div class = "baseWidth">
<h2 class = "mainCopy">
<em>SERVICE</em>
<strong>MARINE CONVERGENCE MATRERIALS CENTER</strong>
</h2>
<ul class = "mList pcView">
<li>
<ul class = "con">
<li>
<a href ="#n">
<img src= "../imgs/main-img1.jpg" alt>
<h3>섬유소재 TEXTILE MATERIALS</h3>
<p>
섬유소재정보은행은 국가정보자원으로서
섬유소재정보(물성, 공정, 기술 등)를 수집·가공·생성하여 DB화하고,
이를 제공함으로써 소재의 개발 및 사업화를 지원
</p>
</a>
</li>
<li>
<a href ="#n">
<img src= "../imgs/main-img4.jpg" alt>
<h3>복합재료 COMPOSITE MATERIALS</h3>
<p>
분산되어 있는 복합재료정보를 집적·공급하는 Hub로서
객관적인 금속소재정보를 수집, 생성 및 가공하여 기업 등
수요자에게 맞춤형 정보를 제공, 보급하며, 국내 및 국제 네트워크
구축을 통해 세계 최고 수준의 금속소재정보를 확보하여 보급
</p>
</a>
</li>
</ul>
</li>
<li class = "even">
<ul class = "con">
<li>
<a href ="#n">
<img src= "../imgs/main-img2.jpg" alt>
<h3>플라스틱 PLASTIC MATERIALS</h3>
<p>
플라스틱소재분야 산·학·연에서 요구되는 공정정보·물성정보·지식정보
등의 소재정보를 온라인 및 오프라인으로 제공하고
소재응용분야(수요기업 등)에서 요구되는 부품 및 제품화에 필요한
소재정보를 공유
</p>
</a>
</li>
<li>
<a href ="#n">
<img src= "../imgs/main-img5.jpg" alt>
<h3>복합재료 COMPOSITE MATERIALS</h3>
<p>
분산되어 있는 복합재료정보를 집적·공급하는 Hub로서
객관적인 금속소재정보를 수집, 생성 및 가공하여 기업 등
수요자에게 맞춤형 정보를 제공, 보급하며, 국내 및 국제 네트워크
구축을 통해 세계 최고 수준의 금속소재정보를 확보하여 보급
</p>
</a>
</li>
</ul>
</li>
<li class>
<ul class = "con">
<li>
<a href ="#n">
<img src= "../imgs/main-img3.jpg" alt>
<h3>플라스틱 PLASTIC MATERIALS</h3>
<p>
플라스틱소재분야 산·학·연에서 요구되는 공정정보·물성정보·지식정보
등의 소재정보를 온라인 및 오프라인으로 제공하고
소재응용분야(수요기업 등)에서 요구되는 부품 및 제품화에 필요한
소재정보를 공유
</p>
</a>
</li>
<li>
<a href ="#n">
<img src= "../imgs/main-img6.jpg" alt>
<h3>복합재료 COMPOSITE MATERIALS</h3>
<p>
분산되어 있는 복합재료정보를 집적·공급하는 Hub로서
객관적인 금속소재정보를 수집, 생성 및 가공하여 기업 등
수요자에게 맞춤형 정보를 제공, 보급하며, 국내 및 국제 네트워크
구축을 통해 세계 최고 수준의 금속소재정보를 확보하여 보급
</p>
</a>
</li>
</ul>
</li>
</ul>
<!-- 모바일 슬라이드 -->
<div class ="mView mainSlider">
모바일 슬라이드
</div>
<!-- //모바일 슬라이드 -->
<div class ="moreDiv">
<a href ="#n">view more</a>
</div>
</div>
</section>
<section id = "section2">
<div class ="baseWidth">
<h2 class="libraryTitle">
<em>소재개발 중소기업의 종합지원을 위한</em>
<strong>
<span>조선해양 소재종합</span>
<span>온라인라이브러리</span>
</strong>
<i>MARINE CONVERGENCE MATRERIALS CENTER</i>
</h2>
<ul class = "libraryCon">
<li>
<a href ="#n">
<span>최신뉴스</span>
<span>
<!-- <strong>,<em>: 강조하고 싶을때 사용, 좀더 강한건 strong -->
<strong>국내 최대 소재종합 라이브러리</strong>
<em>5분 만에 코로나 9.9% 살균 필터</em>
</span>
</a>
</li>
<li>
<a href ="#n">
<span>기술 · 동향시장</span>
<span>
<strong>온라인라이브러리 기술 시장</strong>
<em>형상 기억 폴리우레탄 마감에 의한 약모 직물</em>
</span>
</a>
</li>
<li>
<a href ="#n">
<span>특허정보</span>
<span>
<strong>소재 관련 특허 요약</strong>
<em>에폭시수지 조성물, 그 용도 및 에폭시 수지</em>
</span>
</a>
</li>
</ul>
</div>
</section>
<section id = "section3">
<div class = "baseWidth am">
<h2>알림마당</h2>
<div>
<p>
<span>MARINE</span>
<span>CONVERGENCE</span>
<span>MATERIALS</span>
<span>CENTER</span>
</p>
<a href = "#n">전체보기</a>
</div>
<ul class = "amList">
<li>
<a href= "#n">
<em>공지사항</em>
<strong>화학소재정보은행 Newsletter Vol.141 (2021년 9월)</strong>
<i>2021.09.01</i>
</a>
</li>
<li>
<a href= "#n">
<em>공지사항</em>
<strong>디지털 화학소재 혁신을 위한 온라인 심포지엄 개최 안내</strong>
<i>2021.09.01</i>
</a>
</li>
<li>
<a href= "#n">
<em>공지사항</em>
<strong>[물성DB] 화학소재 물성DB는 어떤 정보들을 제공하나요?</strong>
<i>2021.09.01</i>
</a>
</li>
<li>
<a href= "#n">
<em>공지사항</em>
<strong>심층 기술동향 보고서는 어떤 내용이 주로 실려 있나요?</strong>
<i>2021.09.01</i>
</a>
</li>
</ul>
</div>
</section>
</div>
<footer id = "footer">
<p>COPYRIGHT(C) 2021 MCMC RESERVED</p>
<div>
<a href="#n">개인정보처리방침</a>
<a href="#n">이용약관</a>
</div>
</footer>
</div>
</body>
</html>코드분석
<head>
<style>
/*header*/
#header { height: 113px; background : #191919; position: relative; }
#header .logo{ position: absolute; left:44px; top:36px; width: 297px; height:41px; }
#header .logo a{ display:block; width: 100%; height:100%; background: url(../imgs/logo.png) no-repeat; background-size: 100%; text-indent: -9999px ; font-size: 0; }
.gnbWrap { position: absolute; left: 50%; top: 0; height: 114px; width: 760px; margin-left: -380px; transition: all 0.3s;}
.menu { display: flex; justify-content: center; }
.menu li a{ padding: 0 30px; display: flex; align-items: center; height:114px; font-size:17px ;color : #fff; }
.utility { position: absolute; right: 44px; top:40px; width:40px; height: 40px;}
.tLogin { display: block; width:40px; height: 40px; background: url(../imgs/ic-login.png) no-repeat; text-indent: -9999px; }
.allMenu { display:none; position: absolute; right:20px; top: 26px; width: 25px; height: 40px; }
.allMenu a { display: block; width: 100%; height: 100%; }
.allMenu a i { display: block; width: 100%; height: 2px; background: #fff; margin-bottom: 8px; }
.mainSearchArea { padding: 70px 0 78px; width: 50%; margin:0 auto; max-width: 750px; }
.sBox { border: 1px solid #191919; width: 100%; height: 75px; border-radius: 40px; padding: 0 40px; position: relative; display: flex; align-items: center; }
/*display:flex를 하면 자식에 적용*/
.sBox { display: flex; }
.sBox > * { border:none; background:none; }
/* flex에 0을 주고 뒤에 px를 하면 그 px만큼만
flex에 1을 주면 가득 채워줌*/
.sBox select { flex: 0 0 140px; height: 26px; }
.sBox input { flex: 1; height: 40px; padding-left: 10px; }
.sBox button { flex: 0 0 26px; height: 26px; background: url(../imgs/ic-search.png) no-repeat; text-indent: -9999px; }
.baseWidth { width: 1440px; margin: 0 auto; }
.mainCopy { font-family: Montserrat; text-align:center; }
/* line-height:1은 지금 font-size만큼 */
.mainCopy em { font-size: 20px; font-weight: 700; color: #afafaf; line-height: 1; display: block; margin-bottom: 25px; }
.mainCopy strong { font-size: 55px; font-weight: 700; color: #000; line-height: 1; letter-spacing: -0.25px; }
/* justify-content: space-between; : 공간을 알아서 배분함 */
.mList { padding-top: 128px; display: flex; justify-content: space-between; }
.mList li { width: 448px; }
.mList li.even { padding-top: 230px; }
/* .mList li ul.con li { } : 원래 .con li의 구조 */
.con li { padding-bottom: 95px; }
.con li a{ display: block; }
.con li a img { }
.con li a h3 { margin: 24px 0 0; font-size: 24px; font-weight: 700; color: #000; letter-spacing: -0.25px; font-family: Montserrat; }
/* word-break: keep-all; : 줄바꿈시에 단어단위로 될 수 있게 */
.con li a p { color: #515151; line-height: 1.5; letter-spacing: -0.25; padding-top: 12px; word-break: keep-all; }
.moreDiv { text-align: center; }
.moreDiv a { font-size: 19px; color: #111; font-weight: 600; font-family: Montserrat; position: relative; display: inline-block; line-height: 1; padding: 9px 75px 15px 0; margin-bottom: 100px; }
/* before : 빈공간? 을 만들어서 동그라미 만든것 */
.moreDiv a::before { content: ""; display: block; width: 38px; height: 38px; border-radius: 20px; background: #e2e5f3; position: absolute; right: 0; top: 0; }
.moreDiv a::after { content: ""; display: block; width: 33px; height: 8px; background: url(../imgs/ic-arrow2.png) no-repeat; position: absolute; right: 23px; top:15px; }
.mView { display: none; }
/* max-width는 값이 큰거부터 적어야 하지만 min-width는 값이 작은거부터 적어야함 (보통 min-width는 모바일을 기준으로 할때 많이 사용) */
/*미디어쿼리*/
@media only screen and (max-width: 1280px) {
/* 바뀌는속성만 넣으면됨 */
.gnbWrap { margin-left: -250px;}
}
@media only screen and (max-width: 1024px) {
#header { height: 75px; }
#header .logo{ left:20px; top:20px; width: 220px; }
.gnbWrap { display: none; }
.allMenu { display: block; }
.utility { top: 24px; }
}
#header { height: 113px; background : #191919; position: relative; }
#header .logo{ position: absolute; left:44px; top:36px; width: 297px; height:41px; }
#header .logo a{
display:block;
width: 100%;
height:100%;
background: url(../imgs/logo.png) no-repeat;
background-size: 100%;
text-indent: -9999px ;
font-size: 0;
}
.gnbWrap {
position: absolute;
left: 50%;
top: 0;
height: 114px;
width: 760px;
margin-left: -380px;
transition: all 0.3s;
}
.menu { display: flex; justify-content: center; }
.menu li a{
padding: 0 30px;
display: flex;
align-items: center;
height:114px;
font-size:17px ;
color : #fff;
}
.utility { position: absolute; right: 44px; top:40px; width:40px; height: 40px;}
.tLogin {
display: block;
width:40px;
height: 40px;
background: url(../imgs/ic-login.png) no-repeat;
text-indent: -9999px;
}
.allMenu {
display:none;
position: absolute;
right:20px;
top: 26px;
width: 25px;
height: 40px;
}
.allMenu a { display: block; width: 100%; height: 100%; }
.allMenu a i {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin-bottom: 8px;
}#header .logo a{
text-indent: -9999px ;
font-size: 0;
}.tLogin {
text-indent: -9999px;
}글자 대신 이미지를 넣어 로고와 아이콘을 표현하기 위해 글자를 들여쓰기를 통해 멀리 보내놓아 글자가 사라진 것 처럼 보이게 하는 것이다.
text-indent
text-indent 속성은 문단 들여쓰기 속성을 설정한다.
.menu { display: flex; justify-content: center; }display : flex;
display의 속성을 flex로 변경한다.
justify-content
justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의한다.
.mainSearchArea { padding: 70px 0 78px; width: 50%; margin:0 auto; max-width: 750px; }
.sBox {
border: 1px solid #191919;
width: 100%;
height: 75px;
border-radius: 40px;
padding: 0 40px;
position: relative;
display: flex;
align-items: center;
}
.sBox { display: flex; }
.sBox > * { border:none; background:none; }
.sBox select { flex: 0 0 140px; height: 26px; }
.sBox input { flex: 1; height: 40px; padding-left: 10px; }
.sBox button {
flex: 0 0 26px;
height: 26px;
background: url(../imgs/ic-search.png) no-repeat;
text-indent: -9999px;
}.sBox > * : sBox의 직계 자식만을 선택
.baseWidth { width: 1440px; margin: 0 auto; }
.mainCopy { font-family: Montserrat; text-align:center; }
.mainCopy em {
font-size: 20px;
font-weight: 700;
color: #afafaf;
line-height: 1;
display: block;
margin-bottom: 25px;
}
.mainCopy strong {
font-size: 55px;
font-weight: 700;
color: #000;
line-height: 1;
letter-spacing: -0.25px;
}
.mList { padding-top: 128px; display: flex; justify-content: space-between; }
.mList li { width: 448px; }
.mList li.even { padding-top: 230px; }
.con li { padding-bottom: 95px; }
.con li a{ display: block; }
.con li a img { }
.con li a h3 {
margin: 24px 0 0;
font-size: 24px;
font-weight: 700;
color: #000;
letter-spacing: -0.25px;
font-family: Montserrat;
}
.con li a p {
color: #515151;
line-height: 1.5;
letter-spacing: -0.25;
padding-top: 12px;
word-break: keep-all;
}font-family
font-family 속성은 폰트 종류를 설정한다.
letter-spacing
letter-spacing 속성은 글자 사이의 간격을 설정한다.
justify-content : space-between
justify-content : space-between은 요소와 요소 사이의 간격을 왼쪽과 오른쪽을 기준으로 설정한다.
word-break : keep-all
word-break 속성은 줄바꿈 속성을 설정한다.
keep-all : 글자를 기준으로 줄바꿈
.moreDiv { text-align: center; }
.moreDiv a {
font-size: 19px;
color: #111;
font-weight: 600;
font-family: Montserrat;
position: relative;
display: inline-block;
line-height: 1;
padding: 9px 75px 15px 0;
margin-bottom: 100px;
}
.moreDiv a::before {
content: "";
display: block;
width: 38px;
height: 38px;
border-radius: 20px;
background: #e2e5f3;
position: absolute;
right: 0;
top : 0;
}
.moreDiv a::after {
content: "";
display: block;
width: 33px;
height: 8px;
background: url(../imgs/ic-arrow2.png) no-repeat;
position: absolute;
right: 23px;
top:15px;
}.moreDiv a::before의 {}안은 회색의 원을 만드는 작업이며,
.moreDiv a::after의 {}안은 오른쪽 화살표를 만드는 작업이다.
::before
선택한 element(s) 앞에 가상 콘텐츠 삽입
::after
선택한 element(s) 뒤에 가상 콘텐츠 삽입
content : ""
가상 요소 before/after를 사용할 때 꼭 같이 사용하는 속성이 content이다.
HTML에는 존재하지 않지만 CSS에서만 존재하는 가상 덩어리이다. 가상요소이기 때문에 javascript로 제어하기가 어려우며, content값에 텍스트(특수문자 포함), 이미지 등을 넣어 CSS만으로 가상 요소를 추가할 수 있다.
.mView { display: none; }모바일 슬라이드라는 글자를 보이지않게 숨겨놓음
@media only screen and (max-width: 1280px) {
.gnbWrap { margin-left: -250px;}
}소재정보, 회원사정보, 지식정보 등 메뉴의 위치를 로고와 부딪히지 않게 옮겨줌.
@media only screen and (max-width: 1024px) {
#header { height: 75px; }
#header .logo{ left:20px; top:20px; width: 220px; }
.gnbWrap { display: none; }
.allMenu { display: block; }
.utility { top: 24px; }
}로고의 크기를 조정하고, 소재정보,회원사정보,지식정보 등 메뉴를 오른쪽 끝의 메뉴 아이콘으로 바꾸어줌.
728x90