[CSS] Height and Width

안녕하세요 동기 여러분! 지난 시간에 이어서 이제 height와 width를 적용하는 방법과 어찌 생겼는지 알아봅시다.

 

Height and Width

height와 width를 지정하지 않고 어떠한 content를 실행한다면 날것의 content에 HTML 박스가 height와 width가 조정되어 나타납니다.

 

하지만 높이와 폭을 지정해주고 싶다면 아래의 방법으로 가능합니다.

p {
  height: 70px;              /* em, rem으로도 가능 */
  width: 350px;
}

 

px로 높이와 폭을 딱 정했을 때의 문제는 어떤 디바이스에서든 딱 정해진 높이와 폭으로 밖에 보이지 않습니다. (부트스트랩을 쓴다면 다름)

 

---

 

예시

<!-- HTML 코드 -->
<p id='hWsize1'>엊그제 고스트 페퍼가 들어간 알리올리 소스를 팔길래 한번 사보았다.</p>
<p id='hWsize2'>한 뭉태기를 빵에 발라 시험 삼아 먹어봤는데...</p>
<p id='hWsize3'>와 와아아아 불닭소스 보다 매웠다 ㅠ ㅠ</p>

/* CSS 코드 */
#hWsize1 {
  height: 60px;
  width: 200px;
  background-color: coral;
}

#hWsize2 {
  height: 100px;
  width: 240px;
  background-color: cornflowerblue;
}

#hWsize3 {
  height: 50px;
  width: 280px;
  background-color: crimson;
}

height와 width의 크기 구분을 위해 배경색을 입혔습니다.

 

순서 대로 hWsize1, hWsize2, hWsize3

 

 

height와 width를 지정하지 않았을 때

 

 

---

 

오늘의 느낌

캐나다에 와서 매운 소스는 많이 도전해보는데 불닭 소스만큼 매운 소스가 없었다. 하지만 이번에 산 고스트 페퍼 알리올리 소스는 정말 정말 정말 매웠다...