이미지를 div로 묶는 부분 관련해서 질문 드립니다!
451
작성한 질문수 6
안녕하세요 선생님~~!!
html 구조 작성 중 궁금한 것이 있어 질문드립니다.
html 이미지 작성 부분? 에서 이렇게 이미지를 하나하나 div로 묶어주셨는데요,
혹시 이런 식으로
하나의 div 안에 이미지를 모두 넣고, 이미지 자체에 클래스를 넣어서 사용하는 것과는 어떤 차이가 있을까요??
후자는 형제 선택자 사용의 문제도 있지만,
전자의 html이 후자의 html 더 사용하기 편하고 깔끔하기 때문에 이미지를 하나하나 div로 묶어 주신 건가요??
전자와 후자의 차이가 궁금합니다!!!
답변 1
1
🥝이미지만 배치하는 경우
일단 비추하는 방식이구요...
이미지의 크기가 변경되는 경우 이미지의 크기를 직접 조정해줘야 합니다.
이미지는 인라인블록이라 우측과 아래에 5픽셀 정도의 마진이 있습니다.
나중에 이런 마진을 잡아줘야 하는 경우가 생깁니다.
이런 마진을 잡아주기 위해 img를 block으로 바꾸어 주면 됩니다.
하지만 block으로 변하면서 줄이 바뀌는 경우가 생깁니다.
🥝이미지를 div에 묶어서 배치하는 경우
위에서 설명한 크기 부분의 조정이 필요한 경우 div를 조정하면 됩니다.
이미지는 인라인블록이라 우측과 아래에 5픽셀 정도의 마진도 display: block으로 깔끔하게 해결할 수 있습니다.
결론, 상황에 따라 간편하게 이미지만 배치하는 경우도 있겠지만 일반적으로는 이미지를 div에 묶어서 배치하는 경우가 나중에 관리가 편하실거에요.
class 값 한 번에 부여하는법
2
95
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
79
1
div#css-checker-widget의 해결방
1
71
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
94
2
강의듣는법
1
86
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
75
2
input checked 질문합니다.
0
81
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
152
2
Part 1 영상 안나옵니다
1
97
1
제이쿼리 작동이 안됩니다
1
211
3
강의 내용 질문있습니다.
1
128
2
일정 부분만 주석하는 방법
1
222
2
폰트어썸
1
144
2
인접선택자에 대한 질문드립니다!
1
135
2
delay 적용 안됨
1
137
1
rotateY(360deg)가 적용이 안됩니다!
1
190
2
세로이동할때 height값
1
142
2
폰트어썸이 안되요..
1
504
2
화면 정중앙에 오게끔 할수있나요?
1
175
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
241
2
넷플릭스 어코디언 예제 질문
1
107
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
163
1
active 관련 질문
1
149
2