패딩, 마진 중복 처리

현재접속자 최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    패딩, 마진 중복 처리

    QA

    패딩, 마진 중복 처리

    본문

    조직도를 만들었는데 이미 있는 페이지에 끼어넣으려니 기존의 *, 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);
  }
  
    #그누보드5

    이 질문에 댓글 쓰기 :

    답변 1

    유판 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    39.♡.♡.133

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

    예

    <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>

     

    이제 Css에서

     

    
.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;
}
...

     

    처럼 전부 수정

    답변을 작성하시기 전에 로그인 해주세요.
    전체 0 | RSS
    QA 내용 검색
    • 개별 목록 구성 제목 답변작성자조회작성일
    • 질문이 없습니다.

    회원로그인

    인기태그
    #그누보드5(59518) #영카트5(16776) #php(14952) #그누보드4(10632) #게시판(3155) #javascript(2632) #그누보드(2343) #css(2042) #mysql(1506) #모바일(1271) #영카트(1270) #그누커머스(1178) #html(1098) #jquery(1012) #자바스크립트(935) #최신글(932) #DB(818) #로그인(791) #이미지(762) #여분필드(736)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT