조직도를 만들었는데 이미 있는 페이지에 끼어넣으려니 기존의 *, body가 겹치는 것이 문제가 되었습니다.
조직도의 * , body를 클래스로 처리하려니 container의 패딩과 마진이 중복되어 엉망이 되네요ㅠ
어떻게 고쳐야할까요?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL="StyleSheet" HREF="css.css" type="text/css">
<div class="container">
<h1 class="level-1 rectangle">Plenipotentiary<br>Conference</h1>
<h1 class="level-1_1 rectangle">Council</h1>
<ol class="level-2-wrapper">
<li>
<p><b>ITU-R</b></p>
<h2 class="level-2 rectangle">World/Regional Rediocommunication Copnferences</h2>
<h2 class="level-2_2 rectangle">Radicommunication Assemblies</h2>
<h2 class="level-2_2 rectangle">Radio Regulations Board</h2>
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">Advisory Gropup</h3>
</li>
<li>
<h3 class="level-3 rectangle">Study Groups</h3>
</li>
</ol>
</li>
<li>
<p><b>ITU-T</b></p>
<h2 class="level-2 rectangle">World Copnferences on Internation Telecommunications</h2>
<h2 class="level-2 rectangle">World Telecommunications Standardizaions Assemblies</h2>
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">Advisory Group</h3>
</li>
<li>
<h3 class="level-3 rectangle">Study Groups</h3>
</li>
</ol>
</li>
<li>
<p><b>ITU-D</b></p>
<h2 class="level-2 rectangle">World/Regional Telecommunication Development Copnferences</h2>
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">Advisory Gropup</h3>
</li>
<li>
<h3 class="level-3 rectangle">Study Groups</h3>
</li>
</ol>
</li>
</ol>
</div>
/* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--level-1: #5582c6;
--level-2: #5582c6;
--level-3: #5582c6;
--black: #5582c6;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container ol {
list-style: none;
}
body {
margin: 30px 0 50px;
text-align: center;
font-family: "Noto Sans Korean", sans-serif;
}
.container {
max-width: 800px;
padding: 0 0px;
margin: 0 auto;
}
.rectangle {
position: relative;
padding: 0;
}
/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
font-size: 20px;
color: #fff;
width: 200px;
margin: 0 auto 10px;
background: var(--level-1);
padding: 5px;
}
.level-1_1 {
font-size: 20px;
color: #fff;
width: 200px;
margin: 0 auto 40px;
padding: 16px;
background: var(--level-1);
}
.level-1_1::before {
content: "";
position: absolute;
top: 100%;
left: 49.5%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}
/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
font-size: 9px;
color: #fff;
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.level-2-wrapper p {color:#000; font-size:24px;}
.level-2-wrapper::before {
content: "";
position: absolute;
top: -20px;
left: 16.6%;
width: 66.8%;
height: 2px;
background: var(--black);
}
.level-2-wrapper li {
position: relative;
}
.level-2-wrapper > li::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}
.level-2 {
width: 256px;
margin: 0 auto 10px;
padding: 10px;
background: var(--level-2);
}
.level-2_2 {
width: 256px;
margin: 0 auto 10px;
padding: 19px;
background: var(--level-2);
}
/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.level-3 {
font-size: 13px;
width: 123px;
margin: 0 auto 40px;
padding: 20px 0;
background: var(--level-2);
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
.container {
max-width: 320px;
}
/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
font-size: 14px;
width: 120px;
margin: 0 auto 5px;
}
.level-1_1 {
font-size: 14px;
width: 120px;
}
.level-1_1::before {
left: 50%;
}
/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
font-size: 6px;
}
.level-2-wrapper p {color:#000; font-size:18px;}
.level-2-wrapper::before {
top: -20px;
left: 16.6%;
width: 66.8%;
}
.level-2-wrapper li {
position: relative;
}
.level-2-wrapper > li::before {
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
}
.level-2 {
width: 102px;
margin: 0 auto 5px;
padding: 10px 0;
background: var(--level-2);
}
.level-2_2 {
width: 102px;
margin: 0 auto 5px;
padding: 10px;
background: var(--level-2);
}
/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3 {
font-size: 6px;
width: 49px;
margin: 0 auto 40px;
padding: 10px 0;
background: var(--level-2);
}답변 1개 / 댓글 2개
전체를 section과 같은 것으로 잡으시고 ID 도는 class로 묶으신 뒤 css에 계층을 다 정하신 값을 입력해 수정하시면 됩니다
예
[Code]<section class="abc">
<div class="container">
<h1 class="level-1 rectangle">Plenipotentiary<br>Conference</h1>
<h1 class="level-1_1 rectangle">Council</h1>
<ol class="level-2-wrapper">
<li>
<p><b>ITU-R</b></p>
<h2 class="level-2 rectangle">World/Regional Rediocommunication Copnferences</h2>
<h2 class="level-2_2 rectangle">Radicommunication Assemblies</h2>
<h2 class="level-2_2 rectangle">Radio Regulations Board</h2>
<ol class="level-3-wrapper">
<li>
<h3 class="level-3 rectangle">Advisory Gropup</h3>
</li>
<li>
<h3 class="level-3 rectangle">Study Groups</h3>
</li>
</ol>
</li>
...</section>
[/Code]
이제 Css에서
[Code]
.abc.* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.abc.container ol {
list-style: none;
}
.abc.body {
margin: 30px 0 50px;
text-align: center;
font-family: "Noto Sans Korean", sans-serif;
}
...
[/Code]
처럼 전부 수정
답변에 대한 댓글 2개
답변을 작성하려면 로그인이 필요합니다.