오늘: content 까지 완성하다 !
HTML
<body> <div id="wrap"> <div id="header"> <div id="header_top"> <div class="logo"> <h1><img src="./images/logo.jpg" alt="로고입니다"></h1> </div> <div class="group"> <ul class="infomn"> <!--ul.infomn>li*5>a--> <li><a href="JOIN"></a>JOIN</li> <li><a href="LOGIN"></a>LOGIN</li> <li><a href="MYPAGE"></a>MYPAGE</li> <li><a href="CART(0)"></a>CART(0)</li> <li><a href="즐겨찾기"></a>즐겨찾기</li> </ul> /*오늘 진도는 여기서 부터 ! */ <ul class="gotomn"> <!--ul>li*3>a--> <li><a href="">NEW</a></li> <li><a href="">BEST</a></li> <li><a href="">EVENT</a></li> </ul> <div class="input"> <span>검색어를 입력해주세요</span> <a href=""><img src="./images/serch.jpg" alt="검색하기"></a> </div> </div> <div class=""></div> <div class=""></div> </div> <div id="header_nav"> <ul> <li><a href=""><img src="./images/nav_01.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_02.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_03.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_04.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_05.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_06.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_07.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_.jpg" alt=""></a></li> <li><a href=""><img src="./images/nav_08.jpg" alt=""></a></li> </ul> </div> </div> <div id="mainimg"></div>
<div id="contents">
<div class="item">
<div class="item_h">
<h3>POPULAR<br>
ITEM</h3>
<ul>
<li><a href="">EXPEDITION</a></li>
<li><a href="">TREKKING LINE</a></li>
<li><a href="">TRAVEL LINE</a></li>
</ul>
</div>
<div class="item_b">
<div class="box">
<img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</div>
<div class="box">
<img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</div>
<div class="box">
<img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</div>
<div class="box">
<img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</div>
</div>
</div>
<div class="gotoshop">
<!--a*3<img-->
<a href=""><img src="./images/banner01.jpg" alt=""></a>
<a href=""><img src="./images/banner02.jpg" alt=""></a>
<a href=""><img src="./images/banner03.jpg" alt=""></a>
</div>
<div class="view">
<a href="">view movie</a>
</div>
<div class="style">
<div class="style_h">
<h3>STYLE OF <br>
THE WEEK</h3>
<ul>
<li><a href="">MAN</a></li>
<li><a href="">WOMAN</a></li>
<li><a href="">CAMPING</a></li>
</ul>
</ul>
</div>
<ul class="style_b">
<li><img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</li>
<li><img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</li>
<li><img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</li>
<li><img src="./images/2MQSHX5004_0_198.jpg">
<h4>[트레킹]휠리#1</h4>
<p>98,000원</p>
</li>
</ul>
</div>
<div class="banner">
<div class="group">
<a href=""><img src="./images/goto_shop01.png" alt=""></a>
<a href=""><img src="./images/goto_shop02.png" alt=""></a>
</div>
<a href=""><img src="./images/goto_shop03.png" alt=""></a>
</div>
<div class="info">
<div class="info_top">
<img src="./images/footer_top01.png" alt="">
<img src="./images/footer_top02.png" alt="">
</div>
<div class="notice">
<h3 class="ttl">NOTICE</h3>
<P class="txt">[공지사항] 신정연휴 휴무안내 및 배송안내</P>
<P class="date">2022-09-07</P>
</div>
</div>
</div>
<div id="footer">
<div id="footer_top">footer_top</div>
<div id="footer_line"></div>
<div id="footer_bottom">footer_bottom</div>
</div>
</div>진짜 있는 페이지를 만들고 있으니까 이쯤하니 제법 진짜 웹사이트 같아 보인다 ! 물론 메인 페이지뿐이라 눌러도 서브 페이지가 나오진 않지만...!
main.css
#header_top .gotomn {
float: left;
margin: 32px 0 0 0;
}
#header_top .gotomn li {
float: left;
}
#header_top .gotomn li:after {
content: '·';
padding: 0 15px;
font-size: 10px;
position: relative;
top: -2px;
}
#header_top .gotomn li:last-child::after {
content: '';
}
#header_top .gotomn a {
font-size: 15px;
font-weight: 300;
}
#header_top .input {
float: left;
margin: 25px 0 0 10px;
width: 260px;
height: 30px;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
#header_top .input span {
float: left;
line-height: 30px;
padding-left: 16px;
}
#header_top .input a {
float: right;
margin-top: 5px;
}
#header_nav {
width: 100%;
height: 46px;
background-color: rgb(104, 255, 255);
background: url(../images/nav_area.jpg) no-repeat 50% 0;
}
#header_nav ul {
margin: 0 auto;
width: 1005px;
font-size: 0;
}
#header_nav ul li {
display: inline;
}
#mainimg {
width: 100%;
height: 460px;
background: url(../images/main_img.jpg) no-repeat 50% 0;
}
#contents {
width: 100%;
padding-top: 40px;
padding-bottom: 80px;
}
#contents .item {
margin: 0 auto;
width: 1000px;
height: 260px;
}
#contents .item_h {
float: left;
width: 180px;
height: 260px;
}
#contents .item_h h3 {
font-size: 30px;
color: #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 15px 0;
}
#contents .item_h ul {
margin-top: 30px;
}
#contents .item_h li {
margin-bottom: 10px;
}
#contents .item_h a {
font-size: 15px;
font-weight: 900;
}
#contents .item_h li:hover a {
text-decoration: underline;
color: orange;
}
#contents .item_h li:hover a::after {
content: '>';
/* padding-left: 15px; */
}
#contents .item_b {
float: right;
width: 800px;
height: 260px;
}
#contents .item_b .box {
float: left;
width: 190px;
height: 260px;
border: 1px solid #ccc;
margin-right: 13px;
box-sizing: border-box;
}
#contents .item_b .box:last-child {
margin-right: 0;
}
#contents .item_b .box img {
width: 100%;
border-bottom: 1px solid #333;
}
#contents .item_b .box h4 {
font-size: 13px;
padding: 20x 0 0 10px;
}
#contents .item_b .box p {
font-size: 13px;
padding: 5px 0 0 10px;
}
#contents .gotoshop {
margin: 0 auto;
margin-top: 40px;
width: 1000px;
height: 280px;
}
#contents .gotoshop a {
float: left;
width: 321px;
margin-right: 18.5px;
}
#contents .gotoshop a:last-child {
margin-right: 0;
}
#contents .view {
margin-top: 40px;
padding-top: 200px;
width: 100%;
height: 300px;
background: url(../images/movie.png) no-repeat 50% 0;
box-sizing: border-box;
}
#contents .view a {
display: block;
margin: 0 auto;
width: 170px;
height: 60px;
border: 2px solid #fff;
text-align: center;
line-height: 60px;
font-size: 16px;
}
#contents .style {
margin: 0 auto;
margin-top: 40px;
width: 1000px;
height: 260px;
}
#contents .style_h {
float: left;
width: 180px;
height: 260px;
}
#contents .style_h h3 {
font-size: 30px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 15px 0;
}
#contents .style_h ul {
margin-top: 30px;
}
#contents .style_h li {
margin-bottom: 10px;
}
#contents .style_h a {
font-size: 15px;
}
#contents .style_b {
float: right;
width: 800px;
height: 260px;
}
#contents .style_b li {
float: left;
width: 188px;
height: 260px;
margin-right: 13px;
border: 1px solid #ccc;
}
#contents .style_b li:last-child {
margin-right: 0;
}
#contents .style_b img {
width: 100%;
border-bottom: 1px solid #ccc;
}
#contents .style_b h4 {
font-size: 13px;
padding: 20px 0 0 10px;
}
#contents .style_b p {
font-size: 13px;
padding: 5px 0 0 10px;
}
#contents .banner {
margin: 0 auto;
margin-top: 40px;
width: 1000px;
height: 395px;
}
#contents .banner .group {
float: left;
width: 492px;
height: 390px;
}
#contents .banner>a {
float: right;
}
#contents .banner .group a:last-child {
margin-top: 15px;
display: block;
height: 189px;
}
#contents .info {
margin-top: 40px;
width: 100%;
height: 165px;
background: url(../images/footer_top_bg.jpg) repeat-x 0 0;
}
#contents .info_top {
margin: 0 auto;
width: 1000px;
}
#contents .info_top img {
float: left;
}
#contents .notice {
margin: 0 auto;
width: 1000px;
height: 57px;
}
#contents .notice .ttl {
float: left;
font-size: 16px;
font-weight: 200;
color: #fff;
line-height: 57px;
}
#contents .notice .txt {
float: left;
margin-left: 30px;
font-size: 16px;
color: #fff;
line-height: 57px;
}
#contents .notice .date {
float: right;
margin-left: 30px;
font-size: 16px;
color: #fff;
line-height: 57px;
}사실 float가 헷갈리고 있었는데 오늘 완전히 이해를 했다 !
이미지나 텍스트를 가로 방향으로 나란히 놓고 싶을 때 사용하는 것 !
그리고 이미지 1과 2 사이에 margin을 또 따로 조절해주기 보다는,
이미지 1은 float: left; 2는 float: right;를 지정해주면,
margin의 설정 없이도 두 이미지 사이에 공간이 생긴다 !!
내가 자꾸 width 와 height 설정을 잊는다는걸 알게되어서 더 신경쓸 수 있게되었다.
가상선택자 중 :last-child와 ::after, ::before 의 개념을 완전히 이해했다 :)
손체리