Study/HTML5 & CSS3
HTML5 & CSS3 : 웹 사이트 메인 화면 구현해보기
posey
2022. 10. 21. 09:28
2022.10.21.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 26
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 26
<Grid System 알아보기>
960 Grid System
960 Grid System
Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web devel
960.gs
위의 링크로 접속하면 그리드 시스템의 예시를 볼 수 있고 다운로드도 할 수 있다.
웹 페이지를 디자인할 때 그리드 시스템을 이용하면 아이템들을 질서있게 정렬시킬 수 있다.
Figma에서도 Grid system을 이용할 수 있다.
New Design File을 열고 Frame 하나를 만들어준다.
그러고 나서 오른쪽 옵션 바에 Layout Grid 기능을 이용할 수도 있다.
Color : FF9393
Type : center
Count : 12
Width : 70
Gutter : 40
Gutter는 빨간색 사각형 사이에 있는 흰색 사각형의 간격이다.
극동건설
극동건설
kukdong.co.kr
'극동건설' 이라는 웹 사이트를 내 식대로 바꿔보았다.
Layout grid를 보이게 한 상태에서 가로는 1920px로 맞춰주고 난 뒤,
Auto layout을 이용하여 '극동건설' 기업의 홈페이지를 따라 만들어보았다.
이미지는 내가 원하는 이미지로 이용했다.
원래 메인 화면은 내가 느끼기에 조금 차가운 이미지라 따뜻한 분위기의 이미지를
사용했다.
- HTML
<header>
<div></div>
</header>
<div class="business">
<ul>
<li><p>CIVIL<br>WORK</p></li>
<li><p>ARCHITECTURAL<br>WORKS</p></li>
<li><p>BUSINESS</p></li>
<li></li>
<li><p>PLANTS<br>ENVIRONMENTAL<br>WORK</p></li>
<li><p>OVERSEAS<br>BUSINESS</p></li>
</ul>
</div>
<div class="portfolio">
<p class="left">PORTFOLIO</p>
<div class="right">
<ul>
<li><a href="#">토목</a></li>
<li><a href="#">건축</a></li>
<li><a href="#">플랜트·환경</a></li>
<li><a href="#">해외사업</a></li>
</ul>
</div>
</div>
<div class="work">
<div class="left_wrap">
<div class="left">
<div class="arrow_left"><</div>
<div class="work_img">
<img src="../../극동건설/images/Rectangle 10.png" alt="건축">
</div>
</div>
</div>
<div class="right">
<p>공동주택</p><br><br>
<hr>
<p>HOUSINGS·ARCHITECTURAL WORKS</p>
<p>극동건설만의 독창적인 첨단 공법으로 건축공간의<br>패러다임을 바꿉니다.</p>
<div class="arrow_right"><</div>
<p>Detatil view</p>
</div>
</div>
<div class="custom">
<div class="contents">
<div class="top">
<p>개개인의 특성과 능력을 중시하는 극동건설은<br>
여러분의 <b>성장의 터</b>를 마련합니다.</p>
</div>
<ul>
<li><a href="#"><h3>인재상</h3><br>
<p>극동건설이 추구하는 인재상을<br>여러분께 소개합니다.</p></a>
</li>
<li><a href="#"><h3>인사제도</h3><br>
<p>임직원의 역량향상과 동기부여를<br>위해 다양한 제도를 운영합니다.</p></a>
</li>
<li><a href="#"><h3>채용안내</h3><br>
<p>극동건설의 채용제도 및 절차를<br>자세히 소개합니다.</p></a>
</li>
<li><a href="#"><h3>채용공고</h3><br>
<p>극동건설의 채용공고를<br>소개합니다.</p></a>
</li>
</ul>
</div>
</div>
- CSS
@font-face {
font-family: notosans;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff);
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
body {
font-family: notosans;
}
header > div {
width: 1352px;
height: 100px;
}
.business {
background: #f0f0f0;
width: 100%;
margin: 0 auto;
}
.business ul {
width: 1352px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 150px 0;
}
.business ul li {
width: 400px;
height: 300px;
font-size: 24px;
font-weight: bold;
color: white;
}
.business ul li p {
padding: 20px 0 0 20px;
color: #fff;
}
.business ul li:first-child {
background: url(../../극동건설/images/Rectangle\ 9.png);
}
.business ul li:nth-child(2) {
background: url(../../극동건설/images/Rectangle\ 10.png);
}
.business ul li:nth-child(4), .business ul li:nth-child(5),
.business ul li:nth-child(6) {
margin-top: 40px;
}
.business ul li:nth-child(5) {
background: url(../../극동건설/images/unsplash_l8fyK9RS-OU.png);
}
.business ul li:nth-child(6) {
background: url(../../극동건설/images/Rectangle\ 12.png);
}
.business ul li:nth-child(3) p{
color: #000;
font-size: 50px;
padding:0;
text-align: center;
line-height: 300px;
}
.portfolio {
display: flex;
justify-content: space-between;
width: 1352px;
margin: 120px auto;
}
.portfolio > .left {
font-size: 40px;
font-weight: bolder;
}
.portfolio > .right ul {
display: flex;
}
.portfolio > .right ul li {
border: 1px solid #000;
width: 120px;
height: 61px;
text-align: center;
line-height: 61px;
margin-left: 10px;
}
.portfolio > .right ul li a {
color: #2b2c2e;
}
.portfolio > .right ul li:hover {
background: rgb(255, 183, 0);
font-weight: bold;
border: 2px solid #000;
}
.work {
display: flex;
}
.work_img > img {
width: 740px;
height: 520px;
overflow: hidden;
}
.work .left {
display: flex;
justify-content: end;
}
.left_wrap {
width: 60%;
height: 590px;
background: #f0f0f0;
}
.work .right {
width: 40%;
background: #fff;
color: #544C47;
margin: 0 70px;
}
.work .right > p:first-child {
font-size: 40px;
font-weight: bold;
}
.right > hr {
width: 10%;
margin-bottom: 40px;
border: 1px solid #544C47;
}
.work .right > p:nth-of-type(2) {
font-size: 22px;
font-weight: bold;
margin-bottom: 40px;
}
.work .right > p:nth-of-type(4) {
width: 207px;
height: 66px;
text-align: center;
line-height: 66px;
margin: 40px 0;
border: 1px solid #544C47;
}
.custom {
height: 677px;
background: url(../../극동건설/images/Rectangle\ 20.png) no-repeat fixed center/cover;
}
.custom .contents {
padding: 180px 0;
width: 1352px;
margin: 0 auto;
color: white;
text-align: center;
}
.top {
font-size: 45px;
margin-bottom: 100px;
}
.contents ul {
display: flex;
justify-content: space-around;
width: 1280px;
}
.contents ul li a {
color:#fff;
}
.contents ul li a h3:hover {
border: 0.5vw solid #fff;
border-radius: 5px;
padding: 12px 0;
}
여기까지 완성 !
*내용 출처
반응형