03. CSS Box Model

12927 단어 CSS멋사TILCSS

모든 UI 는 사실 수많은 BOX로 구성되어 있다.

1. 박스의 구성

  • Content 박스
    : 요소의 콘텐츠 표시
  • Padding 박스
    : 콘텐츠와 border 사이의 공간
  • Border 박스
    : 콘텐츠와 padding 을 둘러싸는 테두리
  • Margin 박스
    : border 바깥쪽 영역으로 요소와 요소 사이의 공백 역할

(https://www.youtube.com/watch?v=H7teKNwV-Bk&t=1s)
참고하기

2. 박스의 유형

2-1. 블록 박스

블록 박스는

  • 사용 가능한 공간을 양 옆으로 100% 사용
  • 사용하지 못하는 공간은 마진 영역으로 채운다.
  • width와 height 속성을 사용하여 스타일링 가능
  • padding과 margin, border 을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어낸다

2-2. 인라인 박스

인라인 박스는

  • 기본적으로 컨텐츠 박스만큼의 크기만 가진다 => 새 줄로 행을 바꾸지 않는다.
  • width와 height 속성을 사용하여 스타일링이 불가능
  • padding border 조절 가능
  • margin 좌우만 조절 가능
  • 해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다

2-3. Display

: 박스의 성질을 지정하여 다른 박스들과 어떤 방식으로 위치가 배치 될지 결정해준다.

외부 디스플레이 타입

: 외부의 다른 형제 부모의 박스배치에 영향

  • display:inline
  • display:block
  • display:inline-block
  <p>BLOCK</p>
  <span>INLINE</span>
  <span>INLINE</span>
  <span>INLINE</span>
  </div>

이런 모양을 보인다.

p는 block
span은 inline이기 때문인데
span 요소에
display:block display:inline-block을 주면?

짜라란 이렇게 배치가 되는 것을 볼 수 있다! (border, margin-bottom으로 추가 스타일링 해줌)

내부 디스플레이 타입

: 내부 자식들의 배치에 영향

  • display: flex
  • display: grid

3. 표준 CSS 박스 모델

(Standard CSS Box Model)

border

  • 기본적으로 solid 를 많이 쓰지만 이런 것도 있다!
<style>
  h1{
    /* width를 200px로 딱 맞춰줌 
    box-sizing: border-box; */
    width: 100px;
    height: 30px;
    padding: 10px;
    /* border: 10px solid black; */
    /* border-bottom: 4px double black; */
    border-bottom-width: 4px;
    border-bottom-color: black;
    border-bottom-style: double;
  }
  p{
    width: 50px;
    padding: 10px;
    border: 20px ridge #7ffff6;
  }
  h2{
    width: 180px;
    height: 30px;
    padding: 2px;
    border: solid 10px;
    border-color: red green blue yellow;
  }
</style>
</head>
<body>
<!-- 기본 사이즈 32px -->
<h1>HEY</h1>
<h2>border-color</h2>
<!-- 기본 사이즈 16px  -->
<p>hello world</p>
</body>

border-radious

radius 값을 반지름으로 하는 원을 박스의 꼭짓점에서 그려 둥근 테두리를 그리는 원리

  • 꼭지점이 기준이라는 것 잊지말기

<원 만들기>

1. px 로 원만들기

h1 {
    width: 60px;
    height: 60px;
    background-color: black;
    border-radius: 30px;
}

h1 width의 절반 px을 border-radius 로 적어줬을 떄 완벽한 원이 나오는 걸 볼 수 있다.

여기서잠깐

유의할점이 있다 !! 


    h1 {
      width: 60px;
      height: 60px;
      background-color: black;
      border: 6px solid #228B22;
      border-radius: 30px;
}

border 에 6px을 넣자

원이 뭉개졌다 !!!!!!!?????

=> 아 당연함 ..
border 6px*2 + width 60px = 72px
72px 의 절반은 36px
그럼 다시 border-radius 을 36px로 줘보자구 

 <style>
      h1 {
        width: 60px;
        height: 60px;
        background-color: rgb(255, 74, 74);
        border: 6px solid #228b22;
        border-radius: 36px;
      }
    </style>

편안 ,, 행복 ,,

2. border-radius: 50%; 으로 원 만들기

h1 {
	width: 100px;
	height: 100px;
    border: 3px solid #228B22;
    border-radius: 50%;
}
[Vue.js] Intro
Swift 5. 스위프트 일지 (2)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage