HTML/CSS 핵심 개념Display<img> 태그의 비밀

Q

img 를 display 속성을 block으로 변경했을 때

조회 10927

좋아요 10

2019년 5월 23일




A
2개의 답변이 있어요
커뮤니티 파트너 채택



2019년 5월 24일

댓글 4

2019년 5월 25일
div 태그 안에 묶어서 text-align적용시키는것은 알고있습니다. 하지만 저의 질문은 img자체의 속성을 h1와 같은 속성으로 변경시킬 수 없는 가에 관한 것입니다. 댓글을 보고 제가 이미지의 가로길이를 300으로 지정해주어서 그런가 싶어서 다른 작은 크기의 이미지를 원본 그대로 크기설정 없이 가져와봤지만 개발자 도구를 통해 살펴본바로는 img다음에 글자들이 다음줄로 넘어가기는 하지만 h1태그와 같이 그 요소가 가운데 정렬이 되지는 않더라구요
2019년 5월 25일
img태그를 h1태그와 동일한 속성(block)으로 변경하여 text-align을 적용시켜보려는 제 시도는 불가능한 것인가요?
2019년 5월 25일
위 코드 상으로는 h1 태그와 img태그가 모두 body에 바로 작성되어 있는데 같은 부모태그를 갖고 있는거 아닌가요?
2019년 5월 25일
같은 부모 태그 갖고 있는 것과 정렬은 상관 없습니다. body 태그에 text-align: center 가 걸려있고 img 태그가 inline 속성을 지니고 있다면 달라지겠지만요



2019년 5월 25일

댓글 4

2019년 5월 25일
h 태그 안에 있는 텍스트 자체가 inline 요소이고 텍스트를 감싸고 있는 h 태그가 block 속성이니 정렬이 되는 것입니다. 하지만 img 태그는 태그 그 자체가 컨텐츠를 포함하고 있으니 다른 경우일 것 같습니다.
2019년 5월 27일
답변 감사합니다!
2019년 6월 9일
img 태그는 width와 height가 주어지는 inline-block 요소입니다. 따라서 블록요소로 변환을 해도 width때문에 가운데 정렬이 안되는 겁니다. 이 차이점에 대해선 서명원님이 올린 다른 질문에 답글을 남겼으니 참고해보세요. 참고1 참고2
2022년 1월 1일
오 여기서 드디어 완전히 이해했네요! 감사합니다~!

(주) 코드잇

대표강영훈

개인정보보호책임자강영훈

이메일support@codeit.kr

사업자 번호313-86-00797

통신판매업제 2019-서울중구-1034 호

주소서울특별시 중구 청계천로 100 시그니쳐타워 동관 10층 코드잇