9. CJ도너스캠프 퍼블리싱
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
<meta name="viewport" content="width=1280" />
<title>CJ도너스캠프</title>
<link rel="stylesheet" href="./main.css" />
<!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->
<link rel="stylesheet" href="./common.css" />
</head>
<body>
<div id="wrap">
<main id="container">
<section class="main_visual">
<h2 class="blind">main visual</h2>
</section>
<section class="main_intro">
<div class="inner">
<div class="txt_wrap">
<p>
아동 청소년의
<strong>문화꿈지기가 되어 함께 사는 사회</strong>를
만들어가겠습니다.
</p>
</div>
<ul class="intro">
<li class="active">
<!-- a태그는 인라인이지만 모든 태그를 다 넣을 수 있다. -->
<a href="#">
<!-- 각각의 페이지가 연결이 되어있으므로 제목으로 본다. -->
<h3 class="tit">꿈 키움 지원사업</h3>
<p class="txt">
아동·청소년·청년의 교육과<br />
자립을 지원합니다.
</p>
</a>
</li>
<li>
<a href="#">
<!-- 각각의 페이지가 연결이 되어있으므로 제목으로 본다. -->
<h3 class="tit">청소년 문화동아리</h3>
<p class="txt">
중고등학생 동아리들을 대상으로<br />
문화 창작·체험의 기회를 제공합니다.
</p>
</a>
</li>
<li>
<a href="#">
<!-- 각각의 페이지가 연결이 되어있으므로 제목으로 본다. -->
<h3 class="tit">꿈키움 아카데미</h3>
<p class="txt">
청년들의 성장을 지원하는<br />
취업연계 교육을 제공합니다.
</p>
</a>
</li>
</ul>
</div>
</section>
</main>
</div>
</body>
</html>
CSS
/* 컬러 변수 */
:root {
--point-color1: #ff601e;
--point-color2: #feb12d;
--txt-color-400: #888;
--txt-color-500: #666;
--txt-color-600: #000;
}
#wrap {
/* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지 */
min-width: 1280px;
height: 1500px;
}
.main_visual {
height: 560px;
background: url(./images/visual_01.jpeg) /* 이미지 반복 금지 */ no-repeat
center top;
}
/* 요소 이동 시 부모를 이동하면 안쪽 요소도 같이 이동되므로 부모로 이동 */
.main_intro {
margin-top: -58px;
}
/* 바깥쪽 100% 항상 놔두고 안쪽 inner에서 가로길이 지정하기 */
/* 100% 디자인이 추가되는 경우가 매우매우 많음 */
.main_intro .inner {
width: 1200px;
margin: 0 auto;
}
.main_intro .txt_wrap {
padding: 45px 0;
background: #fff;
}
.main_intro .txt_wrap p {
font-size: 24px;
text-align: center;
color: var(--txt-color-600);
}
.main_intro .txt_wrap p strong {
color: var(--point-color1);
font-weight: 700;
}
.main_intro .intro {
display: flex;
gap: 0 6px;
align-items: flex-start;
}
/* 가로는 밖에서 높이는 안에서 잡아줘야 한다 */
.main_intro .intro li {
width: calc(100% / 3);
background: #f7f7f7;
}
.main_intro .intro li.active {
background: url(./images/bg-home-type.png) no-repeat;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
}
/* 아래쪽에 선언한 선택자보다 점수를 올리기 위해 #container사용 */
/* a::before -> 가상요소 선택자 */
#container .main_intro .intro li.active a::before {
/* x값만 변경 */
background-position-x: -55px;
}
.main_intro .intro li.active .tit {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.main_intro .intro li.active .txt {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* a태그는 상자가 아니니 display block으로 설정 */
.main_intro .intro li a {
height: 178px;
display: block;
padding: 43px 15px 0 130px;
position: relative;
}
.main_intro .intro a::before {
content: '';
/* position: absolute; 바깥부모의 기준을 잡아줘야한다. */
position: absolute;
left: 40px;
top: 40px;
width: 45px;
height: 43px;
background: url(./images/ico-home-type.png) no-repeat 0 4px;
}
.main_intro li:nth-child(2) a:before {
background-position: 0 -40px;
}
.main_intro li:nth-child(3) a:before {
background-position: 0 -83px;
}
.main_intro .intro li .tit {
font-size: 24px;
color: var(--txt-color-600);
/* 칸을 늘릴 필요가 없으면 마진 사용 */
margin-bottom: 15px;
}
.main_intro .intro li .txt {
font-size: 15px;
}
github.com/kangminchan99