[CSS] Overflow-x and y

안녕하세요! 동기 여러분! 오늘은 Overflow-x와 Overflow-y에 대해 알아보도록 합시다!

 

Overflow-x and y

우리 학교 다닐 때 x는 보통 가로 변을 표현하고 y는 세로 변을 표현했었는데 여기서도 같습니다.

 

overflow-x는 내용이 박스보다 가로로 넘쳐날 때 사용하는 프로퍼티이고

 

overflow-y는 내용이 박스보다 세로로 넘쳐날 때 사용하는 프로퍼티입니다.

 

---

Overflow-x 예시

    <p>
      SHOWMETHEMONEYOPERATIONCWALPOWEROVERWHELMING
    </p>

 

- 값이 visible일 경우

p {
  border: medium dotted rgb(234, 0, 255);
  width: 200px;
  overflow-x: visible;
}

 

- 값이 hidden일 경우

p {
  border: medium dotted rgb(234, 0, 255);
  width: 200px;
  overflow-x: hidden;
}

 

- 값이 scroll일 경우

p {
  border: medium dotted rgb(234, 0, 255);
  width: 200px;
  overflow-x: scroll;
}

 

- 값이 auto일 경우

p {
  border: medium dotted rgb(234, 0, 255);
  width: 200px;
  overflow-x: auto;
}

 

---

 

Overflow-x와 y를 같이 쓰면 가로 세로 따로 설정이 가능하다.

    <p>
      SHOWMETHEMONEYOPERATIONCWALPOWEROVERWHELMING<br>
      showmethemoneyoperationcwalpoweroverwhelming<br>
      SHOWMETHEMONEYOPERATIONCWALPOWEROVERWHELMING<br>
      showmethemoneyoperationcwalpoweroverwhelming
    </p>

p {
  border: medium dotted rgb(234, 0, 255);
  width: 200px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: auto;
}

• overflow-x: hidden; 가로로 넘쳐나는 내용은 숨겨라!
• overflow-y: auto; 세로로 넘쳐나는 내용은 필요하면 스크롤을 만들어서 담아라!

이렇게 가로는 잘리고 세로는 스크롤로 만들 수 있다.

 

---

 

오늘의 느낌

한국은 오늘이 2021년의 마지막날이죠? 다들 새해 복 많이 받으시고 건강하시길 바랍니다.