Position과제 & width & box-sizing

겹치는 박스 만들기

당연히 position 속성을 사용하면 되겠죠?

absolute, relative, fixed 중 하나를 사용하면 됩니다.

하지만 박스를 만들 때 주의점이 하나 있습니다.

원래 div 박스의 width를 주게되면 padding, border를 고려하지 않습니다.

padding 안쪽 부분만 실제 width로 설정합니다.

그래서 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있습니다.

웹사이트 대충 만드는 초보는 별 상관 없겠지만

실제 업무에서는 사이즈 조금만 잘못되어도 다른 요소에 크게 영향을 줄 수 있습니다.

박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성 

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}

<div class="explain-box">
    <h4>How we design our shoes</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</div>
.explain-box {
    width: 700px;
    margin: auto;
    padding: 20px;
    text-align: center;
    background: #eee;
    position: relative;
    top : -40px;
}

z-index : 높을수록 앞에온다.

max-width

width %는 pc사이즈에서 너무 크게 표현된다. 

.explain-box {
    width: 80%;
    max-width: 600px;
}

반응형 layout 만들때 min, max width, height 사용하면 깔끔한 레이아웃 만들때 유용하다.

CSS 파일 작성시 기본으로 쓰면 좋을 속성들

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}
html {
  line-height : 1.15; /*기본 행간 높이*/
}

여기에 더해서

모든 h, p 태그의 margin을 균일하게 설정하거나

li, a 태그에 text-decoration : none 을 주거나

나중에 배울 table 태그에 border-collapse: collapse 를 주거나

이런 것들이 가능합니다.

이런거 미리 적고 시작하면 항상 편리하게 CSS 코드를 짤 수 있습니다.

가끔 CSS Reset 이런 식으로 부르기도 합니다.

여러분도 기본으로 복붙하고 시작할 "필수 기본값 CSS 리스트"를 하나 만들어두고 맨날 업데이트 해보십시오.

CSS normalize

그리고 이런 것 뿐만 아니라 브라우저간 통일된 스타일을 주기 위해

특정 스타일을 맨 위에 적고 CSS 코드짜기 시작하는 경우도 있습니다.

왜냐면 브라우저마다 <button>의 스타일이 다르고, 가끔 line-height 이런 줄간격같은 것도 다르고

다음 시간에 배울 <input> 사이즈도 다르기 때문입니다.

그래서 같은 코드를 짜도 다른 브라우저에선 이상하게 보일 수 있습니다.

그래서 어떤 아저씨가 CSS normalize 라고 만든 문서가 하나 있는데

여기있는 스타일 붙여넣으시면 브라우저간 다르게 보이는 문제들을 미리 해결할 수 있습니다.

그래서 여기 있는 스타일을 그대로 여러분의 CSS 파일에 복붙하시거나

아니면 다운받아서 <link> 태그로 첨부하시면 됩니다.

브라우저간 디자인이 달라지는걸 방지 하기 위한 normalize css

PreviousPosition과 좌표 레이아웃Nextform

Last updated