CSS 기초 #6 (box, position)

 

box 모델

 

 

1. 콘텐츠 (Content): 실제 콘텐츠가 포함된 영역. 텍스트나 이미지 등이 이 영역에 위치.
2. 패딩 (Padding): 콘텐츠와 테두리 사이의 공간, 요소의 내부 여백. 배경색은 패딩 영역까지 적용.
3. 테두리 (Border): 요소의 콘텐츠와 패딩을 감싸는 경계선. 색상, 두께, 스타일을 설정할 수 있음.
4. 마진 (Margin): 테두리와 다른 요소 간의 공간, 외부 여백. 마진은 배경색이 적용되지 않음.

 

※ 마진이든 패딩이든 설정 값은 상우하좌 (시계 방향) 순으로 적용.

 

 

 

여백 관련 (margin / padding)

/* margin (외부 여백) - 요소와 다른 요소 사이의 거리를 조정 */

div {
  margin: 10px;		/* 모든 방향에 10px 여백 */
  margin: 10px 20px;	/* 위/아래 10px, 좌/우 20px 여백 */
  margin: 10px 20px 30px;	/* 위 10px, 좌/우 20px, 아래 30px 여백 */
  margin: 10px 20px 30px 40px;	/* 위 10px, 우 20px, 아래 30px, 좌 40px 여백 */
}



/* padding (내부 여백) - 콘텐츠와 테두리 사이의 공간을 조정 */

div {
  padding: 10px; /* 모든 방향에 10px 패딩 */
  padding: 10px 20px; /* 위/아래 10px, 좌/우 20px 패딩 */
  padding: 10px 20px 30px; /* 위 10px, 좌/우 20px, 아래 30px 패딩 */
  padding: 10px 20px 30px 40px; /* 위 10px, 우 20px, 아래 30px, 좌 40px 패딩 */
}

 

 

 

 

테두리 관련 (border)

div {
  border: 2px solid black;	/* 보통은 이런 식으로 씀. */
  border-width: 3px;		/* 테두리 굵기 */
  border-style: dashed;		/* 테두리 스티알 */
  border-color: red;		/* 테두리 색상 */
  border-radius: 10px;		/* 테두리의 둥근 정도 */  
}

 

 

 

div {
  width: 300px;       /* 콘텐츠 영역의 너비 */
  height: 200px;      /* 콘텐츠 영역의 높이 */
  padding: 20px;      /* 콘텐츠와 테두리 사이의 여백 */
  border: 5px solid black;  /* 테두리 두께와 스타일 */
  margin: 15px;       /* 다른 요소와의 간격 */
  background-color: lightblue;  /* 배경 색상 */
}

 

 

 

 

 

 

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

실습 - 계산기 

 

See the Pen calculator CSS by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

 

position (위치) 관련

- static : 해당 페이지 지점에 고정 (디폴트) ; top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않음

- relative : 자신을 기준으로 top, right, bottom, left 의 값에 따라 이동. 이때 이동한 위치는 다른 요소에 영향을 주지 않음

- absolute : 요소를 문서 상에서 위치를 지정한 부모 요소를 기준으로 배치. 부모 요소가 없는 경우에는 문서(body)를 기준으로 배치.

- fixed : 요소를 문서 상에서 위치를 지정한 뷰포트(viewport)를 기준으로 배치. 이때 뷰포트란 사용자가 볼 수 있는 화면 영역을 의미. 스크롤해도 화면에서 고정.

- sticky : 요소를 문서 흐름에 따라 배치한 후, 스크롤 되는 부모와 표 관련 요소를 포함한 부모 요소를 기준으로 top, right, bottom, left 의 값에 따라 이동. 이때 이동한 위치는 다른 요소에 영향을 주지 않음

 

 

div {
  position: static;  /* 기본값 */
}

div {
  position: relative;
  top: 20px;  /* 위에서 20px 내려옴 */
  left: 30px; /* 왼쪽에서 30px 이동 */
}

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

div {
  position: fixed;
  top: 0;
  left: 0;
}

div {
  position: sticky;
  top: 0;  /* 페이지 상단에 고정 */
}

 

상우하좌로의 이동 top, right, bottom, left 속성과 앞뒤 깊이의 z-index 속성이 있다.

 

 

 

 

 

 

실습 

 

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

 

 

참고 자료

 

See the Pen CSS Positioning property by Linda (@LindaOjo) on CodePen.

 

 

 

연습문제 (x0.5로 해서 확인)

 

See the Pen basic-nav by Cheolho Jang (@chiro-J) on CodePen.