09. opacity _ 투명도 조절

너비와 높이를 지정해주는 요소입니다.

말그대로 width값은 너비, height값은 높이를 지정하구요,
px로 나타내거나 %로 지정할 수 있습니다.

<div class="box_big"></div>
<div class="box_small"></div>
 

CSS

<style>
   div.box_big {width:200px;height:200px;background:tomato;}
   div.box_small {width:20px;height:20px;background:skyblue;}
</style>
 

max-width / max-height / min-width / min-height

이름에서 어차피 다 드러나지만 설명하자면 너비 최대값, 높이 최대값, 너비 최소값, 높이 최소값 입니다.
어떨때 쓰일까요? 우리들의 모니터는 쥐콩만한 것부터 엄청 넓은 것까지 다양합니다.
브라우저가 항상 풀사이즈가 아닐 수도 있구요. 모바일환경 같이 쬐깐한 기기도 있습니다.
이런 경우 어떠한 크기가 되건 난 요 싸이즈까진 맞춰줄꺼다, 확고하다 하고 지정해 주는 겁니다.
아래의 예제를 작성후 ctrl + F11을 눌러 결과를 확인할때 브라우저 창을 점점 더 작게 줄여 봅시다.
그러면 그냥 width값을 지정했을 경우와 max-width의 차이점을 한눈에 알 수 있을꺼에요.

<div class="max_width">저는 max-width값을 적용했어요</div><br>
<div class="normal_width">난 그냥 width값을 줬지</div>
 

CSS

<style>
  div.max_width {max-width:700px;height:50px;border:2px solid springgreen;}
  div.normal_width {width:700px;height:50px;border:2px solid coral;}
</style>
 

저는 max-width값을 적용했어요

난 그냥 width값을 줬지

* 개인적인 공부를 정리하는 블로그입니다.