[CSS] width & max-width & box-sizing

💾 Editor: VSCode

---

👉 z-index

공중에 떠있는 애들이 많으면 누가 맨 앞에 올 것인가?

순서 지정

 

html

    <div class="bottom-box" style="padding: 50px;"> 💡
        <p class="bottom-content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse molestiae dolore sed, est soluta earum.
        Temporibus cupiditate, tempora doloribus aliquid quo ipsum maxime, architecto iste rerum maiores consequatur
        quas corrupti?
        </p>
    </div>

 

박스를 하나 더 복사해서 style에 padding을 50px를 주면 위 이미지와 같이 보임

 

👉 width

• width는 content 영역의 너비를 의미함 (box 가 아니라 content 영역)
  •  해결책=> content 부분만 width 설정하지 말고 padding, border 포함해라

 

.bottom-box {
    background-color: #eee;
    width: 80%; 💡 /* 부모 태그의 80% , 반응형일 때 퍼센트 많이 씀*/
    max-width: 600px; 💡 /* 최대 width 지정, 600px 이상으로 커지지 않음 */
    margin: auto;
    padding: 20px;
    text-align: center;
    position: relative;
    top: -50px;
    box-sizing: border-box; 💡💡💡
}

box-sizing에 border-box를 줌.

이렇게 하면 width가 padding, border 포함함

 

💡 팁

div {
    box-sizing: border-box;
}

처음 시작할 때 <div>에 style을 box-sizing:border-box로 설정하고 개발 시작하면 편함

width가 padding, border 포함함

 

body {
  margin: 0px;
}

margin:0px도 설정하고 시작!

 

div {
    box-sizing: border-box;
}

body {
    margin: 0px;
}

• 숙련자일수록 css 파일 맨 위에 써놓는 코드가 많음
• 숙련자는 호환성 이슈 해결부터 첨부하는 경우가 많음
• 검색 키워드 => normalize.css
  • https://github.com/necolas/normalize.css/blob/master/normalize.css

box-sizing
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

 

 

 

코딩애플 공부 기록