테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

패딩, 마진 중복 처리 채택완료

ㅅㅇ2 4년 전 조회 2,918
답변 1
목록

조직도를 만들었는데 이미 있는 페이지에 끼어넣으려니 기존의 *, body가 겹치는 것이 문제가 되었습니다.

조직도의 * , body를 클래스로 처리하려니 container의 패딩과 마진이 중복되어 엉망이 되네요ㅠ

어떻게 고쳐야할까요?

 

</p>

<p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p>

<p><LINK REL="StyleSheet" HREF="css.css" type="text/css"></p>

<p> </p>

<p><div class="container"></p>

<p>  <h1 class="level-1 rectangle">Plenipotentiary
Conference</h1></p>

<p>  <h1 class="level-1_1 rectangle">Council</h1></p>

<p>  <ol class="level-2-wrapper"></p>

<p>    <li></p>

<p>      <p><b>ITU-R</b></p></p>

<p>      <h2 class="level-2 rectangle">World/Regional Rediocommunication Copnferences</h2></p>

<p>      <h2 class="level-2_2 rectangle">Radicommunication Assemblies</h2></p>

<p>           <h2 class="level-2_2 rectangle">Radio Regulations Board</h2></p>

<p>      <ol class="level-3-wrapper"></p>

<p>        <li></p>

<p>          <h3 class="level-3 rectangle">Advisory Gropup</h3>       </p>

<p>        </li>  </p>

<p>        <li></p>

<p>          <h3 class="level-3 rectangle">Study Groups</h3>         </p>

<p>        </li>        </p>

<p>      </ol>      </p>

<p>    </li></p>

<p>    </p>

<p>    </p>

<p>     <li></p>

<p>      <p><b>ITU-T</b></p></p>

<p>      <h2 class="level-2 rectangle">World Copnferences on Internation Telecommunications</h2></p>

<p>      <h2 class="level-2 rectangle">World Telecommunications Standardizaions Assemblies</h2></p>

<p>      <ol class="level-3-wrapper"></p>

<p>        <li></p>

<p>          <h3 class="level-3 rectangle">Advisory Group</h3>       </p>

<p>        </li>  </p>

<p>        <li></p>

<p>          <h3 class="level-3 rectangle">Study Groups</h3>         </p>

<p>        </li>        </p>

<p>      </ol>      </p>

<p>    </li></p>

<p>    </p>

<p>    </p>

<p>     <li></p>

<p>      <p><b>ITU-D</b></p></p>

<p>      <h2 class="level-2 rectangle">World/Regional Telecommunication Development Copnferences</h2></p>

<p>      <ol class="level-3-wrapper"></p>

<p>        <li></p>

<p>          <h3 class="level-3 rectangle">Advisory Gropup</h3>       </p>

<p>        </li>  </p>

<p>        <li></p>

<p>          <h3 class="level-3 rectangle">Study Groups</h3>         </p>

<p>        </li>        </p>

<p>      </ol>      </p>

<p>    </li></p>

<p>    </p>

<p>    </p>

<p>    </p>

<p>  </ol> </p>

<p>  </p>

<p></div></p>

<p> </p>

<p>

 

 

 

</p>

<p>/* RESET STYLES & HELPER CLASSES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p>:root {</p>

<p>  --level-1: #5582c6;</p>

<p>  --level-2: #5582c6;</p>

<p>  --level-3: #5582c6;</p>

<p>  --black: #5582c6;</p>

<p>}</p>

<p> </p>

<p>* {</p>

<p>  padding: 0;</p>

<p>  margin: 0;</p>

<p>  box-sizing: border-box;</p>

<p>}</p>

<p> </p>

<p>.container ol {</p>

<p>  list-style: none;</p>

<p>}</p>

<p> </p>

<p>body {</p>

<p>  margin: 30px 0 50px;</p>

<p>  text-align: center;</p>

<p>  font-family: "Noto Sans Korean", sans-serif;</p>

<p>}</p>

<p> </p>

<p>.container {</p>

<p>  max-width: 800px;</p>

<p>  padding: 0 0px;</p>

<p>  margin: 0 auto;</p>

<p>}</p>

<p> </p>

<p>.rectangle {</p>

<p>  position: relative;</p>

<p>  padding: 0;</p>

<p>}</p>

<p>

 </p>

<p>/* LEVEL-1 STYLES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p>.level-1 {</p>

<p>  font-size: 20px;</p>

<p>  color: #fff;</p>

<p>  width: 200px;</p>

<p>  margin: 0 auto 10px;</p>

<p>  background: var(--level-1);</p>

<p>  padding: 5px;</p>

<p>}</p>

<p> </p>

<p>.level-1_1 {</p>

<p>  font-size: 20px;</p>

<p>  color: #fff;</p>

<p>  width: 200px;</p>

<p>  margin: 0 auto 40px;</p>

<p>  padding: 16px;</p>

<p>  background: var(--level-1);</p>

<p>}</p>

<p> </p>

<p>.level-1_1::before {</p>

<p>  content: "";</p>

<p>  position: absolute;</p>

<p>  top: 100%;</p>

<p>  left: 49.5%;</p>

<p>  transform: translateX(-50%);</p>

<p>  width: 2px;</p>

<p>  height: 20px;</p>

<p>  background: var(--black);</p>

<p>}</p>

<p> </p>

<p>/* LEVEL-2 STYLES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p>.level-2-wrapper {</p>

<p>  font-size: 9px;</p>

<p>  color: #fff;</p>

<p>  position: relative;</p>

<p>  display: grid;</p>

<p>  grid-template-columns: repeat(3, 1fr);</p>

<p>}</p>

<p> </p>

<p>.level-2-wrapper p {color:#000; font-size:24px;}</p>

<p> </p>

<p>.level-2-wrapper::before {</p>

<p>  content: "";</p>

<p>  position: absolute;</p>

<p>  top: -20px;</p>

<p>  left: 16.6%;</p>

<p>  width: 66.8%;</p>

<p>  height: 2px;</p>

<p>  background: var(--black);</p>

<p>}</p>

<p> </p>

<p>.level-2-wrapper li {</p>

<p>  position: relative;</p>

<p>}</p>

<p> </p>

<p>.level-2-wrapper > li::before {</p>

<p>  content: "";</p>

<p>  position: absolute;</p>

<p>  bottom: 100%;</p>

<p>  left: 50%;</p>

<p>  transform: translateX(-50%);</p>

<p>  width: 2px;</p>

<p>  height: 20px;</p>

<p>  background: var(--black);</p>

<p>}</p>

<p> </p>

<p>.level-2 {</p>

<p>  width: 256px;</p>

<p>  margin: 0 auto 10px;</p>

<p>  padding: 10px;</p>

<p>  background: var(--level-2);</p>

<p>}</p>

<p> </p>

<p>.level-2_2 {</p>

<p>  width: 256px;</p>

<p>  margin: 0 auto 10px;</p>

<p>  padding: 19px;</p>

<p>  background: var(--level-2);</p>

<p>}</p>

<p>

 </p>

<p>/* LEVEL-3 STYLES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p>.level-3-wrapper {</p>

<p>  position: relative;</p>

<p>  display: grid;</p>

<p>  grid-template-columns: repeat(2, 1fr);</p>

<p>}</p>

<p> </p>

<p>.level-3 {</p>

<p>  font-size: 13px;</p>

<p>  width: 123px;</p>

<p>  margin: 0 auto 40px;</p>

<p>  padding: 20px 0;</p>

<p>  background: var(--level-2);</p>

<p>}</p>

<p>

 </p>

<p>/* MQ STYLES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p>@media screen and (max-width: 767px) {</p>

<p> </p>

<p>      </p>

<p> </p>

<p>    .container {</p>

<p>        max-width: 320px;</p>

<p>      }</p>

<p> </p>

<p>/* LEVEL-1 STYLES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p>.level-1 {</p>

<p>  font-size: 14px;</p>

<p>  width: 120px;</p>

<p>  margin: 0 auto 5px;</p>

<p>}</p>

<p> </p>

<p>.level-1_1 {</p>

<p>  font-size: 14px;</p>

<p>  width: 120px;</p>

<p>}</p>

<p> </p>

<p>.level-1_1::before {</p>

<p>  left: 50%;</p>

<p>}</p>

<p> </p>

<p>/* LEVEL-2 STYLES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p>.level-2-wrapper {</p>

<p>  font-size: 6px;</p>

<p>}</p>

<p> </p>

<p>.level-2-wrapper p {color:#000; font-size:18px;}</p>

<p> </p>

<p>.level-2-wrapper::before {</p>

<p>  top: -20px;</p>

<p>  left: 16.6%;</p>

<p>  width: 66.8%;</p>

<p>}</p>

<p> </p>

<p>.level-2-wrapper li {</p>

<p>  position: relative;</p>

<p>}</p>

<p> </p>

<p>.level-2-wrapper > li::before {</p>

<p>  left: 50%;</p>

<p>  transform: translateX(-50%);</p>

<p>  width: 2px;</p>

<p>  height: 20px;</p>

<p>}</p>

<p> </p>

<p>.level-2 {</p>

<p>  width: 102px;</p>

<p>  margin: 0 auto 5px;</p>

<p>  padding: 10px 0;</p>

<p>  background: var(--level-2);</p>

<p>}</p>

<p> </p>

<p>.level-2_2 {</p>

<p>  width: 102px;</p>

<p>  margin: 0 auto 5px;</p>

<p>  padding: 10px;</p>

<p>  background: var(--level-2);</p>

<p>}</p>

<p>  </p>

<p>  </p>

<p>/* LEVEL-3 STYLES</p>

<p>–––––––––––––––––––––––––––––––––––––––––––––––––– */</p>

<p> </p>

<p>.level-3 {</p>

<p>    font-size: 6px;</p>

<p>    width: 49px;</p>

<p>    margin: 0 auto 40px;</p>

<p>    padding: 10px 0;</p>

<p>    background: var(--level-2);</p>

<p>  }</p>

<p>  </p>

<p>

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
유판
유판
4년 전

전체를 section과 같은 것으로 잡으시고 ID 도는 class로 묶으신 뒤 css에 계층을 다 정하신 값을 입력해 수정하시면 됩니다

예

[Code]

 

Plenipotentiary Conference

 

Council

 

       

  1.      

    ITU-R

         

    World/Regional Rediocommunication Copnferences

         

    Radicommunication Assemblies

               

    Radio Regulations Board

         

             

    1.          

      Advisory Gropup

             

             

      2.   

             

    2.          

      Study Groups

               

             

      3.         

           

          

       

    2. ...

[/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개

�
ㅅㅇ2
4년 전
섹션처리해도 깨지네요
�
유판
4년 전
그렇다면 완전히 처리를 달리하셔야합니다. 바디를 섹션 클레스로 옮기신 후 동일 클레스명을 가진 컨테이너의 클레스 명을 수정하셔야 해요.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인