지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는 브라우저는
box에 대해 알려드리면서
block과 inline에 대해
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (box 개념 block 과 inline)
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 CSS 코드를 순서대로 읽는다는 사실을 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은
tm-csc.tistory.com
이번 글에서는
block에 대한
중요한 특징에 대해서
알려드리도록 하겠습니다.
그럼 VSC를 실행시켜주세요.
먼저 div와
span을 하나씩
만들고 나서 크롬으로
확인해보겠습니다.
이렇게 block 옆에는
아무것도 오지 못하고
span이 밑에 있는 것을
확인할 수 있죠.
하지만 저번 글에서
확인했듯이 span옆에는
또 다른 span이 올 수
있다는 것을 알 수 있죠.
그렇다면 div라는
block은 옆으로
나열할 수 없을까요?
결론부터 말씀드리면
가능합니다.
먼저 스판부터 두 개를
만들고 block으로
만들어 보겠습니다.
위의 사진 속 내용처럼
span {
display: block;
로 변경해 주었죠.
그리고 크롬으로 확인하면
이렇게 붙어있던 span이
div처럼 block형태로
변경된 것을 확인할 수 있습니다.
하지만 없었던 높이와
너비가 생긴것 같은데요.
그럼 div와 같은
block은 어떻게 할까요?
눈치가 빠르신 분들은
아시겠지만
display를 inline으로
적으면 되겠죠?
그럼 확인해볼까요?
엥? 있어야 할 초록색
상자가 없어졌습니다.
이유는 바로 inline으로
적게 되면 그 해당 요소는
높이와 너비를 가질 수
없기 때문이죠.
즉 inline은 박스가 아니며
박스의 특징을 가지고
있지 않습니다.
그래서 이번 글에서는
다른 걸 몰라도 이거 하나는
외워야 하는 개념
block 박스의 특징에 대해
알려드리겠습니다.
그건 바로
마진, 패딩 보더입니다.
우선 뒷배경을 모두
검은색으로 바꾸고
div라는 박스 하나만
남겨보겠습니다.
그러면 초록색 박스 뒤로
검은색 배경이 보이게 되는데요.
div는 브라우저 창 바로 옆에
붙어있지 않고 조금은
떨어져 있는 것을 확인
할 수 있습니다.
즉 우리가 알아야 하는 건
콘텐츠 위로 패딩이
또 테두리인 보더가 있으며
밖으로는 마진이 있다는
사실을 알아야 합니다.
마진은 박스의 경계(보더)의
바깥에 있는 공간을 말합니다.
즉 마진의 값을 변경할수록
box의 위치를 변경할 수도
있지 않을까요?
이거에 대해서는 다음 글에
이어서 알려드리도록
하겠습니다.
이번 글에서 기억하셔야 하는 건
마진 보더 패딩 이 세 가지는
꼭 기억하시고 순서도
기억하셔야 합니다.
정말 중요한 거이니까요.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드리겠습니다.
