4. HTML/CSS(좌표 설정과 box사이즈)

■ 좌표 설정

좌표 속성

.box {
  top : 20px;
  left : 30%;
}

top, bottom, left, right 속성을 사용하여 상하좌우 위치를 조정 가능합니다.

이때, 좌표 속성을 사용하기 위해서는 기준점을 제시해줘야 합니다.

 

 

position 속성

.box {
  position : static; /* 기준이 없어요 (좌표적용 불가하며 고정됨) */
  position : relative; /* 기준이 내 원래 위치요 */
  position : absolute; /* 기준이 내 부모요 */
  position : fixed; /* 기준이 브라우저 창이요 (viewport) */
}

position 속성은 좌표 속성을 사용하기 위한 기준점을 제시해 줍니다.

positon: absolute는 부모 박스 중에서 position: realtive를 가지고 있는 박스를 기준으로 잡는 속성입니다.

 

 

position: absolute 를 적용한 가운데 정렬

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin-left : auto;
  margin-right : auto;
  width : 400xp; // 얘는 적절하게 주면 됨
}

 

 

 

■ box 사이즈

width의 실제 사이즈

width의 실제 사이즈는 파란색으로 표시된 부분입니다.

그러므로 200px의 박스를 만들어도, padding을 높게 잡으면 박스의 폭이 padding 만큼 늘어나게 됩니다.

 

 

box 폭을 border까지 설정하고 싶을 때

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

box-sizing 속성을 통해 border까지를 실제 박스 폭으로 설정해주면서

박스 사이즈를 원하는 대로 설정하기 쉬워집니다.

 

 

필수 기본값 CSS 리스트

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}

box-sizing 속성은 모든 div에 넣어 놓는 것이 좋습니다.

body의 margin도 기본적으로 여백이 있기 때문에 0으로 설정해 놓는 것이 좋습니다.

이와 같이 css에 기본적으로 통일된 스타일을 주기 위해, 또한 다른 부라우저에서도 같은 효과를 보기 위해

CSS normalize라고 만든 문서가 있습니다.

이를 <link> 태그로 첨부하면 앞서 말한 문제들을 미리 해결할 수 있습니다.

CSS Normalize 링크 :  https://github.com/necolas/normalize.css/blob/master/normalize.css