중앙정보처리학원/FRONTEND
HTML5&CSS (2)
하지마지
2023. 9. 19. 17:26
728x90
CSS
*{} :모든(모든 기본 태그)애 대해 적용하라.
*{
margin: 0;
}
.gong{
width: 80%;
border: 1px solid #ccc;
margin: 0px auto;
}
.gong tr:hover {
background: #f2f2;
}
/* th는 titlehead */
.gong tr th{
border-top: 1px solid black;
border-bottom: 1px solid black;
height: 50px;
}
.gong tr td{
border-bottom: 1px dashed #ccc;
text-align: center;
height: 40px;
cursor: pointer;
}
.gong tr td:first-child {
width: 10%;
}
.gong tr td:nth-child(2){
width: 15%;
}
.gong tr td:nth-child(3){
width: 50%;
}
.gong tr td:nth-child(4){
width: 15%;
}
.gong tr td:last-child{
width: 10%;
}
block 요소
한 줄에 하나의 태그만 온다
ex) p, div, ul height width 변경 가능
inline 요소
한 줄에 여러 개의 태그가 온다
ex) img, span height width 변경 불가능
display : 표시방법 (block, inline, inline-block)
float : (강제로)배치
*{
margin: 0;
}
p{ /* 블록단위 */
border: 1px solid black;
width: 300px; height: 50px;
/* display: inline; display는 구성을 바꾸는 명령어 */
/* display: inline-block; 인라인 이지만 블록으로 사용하겠다 */
float: right;
}
span{ /* 글자만 해당 */
border: 1px solid red;
width: 300px; height: 50px;
}
/* 주로 p 태그 안에 글을 많이 씀
p 태그 안에 p 태그 안들어간다.
p 태그 안에 div 태그 못들어간다
즉, div > p > span 단위 */
p{
border: 1px solid black;
}
div{
border: 1px solid red;
}
<span>글자태그</span>
<p>문장태그</p>
<div>항목(공간) 구분 태그</div>
*{
margin: 0;
}
.menu{
width: 100%; height: 70px;
background: rgb(72, 6, 72);
display: flex;
/*flex 옆으로 배치 (반응형 웹에서 주로 사용) */
}
.menu div{
color: white;
border: 0px solid #ccc;
width: 10%; height: 100%;
/* menu 속 div 자식 구조이기 때문에 100% = 70px */
text-align: center;
line-height: 70px;
cursor: pointer;
}
.menu div:hover{
font-size: 30px;
color: rgb(233, 211, 38);
}
.menu div:first-child{
width: 20%;
font-size: 25px;
margin-left: 10%;
margin-right: 10%;
}
.imgs{
width: 80%; height: 400px;
border: 0px solid black;
margin: 50px auto;
display: flex;
flex-wrap: wrap;
/* 만약 넘치면 줄바꿔서 표현 */
justify-content: space-between;
}
.imgs div{
width: 20%; height: 150px;
border: 1px solid gold;
margin-top: 25px;
border-radius: 20px;
/* 테두리 */
overflow: hidden;
/* 넘치는 것을 가리겠다 hidden */
}
.imgs div img {
width: 100%; height: 100%;
transition: 0.5s;
/* 수행시간 */
}
.imgs div img:hover{
transform: scale(1.5);
}
<div class="icon">
<div>
<i class="fa-solid fa-ring"></i>
<p class="iconText">다이아</p>
</div>
.icon{
width: 80%; height: 70px;
border: 0px solid black;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.icon div{
width: 10%; height: 100%;
border: 0px solid red;
font-size: 40px;
text-align: center;
line-height: 70px;
}
.icon div p {
font-size: 12px;
margin-top: -20px;
}
.icon div i:hover{
color: aqua;
font-size: 45px;
cursor: pointer;
}
결과화면
p : 문장태그
img : 그림태그
div : 공간(항목) 구분 태그
ul : 순서없는 목록 태그 (블릿기호)
li : 항목(list)
ol : 순서있는 목록 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NIKE</title>
<link rel="stylesheet" href="css/nike.css">
</head>
<body>
<div class="top">
<p>신규회원 가입 시, 10,000 포인트 증정</p>
<p>x</p>
</div>
<ul class="login">
<li>고객센터</li>
<li>회원혜택</li>
<li>로그인/회원가입</li>
</ul>
<ul class="menu">
<li><img src="img/logo.png" alt="로고"></li>
<li>남성</li>
<li>여성</li>
<li>아울렛</li>
<li>스포츠</li>
<li>컬렉션</li>
<li>뉴스&이벤트</li>
<li>
<input type="text" placeholder="찾는 단어 입력">
</li>
<li><i class="fa-solid fa-magnifying-glass"></i></li>
<li>
<i class="fa-solid fa-cart-shopping"></i>
</li>
</ul>
</body>
</html>
*{
margin: 0;
list-style: none;
padding: 0;
}
.top{
width: 100%; height: 40px;
border: 0px solid rgb(15,35,106);
background: rgb(181,185,223);
display: flex;
}
.top p {
border: 0px solid red;
height: 100%;
line-height: 40px;
cursor: pointer;
}
.top p:first-child{
width: 15%;
margin-left: 42.5%;
margin-right: 32%;
}
.login{
width: 80%; height: 30px;
border: 0px solid salmon;
margin: 20px auto;
display: flex;
justify-content: right;
cursor: pointer;
}
.login li{
border: 0px solid skyblue;
margin-left: 10px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
.menu{
width: 80%; height: 50px;
border: 0px solid black;
margin: 0 auto;
text-align: center;
display: flex;
line-height: 50px;
cursor: pointer;
}
.menu li{
width: 5%;height: 100%;
border: 0px solid black;
}
.menu li:first-child{
width: 10%;
height: 70%;
margin-top: 7px;
margin-right: 12%;
}
.menu li:nth-child(7){
width: 7%;
}
.menu li:nth-child(8){
width: 20%;
margin-left: 20%;
border: 1px solid rgb(1,30,98);
}
.menu li:nth-child(8) input{
width: 100%; height: 99%;
border: 0px solid rgb(42, 73, 144);
text-indent: 15px;
font-size: 15px;
}
.menu li:nth-child(9){
border: 1px solid rgb(1,30,98);
width: 3%;
color: white;
background: rgb(1,30,98);
cursor: pointer;
}
.menu li:last-child{
width: 4%;
}
/* .menu li img{
height: 70%;
margin-top: 10px;
} */
.menu li input {
display: block;
width: 100%; height: 99%;
border: 1px solid rgb(42, 73, 144);
font-size: 20px;
}
결과화면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NIKE</title>
<link rel="stylesheet" href="css/nike.css">
</head>
<body>
<div class="top">
<p>신규회원 가입 시, 10,000 포인트 증정</p>
<p>x</p>
</div>
<ul class="login">
<li>고객센터</li>
<li>회원혜택</li>
<li>로그인/회원가입</li>
</ul>
<ul class="menu">
<li><img src="img/logo.png" alt="로고"></li>
<li>남성</li>
<li>여성</li>
<li>아울렛</li>
<li>스포츠</li>
<li>컬렉션</li>
<li>뉴스&이벤트</li>
<li>
<input type="text" placeholder="찾는 단어 입력">
</li>
<li><i class="fa-solid fa-magnifying-glass"></i></li>
<li>
<i class="fa-solid fa-cart-shopping"></i>
</li>
</ul>
<div class="big">
</div>
<ul class="img6">
<li><img src="img/img (10).jpeg" alt=""></li>
<li><img src="img/img (6).jpeg" alt=""></li>
<li><img src="img/img (2).jpeg" alt=""></li>
<li><img src="img/img (3).jpeg" alt=""></li>
<li><img src="img/img (4).jpeg" alt=""></li>
<li><img src="img/img (5).jpeg" alt=""></li>
</ul>
<ul class="img6_text">
<li>상품명 : 나이키 -1 <br>가격 : 55,000</li>
<li>상품명 : 나이키 -2<br>가격 : 55,000</li>
<li>상품명 : 나이키 -3<br>가격 : 55,000</li>
<li>상품명 : 나이키 -4<br>가격 : 55,000</li>
<li>상품명 : 나이키 -5<br>가격 : 55,000</li>
<li>상품명 : 나이키 -6<br>가격 : 55,000</li>
</ul>
</body>
</html>
*{
margin: 0;
list-style: none;
padding: 0;
}
.top{
width: 100%; height: 40px;
border: 0px solid rgb(15,35,106);
background: silver;
display: flex;
}
.top p {
border: 0px solid red;
height: 100%;
line-height: 40px;
cursor: pointer;
}
.top p:first-child{
width: 15%;
margin-left: 42.5%;
margin-right: 32%;
}
.login{
width: 80%; height: 30px;
border: 0px solid salmon;
margin: 20px auto;
display: flex;
justify-content: right;
cursor: pointer;
}
.login li{
border: 0px solid skyblue;
margin-left: 10px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
.menu{
width: 80%; height: 50px;
border: 0px solid black;
margin: 0 auto;
text-align: center;
display: flex;
line-height: 50px;
cursor: pointer;
}
.menu li{
width: 5%;height: 100%;
border: 0px solid black;
}
.menu li:first-child{
width: 10%;
height: 70%;
margin-top: 7px;
margin-right: 12%;
}
.menu li:nth-child(7){
width: 7%;
}
.menu li:nth-child(8){
width: 20%;
margin-left: 20%;
border: 1px solid rgb(1,30,98);
}
.menu li:nth-child(8) input{
width: 100%; height: 99%;
border: 0px solid rgb(42, 73, 144);
text-indent: 15px;
font-size: 15px;
}
.menu li:nth-child(9){
border: 1px solid black;
width: 3%;
color: white;
background: black;
cursor: pointer;
}
.menu li:last-child{
width: 4%;
}
/* .menu li img{
height: 70%;
margin-top: 10px;
} */
.menu li input {
display: block;
width: 100%; height: 99%;
border: 1px solid black;
font-size: 20px;
}
.big{
width: 80%; height: 600px;
border: 0px solid black;
margin: 20px auto;
background: url(../img/big4.jpg)no-repeat ;
background-size: 100% 100%;
/* ../ 밖으로 나와라 */
}
.img6{
width: 80%; height: 250px;
border: 0px solid black;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.img6 li{
width: 14%; height: 100%;
border: 0px solid black;
cursor: pointer;
flex-wrap: wrap;
}
.img6 img{
width: 100%; height: 100%;
transition: 0.5s;
}
.img6 img:hover{
/* transform: ; */
transform: scale(1.5);
}
.img6 img:active{
background-color: red;
}
.img6_text{
width: 76%; height: 50px;
margin: 0 auto;
border: 0px solid black;
display: flex;
justify-content: space-between;
margin-top: 50px;
}
.img6_text li{
border: 0px solid black;
line-height: 25px;
text-align: center;
}
.img6_text li:hover{
background-color: grey;
}
.img6_text li:active{
background-color: darkgray;
}
728x90