클라우딩 어플리케이션 엔지니어링 TIL Day 5 (1)

# 박스 모델 - 크기 지정, 여백

<div class="box">
      <div class="inner-box">
        안녕하세요
        <br />
        반갑습니다 <br />
        정지은 실습 중이다
      </div>
    </div>

.box {
  width: 700px;
  height: 700px;
  background-color: #ddd;
}

.inner-box {
  width: 100%;
  height: 100%;
  max-width: 50%;
}

위의 코드를 적용하면 inner-box의 width가 box class의 크기에 맞춰 100%로 700px가 될 것 같지만

max-width 가 50% 이기 때문에 350px가 최대임, max-height도 동일

박스 크기에 제한을 두고 싶으면 max 속성을 이용하자

margin. padding 은 네 면을 한번에, 각각 지정해 줄 수 있음, padding 도 아래 코드와 동일하게 적용됨

  margin: 10px; /*네 면 모두 적용*/
  margin: 10px 20px; /* 상하 좌우 */
  margin: 10px 20px 30px; /*상 좌우 하*/
  margin: 10px 20px 30px 40px; /* 상 우 하 좌 시계 방향으로 적용*/

 

# 마진 상쇄

.box {
  margin-top: 50px;
  width: 700px;
  height: 700px;
  background-color: #ddd;
}

.inner-box {
  margin-top: 30px;
  width: 100%;
  height: 100%;
  max-width: 50%;
  max-height: 50%;
}

부모의 margin-top 에 50px, 자식의 margin-top에 30px를 할당하면 위에서부터 총 80px가 떨어져 있을 것이라 예상됨

하지만 50px만 떨어져있음

이처럼 부모와 자식 간 더 큰 margin의 값으로 상쇄되는 것을 마진 상쇄라고 함

마진 상쇄를 없애주기 위해서는

1. 자식에 float : left; 속성 추가
2. 부모에 border-top 속성 추가로 테두리 넣어주기
3. 부모에 content 넣어주기

---

# 박스 모델 - 테두리, 박스 크기

border : 박스의 네 면에 테두리 그리는 속성

box-sizing : 박스 크기 계산 시 내부 여백, 테두리 크기 포함 여부 결정

- 기본 값은 content-box : padding, width/height, border-width의 크기가 모두 더해짐

- border-box : width/height 값 안에 padding, border의 크기가 합해짐, 실제 작업 시 주로 사용

  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom-width: 5px;
  border-bottom-style: dashed;
  border-bottom-color: red;

CSS 적용된 모습

 

.box {
  width: 100px;
  height: 100px;
  background-color: #ddd;

  padding: 10px;

  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom-width: 5px;
  border-bottom-style: dashed;
  border-bottom-color: red;
}

해당 CSS를 적용한 box의 크기는 width/height 100px가 될 것으로 예상되지만 실제 크기는 그것보다 더 큼

그 이유는 padding 값과 border 크기가 합쳐졌기 때문

122.67 과 125.33 으로 100px 보다 커졌다

해당 값이 더해지지 않고 처음에 설정한 100px이 되도록 해주려면 box-sizing : border-box;  속성을 지정해주면 해결됨

---

# 박스 모델 - 초과, 투명도

overflow : 콘텐츠 내용이 지정한 박스 크기를 초과했을 때 대처하는 속성

- visible (기본값) : 초과해도 내용이 그대로 노출

- overflow-x, overflow-y 로 분리해서 지정 가능

- hidden : 숨김

- scroll : 스크롤바 무조건 노출

- auto : 브라우저가 자동으로 결정

 

opacity : 박스의 투명도 조정, 자식 요소도 함께 투명해짐

 

- lorem : 아무 의미 없는 텍스트 자동으로 넣어주는 단축어

---

# 표시 유형과 레이아웃 - 표시유형, flex, position

display : 요소를 블록, 인라인에 대한 처리의 선택과 자식 요소를 배치하는 레이아웃 설정

div {
  display: inline; /*블럭 레벨 요소를 인라인 레벨 요소처럼 보이게 해 줌*/
}

/*인라인 레벨 요소는 margin-top 적용 X*/
span {
  display: block; /*인라인 레벨 요소를 블럭 레벨 요소로 보이게 해 줌*/
}

span {
  display: inline-block; /*문맥의 흐름을 인라인처럼 유지하고 블럭이 가진 css 도 사용 가능 */
}

span {
  display: none; /*없는 요소로 취급*/
}

visibility : 레이아웃 변경 X 시각적으로 보이거나 숨기는 속성, 레이아웃 상에서 공간 그대로 차지

float : 문맥의 흐름으로부터 빠져 좌우측에 배치되는 속성

img {
  float: left; /*요소를 좌측에 배치*/
  width: 300px;
}

float : left 속성 지정

right도 같은 방식으로 지정, 단 문맥의 흐름이 위에서 아래로 내려가기 때문에 위로 올릴 때는 주의할 것

 

과거에는 float 속성을 사용해서 레이아웃을 만들었다

<div class="wrapper">
      <div class="content">콘텐츠1</div>
      <div class="content">콘텐츠2</div>
    </div>

해당 HTML 코드에 아래와 같은 CSS를 적용하면 content class가 wrapper class를 벗어나면서 크기가 이상해진다

.wrapper {
  padding: 10px;
  background-color: #ddd;
}

.content {
  float: left;
}

wrapper 클래스 밑으로 나와버린 content 클래스 요소

그 이유는?

float 속성을 사용하면 문맥에서 벗어나서 좌우로 배치하기 때문

-> wrapper는 콘텐츠가 없기 때문에 실제 content 영역은 높이가 0이 되고 내부 padding 영역만 남아있게 됨

의사요소 ::after 를 사용하여 해결

.wrapper {
  padding: 10px;
  background-color: #ddd;
}

.wrapper::after {
  content: "";
  display: block;
  clear: both;
}

.content {
  float: left;
  width: 50%;
}

의사요소를 추가해주니 좌우로 크기에 맞게 배치된 모습

최근에는 flexbox, grid 등으로 레이아웃을 만들기 때문에 float으로 레이아웃을 구성하지는 않는다

 

position : 문서 상에 요소를 배치하는 방법, 원하는 위치에 요소 지정 속성

- relative : 현재 위치를 기준(문맥의 흐름에서 빠져나오지 않음)으로 offset을 사용할 수 있다

.content1 {
  position: relative; /* 문맥의 흐름 그대로 offset 값 사용 가능*/
  top: 10px;
  left: 100px;
}

- absolute : 좌표 값이 정의되는 위치를 기준(문맥의 흐름에서 빠져나옴)으로 offset 사용할 수 있다

부모 요소의 position 속성을 기준으로 offset

영향을 많이 받아서 원하는 위치에 보낼 수도 있지만, 헷갈릴 수도 있는 속성

.content2 {
  /*죄표 값이 정의되는 위치를 기준으로 offset */
  position: absolute; /*문맥의 흐름에서 빠져나옴*/
  top: 50px;
  left: 50px;
}

- fixed : 스크롤을 따라다니는 속성

-sticky : 문맥의 흐름을 살리면서 스크롤을 내리면 스크롤을 따라다니는 속성

---

 

# 새롭게 알게 된 점

CSS 속성은 정말 다양하고 복잡해서 연습이 많이 필요한 것 같다.

마진상쇄에 대해서 처음으로 알게 되었고 그동안 원하는 크기가 안 나왔는지 깨달았다.

또한 제대로 이해하지 못한 상태로 position 속성을 사용해왔는데 이번 강의를 통해서 어떻게 해야 원하는 위치에 효율적으로 배치할 수 있는지에 대해서 배웠다.

CSS를 능숙하게 다루는 것은 멀고도 험한 것 같다.