본문 바로가기

HTML, CSS/CSS

[CSS] 너비, 높이

위키 백과에서 글을 복사해서 간단한 페이지를 만들었다. 이 페이지는 페이지 크기가 변할 때마다 글자 위치가 변하고 이미지 크기가 변하지 않아서 보기에 별로다. 이를 해결하기 위한 태그가 width와 height이다.

width: 픽셀 height: 픽셀는 폭과 높이를 정해주는 태그이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <div style="width:400px">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Wikipedia-logo-v2-ko.svg/300px-Wikipedia-logo-v2-ko.svg.png", style="width:100px;height: 300px;">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/AA11_path.svg/450px-AA11_path.svg.png", style="width:100%">
    아메리칸 항공 11편 테러 사건(영어: American Airlines Flight 11 Terror Incident, AA11)은 2001년 9월 11일 알카에다 소속 테러리스트 5명이 미국 국내선 항공편 '아메리칸 항공 11편'을 납치하여 9·11 테러를 일으킨 사건이다.[2] 이 테러의 주도범인 모하메드 아타는 항공기를 뉴욕 세계 무역 센터 북쪽 타워에 충돌시켰다. 그로 인해 탑승객 92명과 충돌 지점에 있던 사람 다수가 사망했다.[3] 이 항공기는 아메리칸 항공 소속 보잉 767-223ER 기종으로, 원래 미국 매사추세츠주 보스턴 로건 국제공항에서 이륙하여 캘리포니아주 로스앤젤레스 국제공항에 착륙할 예정이었던 아침 미국 대륙 횡단 항공편이었다.[4]

    이륙 15분 후, 테러범은 적어도 3명을 부상 입히고, 그중 1명 이상은 사망시켜 조종석으로 침입해 기장과 부기장을 제압했다.[5][6][7] 이후 알카에다 멤버이자 상업 조종사 자격증을 가진 모하메드 아타가 항공기를 조종했다. 관제소에서는 승무원이 더 이상 응답하지 않자 비행기에 무슨 일이 발생했다는 것을 알았다. 모하메드 아타가 기내에 전달한 말을 실수로 관제소에 보내 지상에서 비행기가 납치당했음을 인지했다.[8] 기내에서는 항공 승무원 매들린 에이미 스위니와 베티 옹이 아메리칸 항공에 연락을 시도했고, 비행기 납치범에 대한 정보와 승객과 승무원이 부상을 입었음을 알렸다.[9]

    이 항공기는 EST 오전 8시 46분 40초에 세계 무역 센터의 북쪽 타워에 충돌했다.[10] 뉴욕 길거리의 수많은 사람이 충돌 순간을 목격했으나, 정작 비디오로 녹화된 장면은 거의 없다. 다큐멘터리 영화 제작자인 줄르 노데가 충돌 장면을 처음부터 끝까지 찍은 유일한 사람이다.[11][12] 비행기 납치가 확인되기 전까지 뉴스 미디어에서는 충돌 사고가 발생한 것으로 추측하고 속보를 내보냈다. 충돌로 인해 발생한 화재로 충돌 102분 후 북쪽 타워가 붕괴했고, 이로 인해 수백 명이 사망했다. 세계 무역 센터 붕괴 이후 부지 청소 및 복구 작업 중 작업자들이 11편의 사망자에서 나온 물품을 확인했으나 대부분의 신체 조각은 분별할 수 없었다.[13]
  </div>
</body>
</html>
Document
아메리칸 항공 11편 테러 사건(영어: American Airlines Flight 11 Terror Incident, AA11)은 2001년 9월 11일 알카에다 소속 테러리스트 5명이 미국 국내선 항공편 '아메리칸 항공 11편'을 납치하여 9·11 테러를 일으킨 사건이다.[2] 이 테러의 주도범인 모하메드 아타는 항공기를 뉴욕 세계 무역 센터 북쪽 타워에 충돌시켰다. 그로 인해 탑승객 92명과 충돌 지점에 있던 사람 다수가 사망했다.[3] 이 항공기는 아메리칸 항공 소속 보잉 767-223ER 기종으로, 원래 미국 매사추세츠주 보스턴 로건 국제공항에서 이륙하여 캘리포니아주 로스앤젤레스 국제공항에 착륙할 예정이었던 아침 미국 대륙 횡단 항공편이었다.[4] 이륙 15분 후, 테러범은 적어도 3명을 부상 입히고, 그중 1명 이상은 사망시켜 조종석으로 침입해 기장과 부기장을 제압했다.[5][6][7] 이후 알카에다 멤버이자 상업 조종사 자격증을 가진 모하메드 아타가 항공기를 조종했다. 관제소에서는 승무원이 더 이상 응답하지 않자 비행기에 무슨 일이 발생했다는 것을 알았다. 모하메드 아타가 기내에 전달한 말을 실수로 관제소에 보내 지상에서 비행기가 납치당했음을 인지했다.[8] 기내에서는 항공 승무원 매들린 에이미 스위니와 베티 옹이 아메리칸 항공에 연락을 시도했고, 비행기 납치범에 대한 정보와 승객과 승무원이 부상을 입었음을 알렸다.[9] 이 항공기는 EST 오전 8시 46분 40초에 세계 무역 센터의 북쪽 타워에 충돌했다.[10] 뉴욕 길거리의 수많은 사람이 충돌 순간을 목격했으나, 정작 비디오로 녹화된 장면은 거의 없다. 다큐멘터리 영화 제작자인 줄르 노데가 충돌 장면을 처음부터 끝까지 찍은 유일한 사람이다.[11][12] 비행기 납치가 확인되기 전까지 뉴스 미디어에서는 충돌 사고가 발생한 것으로 추측하고 속보를 내보냈다. 충돌로 인해 발생한 화재로 충돌 102분 후 북쪽 타워가 붕괴했고, 이로 인해 수백 명이 사망했다. 세계 무역 센터 붕괴 이후 부지 청소 및 복구 작업 중 작업자들이 11편의 사망자에서 나온 물품을 확인했으나 대부분의 신체 조각은 분별할 수 없었다.[13]

 

 

결과값을 보면 내용이 페이지와 상관없이 일정 너비를 지님을 알 수 있다.

 width:100%는 현재 너비에 맞게 이미지의 크기를 조정한다는 뜻이다.

width와 height를 사용해 크기를 고정시킬 수도 있지만 width:100%등을 이용해 너비에 맞춰 크기를 조정할 수도 있음을 알 수 있다.

'HTML, CSS > CSS' 카테고리의 다른 글

[CSS] CSS 규칙, id, class  (0) 2023.08.26
[CSS] 여백  (0) 2023.08.26
[CSS] 정렬  (0) 2023.08.26
[CSS] 글자 크기, 굵기, 줄 높이  (0) 2023.08.26
[CSS] 글꼴  (0) 2023.08.26