7.웹프로그래밍, CSS, 박스모델에 대해서 궁금하시면 클릭 한번 해보세요^^!

블로그 목적

CSS3 박스모델에 대해서 공부및 정리하여 공유한다.

박스모델을 알아보기 전에 CSS3 에 대해서 정리는 하고 갈께요.

CSS3에 대해서 알아볼께요.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

직독직해 해보면, CSS는 언어이다 / 구조화된 문서의 표현의 설명을 위한 / (구조화된 문서를 예를들면 HTML, XML 같은) / 화면에 / 종이에 / 기타등등

다시 정리해서 / 제가 이해한 관점으로 잘 정제해서 말씀드리면,

CSS 는 HTML/XML 같은 구조화된 문서에 대해서 시각적으로 아름답게(?) 꾸며주고 표현해주는 언어이다라고 설명할 수 있을 것 같네요..^^;

즉, HTML 은 뼈대라고 한다면 CSS 는 그 뼈 대를 좀더 예쁘게 화장(?) 하는 언어? 정도..

CSS3 은 W3C 에서 한창 개발 중인 규격.

W3C 홈페이지를 보면 CSS3 규격 중에서 완료된것도 있고, 또 새롭게 토의 중인 규격도 있음.

CSS3 의 기능은 이미 대부분의 브라우저에서 구현되고 있음.

참고페이지

https://www.w3.org/TR/CSS/

현재(2020/02/15)

CSS Snapshot 2018 / W3C Working Group Note, 22 January 2019

 

CSS 모듈에 대해서 알아볼께요.

주요 모듈은 아래와 같습니다.

선택자(selectors)

박스모델(box model)

배경 및 경계선(backgrounds and borders)

텍스트 효과(text effects)

2차원 및 3차원 변환(2D/3D transformations)

애니메이션(animations)

다중 컬럼 레이아웃(multiple column layout)

사용자 인터페이스(user interface)

기타등등

 

그럼,오늘 알아볼 박스 모델이란 무엇일까요?

웹 브라우저는 HTML 요소를 사각형으로 간주하고 웹 페이지 위에 그리게 된다고 합니다.

요소를 배치 할 때도 사각형으로 간주되고요.

즉, 박스모델은 이런식으로 요소를 박스(사각형) 형태로 그리는 것을 말합니다.

다시말해서, CSS 는 각 박스의 특징(배치, 색상, 경계등)을 결정하게 됩니다.

예시

CSS 박스 모델은 기본적으로 HTML 요소를 감싸는 가상적인 박스를 생각하는 것.

웨브라우저는 각 요소를 박스(box) 로 간주하고 화면에 배치하게됨.

각, 박스는 마진/경계/패딩을 가짐.

즉, 박스모델에 대해서 정확히 이해하고 있어야함.

왜냐하면, 그래야 깔끔한 디자인이 가능해지기 때문에...

개발자모드(F12버튼을 누름) 에서 아래 사항을 확인해 볼 수 있음

콘텐츠(content)

박스의 내용물

텍스트와 이미지가 나타나는 부분

패딩(padding)

콘텐츠 주위의 영역, 패딩은 투명함

경계(border)

패딩과 내용물을 감싸는 경계

경계는 박스의 경계색에 의하여 영향을 받음.

마진(margin)

경계 주위의 영역

마진은 투명함.

CSS를 사용하면, 각 HTML 요소의 패팅 / 경계/ 마진속성을 설정할 수 있게됨.

즉, 설정값에 따라서 HTML 요소의 모습은 같은 HTML 이라도 많이 달라지게됨.

참고) The CSS Box Model Hierarchy 그림

결론

CSS 는 HTML/XML 같은 구조화된 문서에 대해서 시각적으로 아름답게(?) 꾸며주고 표현해주는 언어임.

웹 브라우저는 HTML 요소를 사각형으로 간주하고 웹 페이지 위에 그리게 됨.

오늘도 CSS 관련 박스모델에 대한 마술(?) 한가지 획득완료, 감사합니다. ^^

---

오늘의 명언 한마디

기회는 당신 주변에 자주 들르므로, 당신은 그것을 낚아채야한다.

기회는 마음대로 왔다가 사라진다.

모두 같은 것을 하고 있다면, 볼 것도 없이 그것은 실패한다.

엠제이 드마코지음, "부의 추월차선" 중에서

---

오늘의 영어 한마디

When the new boss arrived, things just went from bad to worse.

새로운 매니저가 왔을때 / 상황이 변했다 / 나쁜 상황에서 더 악화된 상태로

해설

"from" 은 상황이 악화되기 시작하는 시점을 표시하고 있음.