지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Class의 사용법을
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (Class에 대해서) - 2편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Class를 왜 사용해야 하는지 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세
tm-csc.tistory.com
이번 글에서는
inline block에 대해
조금 더 자세히
알려드리도록 할게요.
그럼 우선
VSC을 실행해주세요.
그다음 이렇게
div 박스를
3개 만들어주고 나서
width: 30px;
height: 30px;
background-color: coral;
너비와 높이 모두
30px로 설정하고
색상은 코랄색으로
설정하겠습니다.
그다음 확인해보면
이렇게 세 개의 박스가
마치 하나인 것처럼
세로로 연결되어 있는 것처럼
보이게 될 텐데요.
전에도 말씀드렸지만
div는 기본적으로
block입니다.
그래서 이 속성을
변경해주겠습니다.
바로 이렇게
display: inline-block;
적어주시면 되는데요.
저장하고 크롬에서
확인해보면
이렇게 세 개의
박스가 분리되고
가로로 나열된 것을
확인할 수 있죠.
또한 단순히
inline이 아니기에
너비와 높이도
마진도 가질 수 있죠.
(span과 같은 inline은
너비와 높이를
가질 수 없는 것을
기억하세요.)
하지만 여러 가지
불편한 문제들이
있는데요.
이렇게 div의 개수도
늘리고 너비와 높이도
크게 200px로 늘리고 나서
크롬으로 확인해보면
이렇게 내가 지정해준 적도
없는 박스와 박스 사이의
공간이 박스 3개 있을 때보다
줄어든 것을 확인할 수 있죠.
맨 처음과 끝의 공간의
크기도 내 마음대로
조절하기 힘들죠.
그렇다면 magin-right값을
변경하여 조금씩 오른쪽으로
밀다보면 원하는 만큼 박스를
한 줄에 채울 수 있지 않을까?
생각하실 수도 있겠죠
하지만 같이 개발하는 사람의
모니터가 다르고 화면이
작아짐에 따라 위의 사진처럼
변할 수도 있습니다.
즉 내가 원하는 한 줄에
8개의 박스가 들어있는
화면이 어느 모니터에서든
보게 하려면 다른 코드가
필요하겠죠.
왜냐하면 inline-block는
반응형 디자인을 지원하지
않기 때문이죠.
반응형 디자인이란
모니터의 크기에 따라
또는 창의 크기에 따라
같은 화면을 보여주도록
또는 다른 화면으로
전환되도록 하는 디자인입니다.
그래서 다음 글에서는
이 문제점을 해결할 수 있는
코드에 대해 알려드리겠습니다.
이번 글에서는
inline-block을 하면
어떠한 결과가 생기고
문제점은 어떤 것이었는지만
기억하시면 될 것 같네요
여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
