-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
css 적용안됨
21.02.14 00:36 작성 조회수 349
0
03.css---------------------
.page-header{
display: block;
padding: 1em;
background: lightgray;
}
.content-container{
font-size: 0; /*공백 을 0 으로 지정해서 인라인 블록을 붙이기 위해서*/
}
.content-container: after{
/* css 가상 컨텐트/ content-container: before 로 한다면 의미가 없다 */
content: '';
clear: left;
display: block;
height: 0;
visibility: hidden;
}
.content-section{
/* float : 아딴 엘리먼트에 적용되면, 지정된 방향에 두고 주변요소들이 감싸고 돌게 된다 . 요소가 씹힌다
공간을 차지 하지 않는다 */
float: left;
padding: 1em;
font-size: 1rem;
/* rem: root em : <html>의 폰트사이즈로 맞춘다
<html> 사이즈를 안맞춘다면 defaut로 16px로 맞춰져 있다
*/
}
.content-section-a{
/* 왼쪽 1em 오른쪽 1em을 뺴라는 것 */
width: calc(30% -2em );
background: yellow;
}
.content-section-b{
float:right;
width: calc(70%-2em );
background: pink;
}
.page-footer{
/* float:left 를 해제되게한다
div가 딱 끝나는 시점에서 float를 해제 시킨다
*/
clear: left;
padding: 1em;
background: yellowgreen;
}
/* 이거 적용안됨 */
.global-menu-link{
display: block;
margin-bottom: 5px;
background: white;
}
.clear{
clear:left;
}
---------------- reset.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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
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;
}
css 가 적용이 안되는데 왜이러는 걸까요 ??
01.html-----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/02.css">
</head>
<body>
<article class="page">
<header class="page-header">
<h1 class="page-title">페이지 제목</h1>
<nav class="global-menu">
<a href="#" class="global-menu-link">홈</a>
<a href="#" class="global-menu-link">소개</a>
<a href="#" class="global-menu-link">메뉴</a>
<a href="#" class="global-menu-link">커뮤니티</a>
<a href="#" class="global-menu-link">연락처</a>
</nav>
</header>
<div class="content-container">
<section class="content-section content-section-a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="content-section content-section-b">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores suscipit eveniet, accusamus, deserunt dolore odit aperiam obcaecati repellendus sunt beatae voluptates alias nihil ut quibusdam dicta quam illum mollitia harum dolores neque quaerat. Quis vel repellat velit animi iure similique sed ipsam delectus maiores mollitia nulla, tempora earum beatae ex. Minima, porro! Doloribus tempore dolorum cupiditate, earum nisi excepturi nihil enim beatae, amet ab nemo porro ratione officia magnam laboriosam. Ea aliquid, repellendus nisi! Mollitia ratione officiis aut. Reprehenderit aperiam nulla distinctio neque totam dolor voluptatum laboriosam placeat temporibus, tempora asperiores maiores quis sint, impedit ullam, aut hic animi debitis.</p>
</section>
<div class="clear"></div>
</div>
<footer class="page-footer">
<p class="copyright">2019 © 안녕하세요</p>
</footer>
</article>
</body>
</html>
답변을 작성해보세요.
0
제주코딩베이스캠프
지식공유자2021.03.03
안녕하세요, 제주코딩베이스캠프입니다 :)
luciayj님께서 올려주신 코드를 확인해 보니 별다른 문제는 없어보입니다.
css 파일이 03.css 로 저장되어 있는 것으로 보이는데 파일명과 01.html에서 <head></head>를 한 번 확인해 주시길 바랍니다.
혹시 충분한 답변이 되지 않았거나 추가로 질문이 있으시면 언제든지 답글 부탁드립니다.
감사합니다.
답변 1