그 동안 배운 html 과 css 를 이용해서 내가 좋아하는 브랜드 홈페이지를 따라 만들어 보았다.
아쉬운 점
글자 폰트를 못 찾아서 대충 고딕으로 따라 한 점.
그리고 화면을 작게 만들었을 때 비율이 달라지는 것.
상단에 메뉴바 만드는 법을 몰라서 그냥 이미지로 대체 했다는 것.
세번째 단락을 table 로 만들었는데 그게 맞는 것인지 아니면 div 로 했었어야 했는 것인지 아직도 모르겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.btn{
width : 250px;
height : 50px;
background-color : black;
color : white;
margin: auto;
position : right;
}
.btn1 {
border : none;
width : 200px;
height :50px;
background-color : white;
}
.wrap {
margin: auto;
position: relative;
}
.cos {
padding: 10px 20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}
</style>
</head>
<body>
<div style = "width :100%; height :40px; background-color : black; color : white; line-height :40px; text-align :center ;font-size : 50%; ">세일이 시작되었습니다! |  
<a href = "https://www.cos.com/ko-kr/women/sale.html" style = "color : white; font-size : 50%; "> 여성복 쇼핑하기</a>  
<a href = "https://www.cos.com/ko-kr/men/sale.html" style = "color : white; font-size : 50%; "> 남성복 쇼핑하기 </a>
</div>
<img alt="코스" src="../img/cos.png" style="max-width: 100%; height: auto;"/>
<hr/>
<table boarder = "1" style = "width :100%; height : 250px;">
<colgroup>
<col width="35%" />
<col width="15%" />
<col width="35%" />
</colgroup>
<tr> <td rowspan = "2" style = "font-size : 600%; text-align : center; font-family:'고딕';"> <b>Sale</b> </td>
<td rowspan = "2" ><button class = "btn" > 여성복 쇼핑하기</button> <P></P><button class = "btn" > 남성복 쇼핑하기</button> </td><td rowspan = "2" style = "font-size : 200%; text-align : center; font-family:'맑은고딕'; padding-right:30px;" > 세일이 시작되었습니다 <br/> 최대 50% 할인</td> </tr>
</tr>
</table>
<hr/>
<div class = "wrap">
<div class="cos">
<button style="margin:10px" class="btn1" ><a href = "https://www.cos.com/ko-kr/women/sale.html" style = "color : black; text-decoration-line:none;" >여성 신상품</a></button>
<br/>
<button style="margin:10px" class="btn1" ><a href = "https://www.cos.com/ko-kr/women/sale.html" style = "color : black; text-decoration-line:none; " >남성 신상품</a></button>
</div>
<img src="../img/cosmain.png" style = " "width: 100%; height : 950px;" />
</div>
</body>
</html>'Front > css' 카테고리의 다른 글
| position 속성 - static, relative, absolute, fixed를 알아보자 (0) | 2024.03.22 |
|---|---|
| Input type ="date" 사용시 placeholder 없애기 (0) | 2023.08.27 |
| [css] 웹 페이지의 살 붙이기 - border 테두리 꾸미기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - button 이미지 넣기 (0) | 2023.03.22 |
| [css] 웹 페이지의 살 붙이기 - position (0) | 2023.03.22 |
