본문 바로가기
(혼) (공) (web)

CSS 복습(4일차)

by 만석이 2024. 2. 15.
<!-- <h1>padding</h1>
<pre>
  엘리먼트 내부에 추가적인 공간을 생성한다
  일반적으로 엘리먼트의 크기가 커진다
</pre>

<style>
  .item {
    background-color: #ddd;
    display: inline-block;
  }

  .p-4 {
    padding: 1rem;
  }

  .pt-4 {
    padding-top: 1rem;
  }

  .pb-4 {
    padding-bottom: 1rem;
  }

  .pl-4 {
    padding-left: 1rem;
  }
  
  .pr-4 {
    padding-right: 1rem;
  }
</style>

<h3>없음</h3>
<div class="item">item</div>

<h3>전체</h3>
<div class="item p-4">item</div>

<h3>top</h3>
<div class="item pt-4">item</div>

<h3>bottom</h3>
<div class="item pb-4">item</div>

<h3>left</h3>
<div class="item pl-4">item</div>

<h3>right</h3>
<div class="item pr-4">item</div>

<h3>x축</h3>
<div class="item pl-4 pr-4">item</div>

<h3>y축</h3>
<div class="item pt-4 pb-4">item</div>

<h3>top 제외</h3>
<div class="item pr-4 pb-4 pl-4">item</div> -->		 padding을 사용하면 엘리먼트 내부에 추가적인 공간을만든다.

item클래스는 배경을 회색으로 지정해주었고 
display:inline-block으로 해줌으로써 인라인레벨 블럭으로 
엘리먼트에 딱맞는 컨테이너블럭이 만들어진다.

p-4 클래스는 추가적인 공간을 1rem을 주었다.

pb-4 클래스는 bottom만 추가공간 1rem을 주었다.

pl-4 클래스는 left만 추가공간 1rem을 주었다.

pr-4 클래스는 right만 추가공간 1rem을 주었다.

pr-4를 사용함으로써 오른쪽만 추가공간을 주는 등

이러한 방법으로 원하는 방향만 추가공간을 줄수있다. 

 

<!-- <h1>margin</h1>
<pre>
  엘리먼트 외부에 공간을 생성한다
  엘리먼트 사이에 공간을 확보할 때 사용된다
</pre>

<style>
  .item {
    background-color: #ddd;
    display: inline-block;
  }

  .m-4 {
    margin: 1rem;
  }

  .mt-4 {
    margin-top: 1rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .ml-4 {
    margin-left: 1rem;
  }

  .mr-4 {
    margin-right: 1rem;
  }
</style>


<h3>없음</h3>
<div class="item">item</div>

<h3>전체</h3>
<div class="item m-4">item</div>

<h3>top</h3>
<div class="item mt-4">item</div>

<h3>bottom</h3>
<div class="item mb-4">item</div>

<h3>left</h3>
<div class="item ml-4">item</div>

<h3>right</h3>
<div class="item mr-4">item</div>

<h3>x축</h3>
<div class="item ml-4 mr-4">item</div>

<h3>y축</h3>
<div class="item mt-4 mb-4">item</div>

<h3>top 제외</h3>
<div class="item ml-4 mr-4 mb-4">item</div> -->		 m클래스는 전체에 margin 을 1rem 주었다.
즉 상하좌우 1rem만큼 거리가 생긴다.

이런식으로 left, right, bottom, top 다양하게 거리를 줄수있다.

 

<!-- <h1>Q. padding & margin</h1>

<style>
  button {
    /* top/bottom left/right */
    padding: 0.5rem 0.75rem;
  }

  .ml-2 {
    margin-left: 0.5rem;
  }
</style>

<h3>저장하시겠습니까?</h3>

<button>저장</button>
<button class="ml-2">취소</button> -->		 앞서 배운 padding과 margin을 통해서 코드를 짜보았다.

padding: 0.5rem 0.75rem  이런식으로 동시에 두개를 주면

상하단을 0.5rem으로 지정해주고 좌우를 0.75로 지정해준다.

만약 좌우 상하 각각 다르게 길이를 지정해주고 싶다면 

left right bottom top 을 사용해서 길이를 지정해주면 된다.

 

<!-- <h1>width</h1>
<p>엘리먼트의 넓이</p>

<style>
  .item {
    background-color: #ddd;
  }

  .block {
    display: block;
  }

  .inline-block {
    display: inline-block;
  }

  .w-auto {
    width: auto;
  }

  .w-16 {
    width: 4rem;
  }

</style>

<h3>display: block</h3>

<p>width: auto</p>
<div class="item block w-auto">item</div>
<div class="item block w-auto">item</div>
<div class="item block w-auto">item</div>

<p>width: 4rem</p>
<div class="item block w-16">item</div>
<div class="item block w-16">item</div>
<div class="item block w-16">item</div>


<h3>display: inline-block</h3>

<p>width: auto</p>
<div class="item inline-block w-auto">item</div>
<div class="item inline-block w-auto">item</div>
<div class="item inline-block w-auto">item</div>

<p>width: 4rem</p>
<div class="item inline-block w-16">item</div>
<div class="item inline-block w-16">item</div>
<div class="item inline-block w-16">item</div> -->		 block클래스에 적용된 해당 엘리먼트는 블럭요소가되며
가로전체폭을 해당하게된다.

inline-block 클래스에 적용된 해당 엘리먼트는 블럭요소가되며
해당 엘리먼트에 맞게끔 가로폭이 정해지게된다.

w-auto 클래스는 가로 넓이를 자동으로 설정해준다.
기본값으로 부모의가로폭을 최대한활용한다.

대부분 기본값은 가로폭의 최대치 이기때문에 auto로 설정시
가로폭 최대치를 활용하게된다.

즉 정리하자면 w-auto나 w-16 클래스는 각기다른 엘리먼트들의 넓이를 하나로 통일시켜줄수있는 역할을한다.


w-16은 넓이를 4rem으로 통합시켜준다.

 

<!-- <h1>min width</h1>
<p>엘리먼트의 최소 넓이</p>

<style>
  .item {
    background-color: #ddd;
  }
  
  .min-w-600px {
    min-width: 600px;
  }
</style>

<h3>min-width: 600px</h3>

<div class="item min-w-600px">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Possimus illo cum expedita perspiciatis. 
  Autem aut, perspiciatis facilis quo labore alias vel nisi, 
  laborum iusto distinctio eos assumenda ut nulla repellat.
</div> -->


<!-- <h1>max width</h1>
<p>엘리먼트의 최대 넓이</p>

<style>
  .item {
    background-color: #ddd;
  }

  .max-w-600px {
    max-width: 600px;
  }
</style>

<h3>max-width: 600px</h3>

<div class="item max-w-600px">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Possimus illo cum expedita perspiciatis. 
  Autem aut, perspiciatis facilis quo labore alias vel nisi, 
  laborum iusto distinctio eos assumenda ut nulla repellat.
</div> -->		 min-width:600px가 적용된 엘리먼트는 최소넓이가 600px
이기때문에 미만이 되어도 600px보다 작아지지않는다.


max-width:600px가 적용된 엘리먼트는 최대넓이가 600px
이기때문에 초과가 되어도 600px를 넘지못한다.

 

<!-- <h1>height</h1>
<p>엘리먼트의 높이</p>

<style>
  .item {
     background-color: #ddd;
  }
  
  .h-auto {
    /* 컨텐츠에 필요한 만큼 높이를 갖는다 */
    height: auto;
  }

  .h-32 {
    height: 8rem;
  }
</style>

<h3>height: auto</h3>

<div class="item h-auto">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Asperiores consectetur officiis possimus magni, ullam, 
  aspernatur nesciunt voluptatibus ducimus perspiciatis 
  voluptates fugiat quis doloribus consequuntur suscipit eius? 
  Ullam nam corrupti ipsam.
</div>

<h3>height: 8rem</h3>

<div class="item h-32">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Asperiores consectetur officiis possimus magni, ullam, 
  aspernatur nesciunt voluptatibus ducimus perspiciatis 
  voluptates fugiat quis doloribus consequuntur suscipit eius? 
  Ullam nam corrupti ipsam.
</div> -->
height: auto;는 주로 이미지나 동영상과 같은 요소에 사용된다.
이 속성은 요소의 높이를 내용(content)에 맞게 자동으로 조절한다.. 즉, 내용의 크기에 따라 높이가 동적으로 결정한다.
일반적으로 블록 레벨 요소의 경우, 부모 요소의 높이를 최대한 활용하게 된다.




width: auto;는 블록 레벨 요소의 가로폭을 내용(content)에 맞게 자동으로 조절한다.
블록 레벨 요소의 width 속성이 기본값인 auto인 경우, 요소는 부모 요소의 가로폭을 최대한 활용한다. 이는 기본적으로 블록 레벨 요소의 특성 중 하나이다.


즉 정리하자면 height: auto;는 부모의 높이를 따라가지않는다.
반면 width:auto는 부모의 넓이를 따라간다. 

그게 이둘의 차이점이다.

 


<!-- <h1>min height</h1>
<p>엘리먼트의 최소 높이</p>

<style>
  .item {
    background-color: #ddd;
  }
  
  .min-h-50px {
    min-height: 50px;
  }
</style>

<h3>min-height: 50px</h3>

<div class="item min-h-50px">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
</div>

<h3>min-height: 50px</h3>

<div class="item min-h-50px">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Possimus illo cum expedita perspiciatis. 
  Autem aut, perspiciatis facilis quo labore alias vel nisi, 
  laborum iusto distinctio eos assumenda ut nulla repellat.
</div> -->


<!-- <h1>max height</h1>
<p>엘리먼트의 최대 높이</p>

<style>
  .item {
    background-color: #ddd;
  }
  
  .max-h-50px {
    max-height: 50px;
  }
</style>

<h3>max-height: 50px</h3>

<div class="item max-h-50px">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
</div>

<h3>max-height: 50px</h3>

<div class="item max-h-50px">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  Possimus illo cum expedita perspiciatis. 
  Autem aut, perspiciatis facilis quo labore alias vel nisi, 
  laborum iusto distinctio eos assumenda ut nulla repellat.
</div> -->		 min-h-50 클래스는 최소 높이가 50px로 설정하는것이다.

max hight 클래스는 최대 높이가 50px로 설정하는것이다. 

 

<!-- <h1>Q. Display, width & height</h1>

<style>
  #ireland .item {
    width: 50px;
    height: 100px;
    display: inline-block;
  }

  #netherlands .item {
    width: 160px;
    height: 40px;
    display: block;
  }

  .bg-green {
    background-color: green;
  }

  .bg-white {
    background-color: #fff;
  }

  .bg-gold {
    background-color: gold;
  }

  .bg-red {
    background-color: red;
  }

  .bg-blue {
    background-color: blue;
  }
</style>

<h3>Ireland</h3>
<p>colors: green, white, gold</p>

<div id="ireland">
  <div class="item bg-green"></div>
  <div class="item bg-white"></div>
  <div class="item bg-gold"></div>
</div>

<h3>Netherlands</h3>
<p>colors: red, white, blue</p>

<div id="netherlands">
  <div class="item bg-red"></div>
  <div class="item bg-white"></div>
  <div class="item bg-blue"></div>
</div> -->		 앞서 배운것들을 종합해서 만든코드이다.


아일랜드와 네덜란드 국기를 만들어보았다.

만든 방법은 네모박스를 미리 틀을 정한뒤에

필요한 가지각색 색들을 만들어놓았다. 

그후에 국기의 색과 틀에 맞게 사용해주었다.

 

<!-- <h1>box-sizing</h1>
<p>엘리먼트의 크기 조절</p>

<style>
  .item {
    width: 100px;
    height: 100px;
    border: 1px solid;
    padding: 0.5rem;
    background-color: #ddd;
  }

  .content-box {
    /* 
      padding과 border가 주어진 크기 밖으로 적용된다
    */
    box-sizing: content-box;
  }

  .border-box {
    /* 
      padding과 border가 주어진 크기 안으로 적용된다
      사이즈를 조작하는 것이 더 편리하기 때문에 추천되는 방식
    */
    box-sizing: border-box;
  }
</style>

<h3>box sizing: content box</h3>
<div class="item content-box">118 x 118</div>

<h3>box sizing: border box</h3>
<div class="item border-box">100 x 100</div> -->



item옵션에서 넓이와 높이 그리고 테두리와 내부여백과 
그리고 배경색을 지정해주었다.

boxsizing은 엘리먼트의 크기를 계산하는 방식을 지정하는 
속성이다. 두가지의 주요 방법으로 content-box와 border-box
이 두개가있다.

content-box는 기본값으로 콘텐츠의 크기만을 고려한다.
즉 height 와 width만을 포함한크기이다. 
그렇기 때문에 border이나 padding 등 값을 설정시 추가로 더해준다.

콘텐츠의 크기에 padding 과 border가 추가로 적용된다.
즉 엘리먼트의 실제 크기는 padding과 broder의 크기가 
더해진 것이 된다.

세로길이를 구해보면
100px(height) + 2px(border) + 16px(padding 세로 가로 두개)

가로길이를 구해보면
100px(height) + 2px(border) + 16px(padding 세로 가로 두개)

이렇해서 118 x 118 이 되는것이다.


다음으로는 boxsizing: border-box 를 보자
border-box는 padding과 border 등 값이 전부 포함된것이
height또는 widht값에 포함된다. 
그렇기 때문에 크기가 content-box보다 작을수밖에 없다.

 

 

 

<h1>overflow</h1>
<p>넘치는 컨텐츠 처리 방법</p>

<style>
  .container {
    border: 1px solid;
    width: 200px;
    height: 100px;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-auto {
    /* 
      overflow(넘침)가 발생했을 때
      스크롤을 생성한다
    */
    overflow: auto;
  }

  .overflow-visible {
    /* 보이는 상태 그대로 둔다 */
   <h1>overflow</h1>
<p>넘치는 컨텐츠 처리 방법</p>

<style>
  .container {
    border: 1px solid;
    width: 200px;
    height: 100px;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-auto {
    /* 
      overflow(넘침)가 발생했을 때
      스크롤을 생성한다
    */
    overflow: auto;
  }

  .overflow-visible {
    /* 보이는 상태 그대로 둔다 */
    overflow: visible;
  }
</style>

<h3>overflow: hidden</h3>
<div class="container overflow-hidden">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
  Hic maxime soluta provident nihil dolore accusamus, vitae adipisci, 
  et repudiandae, eum aliquid inventore ratione blanditiis harum officia animi corrupti eligendi facere.
</div>

<h3>overflow: auto</h3>
<div class="container overflow-auto">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
  Hic maxime soluta provident nihil dolore accusamus, vitae adipisci, 
  et repudiandae, eum aliquid inventore ratione blanditiis harum officia animi corrupti eligendi facere.
</div>

<h3>overflow: visible</h3>
<div class="container overflow-visible">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
  Hic maxime soluta provident nihil dolore accusamus, vitae adipisci, 
  et repudiandae, eum aliquid inventore ratione blanditiis harum officia animi corrupti eligendi facere.
</div>  		 overflow은 컨텐츠가 border의 범위를 넘어갈때 어떻게 처리
하는지를 설정하는 속성이다.

3가지 옵션이있다.

hidden

auto

visible


hidden은 말 그대로 넘친 컨텐츠를 가려버린다.

auto는 컨텐츠가 넘칠시 스크롤을 생성한다.

visible은 컨텐츠가 넘치면 hidden과는 반대로 컨텐츠들을 노출시킨다. 

 

 

 

 

 

'(혼) (공) (web)' 카테고리의 다른 글

CSS 복습(6일차)  (0) 2024.02.19
CSS 복습(5일차)  (1) 2024.02.16
CSS 복습(3일)  (0) 2024.02.15
HTML 복습(2일)  (0) 2024.02.14
HTML 복습(1일차)  (1) 2024.02.12

관련글

티스토리툴바