1)학습한 내용
*html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resoft</title>
<link rel="shortcut icon" href="./리소프트 홈페이지 이미지/web.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./animate.css">
<script src="./wow.min.js"></script>
<script>new WOW().init();</script>
<script src="https://kit.fontawesome.com/af2a9fd141.js" crossorigin="anonymous"></script>
</head>
<body _c_t_common="1">
<div class="box_wrap">
<div class="img_btn">
<img src="./리소프트 홈페이지 이미지/리소프트로고_big.png"
alt class="wow fadeInDown" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s;
animation-name: fadeInDown;">
</div>
</div>
<div class="clients-img-wrap">
<ul>
<li class="wow fadeInUp customer_list" data-wow-delay="0.1s"
style="visibility: visible; animation-delay: 0.1s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시 건축사회.png" alt="">
</div>
<p>대구광역시 건축사회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.2s"
style="visibility: visible; animation-delay: 0.2s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시.png" alt="">
</div>
<p>대구광역시</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.3s"
style="visibility: visible; animation-delay: 0.3s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/매일신문.png" alt="">
</div>
<p>매일신문</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.4s"
style="visibility: visible; animation-delay: 0.4s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/경북대학교.png" alt="">
</div>
<p>경북대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.5s"
style="visibility: visible; animation-delay: 0.5s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구MBC문화원.png" alt="">
</div>
<p>대구MBC문화원</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.6s"
style="visibility: visible; animation-delay: 0.6s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구광역시 체육회.png" alt="">
</div>
<p>대구광역시 체육회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.7s"
style="visibility: visible; animation-delay: 0.7s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구가톨릭대학교.png" alt="">
</div>
<p>대구가톨릭대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.8s"
style="visibility: visible; animation-delay: 0.8s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/송파구청.png" alt="">
</div>
<p>송파구청</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.9s"
style="visibility: visible; animation-delay: 0.9s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/국민의힘.png" alt="">
</div>
<p>국민의힘</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.8s"
style="visibility: visible; animation-delay: 1.8s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/국제라이온스협회.png" alt="">
</div>
<p>국제라이온스협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.7s"
style="visibility: visible; animation-delay: 1.7s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국전기공사협회.png" alt="">
</div>
<p>한국전기공사협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.6s"
style="visibility: visible; animation-delay: 1.6s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/즐거운세상.png" alt="">
</div>
<p>(주)즐거운 세상</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.5s"
style="visibility: visible; animation-delay: 1.5s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/해양대학교.png" alt="">
</div>
<p>한국해양대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.4s"
style="visibility: visible; animation-delay: 1.4s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/상공회의소.png" alt="">
</div>
<p>대구상공회의소</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.3s"
style="visibility: visible; animation-delay: 1.3s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대한건설협회.png" alt="">
</div>
<p>대한건설협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.2s"
style="visibility: visible; animation-delay: 1.2s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국청년회의소.png" alt="">
</div>
<p>한국청소년회의소</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.1s"
style="visibility: visible; animation-delay: 1.1s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/계명대.png" alt="">
</div>
<p>계명대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.0s"
style="visibility: visible; animation-delay: 1.0s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/목포해양대학교.png" alt="">
</div>
<p>목포해양대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.0s"
style="visibility: visible; animation-delay: 2.0s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구공고.png" alt="">
</div>
<p>대구공업고등학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.1s"
style="visibility: visible; animation-delay: 2.1s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대경산업협회.png" alt="">
</div>
<p>대경ICT산업협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.2s"
style="visibility: visible; animation-delay: 2.2s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/한국조리기능장협회.png" alt="">
</div>
<p>한국조리기능장협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.3s"
style="visibility: visible; animation-delay: 2.3s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/여성기업인협회.png" alt="">
</div>
<p>IT여성기업인협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.4s"
style="visibility: visible; animation-delay: 2.4s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/중소기업융합연합회.png" alt="">
</div>
<p>중소기업융합연합회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.5s"
style="visibility: visible; animation-delay: 2.5s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구신용보증재단.png" alt="">
</div>
<p>대구신용보증재단</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.6s"
style="visibility: visible; animation-delay: 2.6s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/달서구청.png" alt="">
</div>
<p>달서구청</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.7s"
style="visibility: visible; animation-delay: 2.7s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/대구디지털산업진흥회.png" alt="">
</div>
<p>대구디지털산업진흥회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.8s"
style="visibility: visible; animation-delay: 2.8s;
animation-name: fadeInUp;">
<div class="img-wrap">
<img src="./리소프트 홈페이지 이미지/로타리클럽.png" alt="">
</div>
<p>국제로타리클럽</p>
</li>
</ul>
<button class="load">
<i class="fa-solid fa-circle-plus"></i>
</button>
</div>
</body>
</html>*css
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
* {
box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
max-width: 100%;
font-family: 'Noto Sans KR', sans-serif;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clients-img-wrap{
text-align: center;
max-width: 1400px;
margin: 150px auto;
}
.clients-img-wrap .load{
background: transparent;
cursor: pointer;
border: none;
display: none;
}
.clients-img-wrap .load i{
font-size: 80px;
color: #04088a;
}
.clients-img-wrap ul {
display: flex;
flex-wrap: wrap;
}
.clients-img-wrap ul li {
color:#a3a3a3;
font-size: 18px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% / 9);
}
.clients-img-wrap ul li p {
font-size: 16px;
padding-top: 15px;
word-break: break-all;
}
.clients-img-wrap ul li img {
max-width: 100%;
padding: 20px;
margin-bottom: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.clients-img-wrap ul li .img-wrap {
width: 120px;
position: relative;
height: 120px;
border: 3px solid #dddddd;
border-radius: 50%;
}
.box_wrap .box_btn{
bottom: 10%;
}
.box_wrap img{
position: absolute;
bottom: 0;
}
.box_wrap{
background-color: #04088a;
height: 250px;
}
.box_wrap .img_btn{
position: relative;
height: 100%;
max-width: 1400px;
margin: 0 auto;
}
@media screen and (max-width: 1500px){
.clients-img-wrap ul{
margin: 0 2%;
}
.clients-img-wrap {
margin: 130px auto;
}
.box_wrap img {
left: 2%;
}
}
@media screen and (max-width:1217px) {
.clients-img-wrap .load{
display: initial;
}
.clients-img-wrap ul{
margin: 0 5%;
}
.clients-img-wrap ul li {
width: calc(100% / 8);
}
.box_wrap img {
width: 50%;
}
.clients-img-wrap ul li .img-wrap {
width: 10vw;
height: 10vw;
}
.clients-img-wrap .load{
display: initial;
}
}
@media screen and (max-width: 940px){
.clients-img-wrap ul{
max-width: 500px;
margin: 0 auto;
}
.title .h_tit{
font-size: 28px;
}
.clients-img-wrap ul li {
width: calc(100% / 4 - 6%);
margin: 0 3% 30px 3%;
}
.box_wrap {
height: 400px;
text-align: center;
}
.box_wrap img {
width: 60%;
position: unset;
margin: 70px 0;
}
.clients-img-wrap ul li .img-wrap {
width: 110px;
height: 110px;
}
.clients-img-wrap .load i{
font-size: 70px;
}
}결과:
2)학습내용 중 어려웠던점
max width:940의 값이 적용되야하는데 max width:1500값이 계속적용되었다
3)해결방법
css에 1500부터 적어 큰순서대로 적으니깐 해결되었다.
4)학습소감
각조를 만들어서 조별로 사이트를 1주동안 만드는걸 하고있다. 지금 1일차인데 틀을 만들어서 코드를 작성할려고하니 감이 안잡히고 어려웠다 내용을 찾아보면서 작성을 하니깐 어렵긴했지만 해볼만은 하였다.
안녕하세요