1. 학습한 내용
조직도 미디어 쿼리 완성
<div class="con" style=" max-width: 1440px;
padding: 0 10px;
margin: 0 auto;">
<h1 class="dapyo rectangle">대표이사</h1>
<ol class="jojic-wrapper">
<li>
<h2 class="jojic rectangle">전략기획부</h2>
<ul>
<li>유저 Needs 분석</li>
<li>고객 수요 확인</li>
<li>BM 설계/기획</li>
<li>사업화 전략 수집</li>
<li>사업계획서 작성</li>
</ul>
</li>
</li>
<li>
<h2 class="jojic rectangle">개발부</h2>
<ul>
<li>DB분석/설계</li>
<li>Cloud 서버 관리</li>
<li>기능 정의</li>
<li>기능 구현</li>
<li>기능 테스트</li>
</ul>
</li>
<li class="ho">
<h2 class="jojic rectangle">디자인부</h2>
<ul>
<li>유저 Needs 분석</li>
<li>고객 수요 확인</li>
<li>BM 설계/기획</li>
<li>사업화 전략 수집</li>
<li>사업계획서 작성</li>
</ul>
</li>
<li class="ho">
<h2 class="jojic rectangle">마케팅부</h2>
<ul>
<li>서비스 시장조사</li>
<li>시장동향 분석</li>
<li>시장성 검증</li>
<li>온라인 채널 운영</li>
<li>오프라인 광고</li>
</ul>
</li>
<li class="ho">
<h2 class="jojic rectangle">경영지원부</h2>
<ul>
<li>경영 무 지원</li>
<li>업무 환경 지원</li>
<li>세무 업무 지원</li>
</ul>
</li>
</ol>
</div>
</div>/* dapyo STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dapyo {
display: flex;
justify-content: center;
align-items: center;
width: 11.1%;
margin: 0 auto 140px;
background: #184B9F 0% 0% no-repeat padding-box;
color: white;
font-size: 1.5rem;
height: 40px;
border-radius: 20px;
}
.dapyo::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 1px;
height: 70px;
background: rgba(0, 0, 0, 0.5);
}
/* jojic STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.jojic-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.jojic-wrapper::before {
content: "";
position: absolute;
top: -70px;
left: 10%;
width: 80%;
height: 1px;
background: rgba(0, 0, 0, 0.5);
}
.jojic-wrapper::after {
display: none;
content: "";
position: absolute;
left: -20px;
bottom: -20px;
width: calc(100% + 20px);
height: 1px;
background: rgba(0, 0, 0, 0.5);
}
.jojic-wrapper li {
position: relative;
}
.jojic-wrapper > li::before {
content: "";
position: absolute;
bottom: 100%;
left: 49.9%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 1px;
height: 70px;
background: rgba(0, 0, 0, 0.5);
}
h2{
align-items: center;
}
.jojic {
width: 55.5%;
height: 34px;
margin: 0 auto;
background: white;
color: black;
border:#184B9F solid 3px;
font-size: 1.5rem;
border-radius: 20px;
display: flex;
justify-content: center;
}
.jojic-wrapper li ul li{
text-align: left;
width: 100%;
padding-left: 16%;
padding-top: 5%;
font-size: 1.3rem;
}
.jojic-wrapper li ul:first-of-type{
padding-top: 10%;
}
.jojic-wrapper li ul:last-of-type{
padding-bottom: 10%;
}
.jojic-wrapper li ul li::before{
content: "• ";
}
.jojic::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 20px;
background: rgba(0, 0, 0, 0.5);
}
.jojic::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 0%;
/* -webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%); */
width: 20px;
height: 1px;
background: rgba(0, 0, 0, 0.5);
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1024px) {
.dapyo{
width: 150px;
}
.jojic-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.jojic-wrapper::before {
content: "";
position: absolute;
top: -70px;
left: 25%;
width: 50%;
height: 1px;
background: rgba(0, 0, 0, 0.5);
}
.jojic-wrapper li ul li{
padding-left: 17%;
padding-top: 3%;
font-size: 1rem;
}
.jojic-wrapper li ul:first-of-type{
padding-top: 5%;
}
.jojic-wrapper > li::before{
content: "";
position: absolute;
bottom: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 1px;
height: 70px;
background: rgba(0, 0, 0, 0.5);
}
.jojic-wrapper > .ho::before{
content: "";
position: absolute;
bottom: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 0px;
height: 70px;
background: rgba(0, 0, 0, 0.5);
}
.dapyo, .jojic{
/* width: 200px; */
font-size: 1.3rem;
}
}transform을 이용한 텍스트 교체
주요 css
.main-service-container .service-right-wrap .card-sub-hide {
color: #fff;
font-size: 1.5rem;
font-weight: 400;
line-height: 3rem;
/* background: rgba(0,0,0,0.7); */
opacity: 0;
position: absolute;
transform: translate(50%, 90%);
}
.main-service-container .service-card :hover .card-sub-hide{
transform: translate(0, 0);
transition:.3s;
opacity: 1;
}
.main-service-container .service-card:hover .tran {
transition:.3s;
transform: translate(-20%, -100%);
opacity: 0;
}
메뉴바 슬라이드 교체
사용한 효과
$(document).ready(function(){
$('.ham').click(function () {
if($('.so').hasClass('more'))
$('.so').addClass('magictime slideDownReturn');
else if($('.so').hasClass('close'))
$('.so').removeClass('magictime slideDownReturn');
});
});
$(document).ready(function(){
$('.ham').click(function(){
if($('.so').hasClass('close')){
$('.so').addClass('magictime slideDown');
$('.so').addClass('more').removeClass('close');
}else if($('.so').hasClass('more')){
setTimeout(function() { $('.so').addClass('close').removeClass('more');}, 500);
}
});
});2. 학습내용 중 어려웠던 점
X3. 해결방법
X4. 학습소감
찾아보면 뭐든지 나오고 안나오기도 하는 코드들을 보니 원하는 것을 확실하게 찾는 능력이 정말 중요하다고 생각이 들었습니다. 아는 만큼 보이는 듯이 앞으로는 많은 것을 보고 넓혀 좀 더 수월하게 검색을 할 수 있도록 해야겠습니다.
JAMIHs