인프런 커뮤니티 질문&답변
작성한 질문수
선생님 저는 sticky__elem이 display : none; 해도 안사라지는데 어떻게하죠
작성
·
214
1
@charset 'utf-8';
html {
/* 구글 폰트 설정 */
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
}
body {
/* 가로 스크롤 생성 방지 */
overflow-x: hidden;
color: rgb(29, 29, 31);
/* 글자 자간 줄이기 */
letter-spacing: -0.05em;
background: white;
}
p {
line-height: 1.6;
}
a {
color: rgb(29, 29, 31);
/* 밑줄 없애기 */
text-decoration: none;
}
/* Nav */
.global__nav {
/* js에서 스크롤높이에 영향을 미치기 때문에 포지션 설정 */
position: absolute;
top: 0;
left: 0;
width: 100%;
/* global__nav의 전체 높이 설정 */
height: 44px;
/* 모바일 패딩 좌우 1rem */
padding: 0 1rem;
}
.local__nav {
/* js에서 스크롤높이에 영향을 미치기 때문에 포지션 설정 */
position: absolute;
top: 45px;
left: 0;
width: 100%;
height: 52px;
border-bottom: 1px solid #bbd;
/* 모바일 패딩 좌우 1rem */
padding: 0 1rem;
}
.global__nav__links,
.local__nav__links {
display: flex;
/* 수직방향도 중앙 정렬 aling-items */
align-items: center;
/* 총 너비 1000px */
max-width: 1000px;
/* aling-items를 썼을때 자신의 컨텐츠만큼만 크기를 차지하기 때문에 센터정렬이 안되서
자신을 감싸는 부모의 높이만큼 높이를 설정해줘야함 그래서 height 100%(부모의높이 100프로)설정 */
height: 100%;
/* center 정렬을위해서 왼쪽,오른쪽 margin auto */
/* margin auto를 사용하면 사용한 방향의 마진을 모두 사용함 */
margin: 0 auto;
}
.global__nav__links {
/* links안에 메뉴들 축방향으로 justify-content로 정렬 */
justify-content: space-between;
}
.local__nav__links .product__name {
margin-right: auto;
font-size: 1.4rem;
font-weight: bold;
}
.local__nav__links a {
font-size: 0.8rem;
}
/* not = local__nav__links a에 있는 것중에 not()괄호안에 들어가는 것은 빼고 적용한다는 것 */
.local__nav__links a:not(.product__name) {
margin-left: 2em;
}
/* !-- Nav -- */
/* Section */
.sticky__elem {
/* Scroll구간이 맞을때만 보이기 위헤서 display:none으로 안보이게 만들어줌 */
position: fixed;
display: none;
top: 0;
left: 0;
width: 100%;
}
.scroll__section {
/* scroll__section들이 너무 붙어있어서 padding-top으로 떨어뜨려줍니다 */
padding-top: 50vh;
border: 3px solid red;
}
/* scroll__section__0 */
#scroll__section__0 h1 {
/* font-size를 body기준 4rem */
font-size: 4rem;
/* text 중앙 정렬 */
text-align: center;
}
/* !--scroll__section__0 -- */
/* scroll__section__1 */
.main__message {
/* main_messge 중앙정렬 */
display: flex;
align-items: center;
justify-content: center;
/* 위아래에 margin을 넣어서 main__message마다 간격주기 */
margin: 5px 0px;
/* em을 쓰는 이유는 폰트사이즈 기준으로 3배가 되는것*/
height: 3em;
/* rem은 html의 font-size 기준 */
font-size: 2.5rem;
}
.main__message p {
/* main__messge의 p문단 설정 */
font-weight: bold;
/* text중앙 정렬 */
text-align: center;
/* 글자 간격높이 */
line-height: 1.2;
}
.description {
max-width: 1000px;
margin: 0 auto;
/* descripition 좌우 여백 1rem설정 */
padding: 0 1rem;
font-size: 1.2rem;
color: #888;
}
.description strong {
float: left;
margin-right: 0.2em;
font-size: 3rem;
color: rgb(29, 29, 31);
}
/* !-- scroll__section__1 -- */
/* scroll__section__2 */
.main__message small {
/* 다음줄로 넘어갈 수 있게 small = block */
display: block;
margin-bottom: 0.5em;
font-size: 1.2rem;
}
#scroll__section__2 .main__message {
font-size: 3.5rem;
}
.desc__message {
width: 50%;
font-weight: bold;
}
.pin {
width: 1px;
height: 100px;
background: rgb(29, 29, 31);
}
/* !-- scroll__section__2 -- */
/* scroll__section__3 */
.mid__mesagge {
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
font-size: 2rem;
color: #888;
}
.mid__mesagge strong {
color: rgb(29, 29, 31);
;
}
.canvas__caption {
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
font-size: 1.2rem;
color: #888;
}
/* !-- scroll__section__3 */
/* Footer */
.footer {
display: flex;
align-items: center;
justify-content: center;
height: 7rem;
color: white;
background: gold;
}
/* !-- footer -- */
/* desctop size */
@media(min-width: 1024px) {
#scroll__section__0 h1 {
font-size: 9vw;
}
.main__message {
font-size: 4vw;
}
.description {
font-size: 2rem;
}
.description strong {
font-size: 6rem;
}
#scroll__section__2 .main__message {
font-size: 6vw;
}
.main__message small {
font-size: 1.5vw;
}
.desc__message {
width: 20%;
}
.mid__mesagge {
font-size: 4vw;
}
.canvas__caption {
font-size: 2rem;
}
}
/* !--Desktop size -- */
답변 5
5
1분코딩
지식공유자
@ rhrka16님
다른 질문 댓글로 질문을 달아주셔서 ㅋㅋ 저도 여기다 답변 달겠습니다^^
body를 이용해 컨트롤을 하면
body가 모두의 부모이기 때문에 어떤 상황에도 대응하기가 수월하다는 장점이 있습니다.
이 예제에서는 display 정도이지만, 예를들어
1. 각 섹션이 활성화될 때마다 각각 다른 색으로 전체 배경색이 바뀜
2. 각 섹션이 활성화될 때마다 각각 다른 형태의 무언가가 등장
3. 각 섹션이 활성화될 때마다 각각 ...
이런 식으로 여러가지 처리를 해야할 경우에도 다른 작업 없이
body에 있는 id나 class 별로 하위의 CSS만 작성해주면 되는 장점이 있습니다.
CSS가 내 부모는 컨트롤을 못하지만 내 자식은 컨트롤이 수월하기 때문이지요~(사람이랑 반대입니다 ㅋㅋ)
만약 section 단위로 CSS 처리를 했다면, 전체 body 색상 변경을 위해서는 스크립트에서도 추가작업이 필요하니까요.
꼭 body가 아니더라도, 많은 요소를 포함하는 큰 단위의 블럭에 특정값을 적용해서 처리하는 것은 이런 장점이 있답니다~
1
1분코딩
지식공유자
.main__message에는 display: flex가 적용되어있고
.sticky__elem에는 display: none이 적용되어있는데요,
CSS에서 순서를
.main__message {}
.sticky__elem {}
이렇게 해주시면 없어질거에요~
CSS 선언 순서 상의 문제였습니다^^
0
선생님 강의 너무 잘 듣고 있습니다 :)
궁금한 점이 있는데, sticky-elem에 대한 화면 표시에 대해서 body까지 포함시키면서 id값의 변화를 주려고 하는 이유를 알고 싶습니다.
그냥 section의 id 값에 따라 display:none처리를 하고 나중에 변경하여도 가능할 것 같은데,
어떤 차이점이 있는지 궁금합니다! :)
0
0
오아시스
질문자
이건 html 입니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>interactive Clone Coding</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 모든 컨텐츠를 감싸는 container -->
<div class="container">
<!-- Nav -->
<nav class="global__nav">
<div class="global__nav__links">
<a href="#" class="global__nav__item">Rooms</a>
<a href="#" class="global__nav__item">Ideas</a>
<a href="#" class="global__nav__item">Stores</a>
<a href="#" class="global__nav__item">Contact</a>
</div>
</nav>
<nav class="local__nav">
<div class="local__nav__links">
<a href="#" class="product__name">AirMug Pro</a>
<a href="#">개요</a>
<a href="#">제품사양</a>
<a href="#">구입하기</a>
</div>
</nav>
<!-- !-- Nav -- -->
<!-- Section -->
<section class="scroll__section" id="scroll__section__0">
<h1>AirMug Pro</h1>
<div class="sticky__elem main__message a">
<p>온전히 빠져들게 하는<br>최고급 세라믹</p>
</div>
<div class="sticky__elem main__message b">
<p>주변 맛을 느끼게 해주는 <br>주변 맛 허용 모드</p>
</div>
<div class="sticky__elem main__message c">
<p>온종일 편안한<br>맞춤형 손잡이</p>
</div>
<div class="sticky__elem main__message d">
<p>새롭게 입가를<br>찾아온 매혹</p>
</div>
</section>
<section class="scroll__section" id="scroll__section__1">
<p class="description">
<strong>보통 스크롤 영역</strong>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate hic voluptates consectetur rerum eos!
Amet excepturi, sapiente asperiores neque aspernatur, dicta dolorum quasi mollitia consequatur
voluptates maxime, eius nostrum labore dolore aperiam ea quos distinctio deserunt dolorem suscipit vero.
Porro, ab ratione ullam sapiente officia nemo ipsa enim pariatur sunt eius doloribus recusandae eaque
voluptatum mollitia sed quibusdam sequi repudiandae voluptatem placeat est velit quasi! Nisi optio
quaerat qui deleniti omnis aut aliquam similique, error illum ut, labore iste molestias deserunt. Iste
laborum dolorum quod mollitia enim, distinctio provident cupiditate fuga sapiente, nesciunt dicta iure
amet a sint eos quos nemo voluptatum consectetur, dolorem animi nisi. Nostrum quisquam ipsam omnis. Quos
odit, aspernatur officia, iste temporibus suscipit pariatur quas culpa ipsum esse maiores numquam nobis
ut eligendi repellendus blanditiis ullam quia porro exercitationem laborum sed corporis cupiditate.
Dolor quibusdam nesciunt quos sequi, nobis non praesentium voluptas cum repudiandae atque a pariatur ab,
blanditiis soluta eveniet aliquam, rerum optio modi ullam esse. Enim officiis vel aliquid unde libero,
eligendi itaque odit accusantium nesciunt, aliquam quaerat veniam. Sint culpa dignissimos ipsam qui
ullam odit, amet corrupti a temporibus architecto itaque libero id explicabo! Consectetur repellendus,
sit quae obcaecati quidem sequi aliquam iste.
</p>
</section>
<section class="scroll__section" id="scroll__section__2">
<div class="sticky__elem main__message a">
<p>
<small>편안한 촉감</small>
입과 하나 되다
</p>
</div>
<div class="sticky__elem desc__message b">
<p>
편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가
댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠.
</p>
<div class="pin"></div>
</div>
<div class="sticky__elem desc__message c">
<p>
디자인 앤 퀄리티 오브 스웨덴,<br>메이드 인 차이나
</p>
<div class="pin"></div>
</div>
</section>
<section class="scroll__section" id="scroll__section__3">
<p class="mid__mesagge">
<strong>Retina 머그</strong><br>
아이디어를 광활하게 펼칠<br>
아름답고 부드러운 음료 공간.
</p>
<p class="canvas__caption">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet at fuga quae perspiciatis veniam
impedit et, ratione est optio porro. Incidunt aperiam nemo voluptas odit quisquam harum in mollitia.
Incidunt minima iusto in corporis, dolores velit. Autem, sit dolorum inventore a rerum distinctio vero
illo magni possimus temporibus dolores neque adipisci, repudiandae repellat. Ducimus accusamus similique
quas earum laborum. Autem tempora repellendus asperiores illum ex! Velit ea corporis odit? Ea, incidunt
delectus. Sapiente rerum neque error deleniti quis, et, quibusdam, est autem voluptate rem voluptas.
Ratione soluta similique harum nihil vel. Quas inventore perferendis iusto explicabo animi eos ratione
obcaecati.
</p>
</section>
<!-- !--Section -->
<!-- Footer -->
<footer class="footer">
2020, 1분코딩
</footer>
</div>
<!-- !-- 모든 컨텐츠를 감싸는 container -- -->
<script src="js/main.js"></script>
</body>
</html>