지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는 브라우저는
CSS 코드를 순서대로
읽는다는 사실을
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초(CSS는 순서대로 읽는다)
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 CSS 코드 작성방법에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요.
tm-csc.tistory.com
이번 글에서는 Box에 대해
알려드리도록 하겠습니다.
바로 예시로 설명드리면
네이버의 한 예시를
가져와서 보여드리는 건데요.
어떤 웹사이트이든지
그걸 이루는 모든 요소 들은
바로 box 이기 때문이죠.
이렇게 사진이 나와있고
옆에 글들이 쓰여 있는데요.
위의 사진은 큰 박스 안에
중간 박스가 세 개 세로로
나열되어 있고
중간 박스 안에는 사진 박스와
글 박스로 구분되어 있는 것이죠.
이해가 안 가신다고요.
그럼 VSC를 실행해보겠습니다.
일단 body부분을
이렇게 깨끗하게
남겨주시고 시작하겠습니다.
그리고 5개의 박스를
만들어주겠습니다.
바로 div라는
태그로 말이죠.
그다음에 높이는 100px
너비는 150px
색상은 초록색으로 할게요.
바로 이렇게요.
물론 스타일. css파일에
적어도 되지만
보시기 편하시라고
HTML 문서에 적었는데요.
당연히 css 파일에
적어도 정상 작동합니다.
바로 설명 들어가면
div {
height: 100px;
width: 150px;
background-color: green;
}
div라는 박스의
높이는 100px로
너비는 150px로
안쪽의 색상은
초록색이야
당연히 항상 실행을 위해서는
; 새미 콜론 잊지 마시고
저장 후 크롬으로 확인해보면
초록색이 길게 이어진
이런 꼴로 나오게 되죠.
다섯 개의 div 모두
같은 높이, 같은 너비
같은 색상으로 변경되었고
모든 박스가 붙어있기 때문에
이어져있는 것처럼 보이는 거죠.
마우스 오른쪽 버튼을 눌러
검사를 해보면
이렇게 한 개의 크기를
볼 수 있고 다섯 개의
박스가 이어졌다는 것을
알 수 있죠.
그럼 이제 span이라는
박스를 만들어보죠.
이렇게 span 박스를
세 개 만들고
높이와 너비와 색상도
설정하고 실행해볼게요.
그런데 span은
div와 달리 세로가 아닌
가로로 나열되어있고
붙어있지도 않고
떨어져 있는 것을
확인할 수 있죠.
div는 옆으로 아무것도
오지 못하는 것과
정말 다른데요.
사실 span이나 link 등은
박스가 아니기 때문이죠.
하지만 img나 p와 같은
태그들은 옆에 아무것도
올 수 없는 것들은 박스인 거죠.
이렇게 다른 요소들이
올 수 없는 것들은
block 블록이라고 부르며
다른 요소가 올 수 있는 것은
inline이라고 합니다.
이번 글에서는 block과
inline이 어떤 식으로
배열되는지만 이해하고
계신다면 충분합니다.
그리고 만약 어떤 태그가
블록이고 인라인인지
궁금하시다면 하나씩
적용해보면서 확인하는 게
실력 향상에 도움될 것입니다.
그럼 여기까지 궁금한 점은
댓글로 남겨주시고
공감과 구독도 부탁드립니다.
