CSS3 - CSS 스타일 - 레이아웃의 기초 (22)

CSS3 - CSS 스타일 - 레이아웃의 기초 (22)

오늘은 CSS3의 스물 두번째 내용으로 레이아웃의 관련된 내용에

 대해서 알아보도록 하겠습니다.

솔직히 지금까지 이전 포스팅에서는 css를 이용해 html 태그(요소)에 색상, 폰트, 크기 등등 기본적인 간단한 내용에 대해서 다루었는데 이

 다음 포스팅 부터는 css에서 가장 중요한 부분인 홈페이지의 레이아웃을 만들 수 있는 

속성에 관련되

어 본격적으로 포스팅 할 계획입니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 레이아웃이란?

먼저 css에서 레이아웃이란 html 태그(요소)의 위치 크기와 박스모델로 이루어 지는데

이는 아래와 같습니다.

1. 레이아웃의 위치 크기 개념

웹 페이지 위에서 html 태그(요소)의 레이아웃을 설정하는 부분인데

이러한 웹페이지의 레이아웃은 집에서 가구나 사물들을 어떻게 배치할 것인가와 참 비슷합니다,

 (즉 html태그 요소를 css로 어느곳에 배치를 하는가에 대한 이야기 입니다) 

2. 박스모델

이 전 포스팅중 박스모델에 대하여 글을 올린적이 있는데 이 박스모델이란 

다시 이야기하면 웹 브라우저가 각 html태그(요소)를 화면에 출력했을때 

무조건 사각형으로 간주하여 출력한다는 이야기 입니다.

이러한 사각형에는 패딩과, 경계선, 마진 등이 붙어 있으며 이러한 요소를 배치할때

도 브라우저에서는 태그 요소를 사각형으로 간주 합니다.

잘이해가 되지 않으신 분들은 아래 이미지를 참고 하시면 조금은 도움이 될 것 같네요.

위 이미지는 사파리 브라우저에서 개발자 도구를 통해 네이버 홈페이지를 만들고 있는 

요소들을 스타일 편집기에서 전체 선택한 뒤 경계선을 검정색으로 표시해 보았습니다.

위 이미지를 보신 분들중 눈치가 좀 있으신 분들은 금방 이해가 될 것 같네요.

즉 레이아웃이란 각각의 html 태그(요소)들이 박스형태로 화면에 표시가 되면 

css의 스타일을 이용해 태그(요소)들을 적절하게 배치시키면서 홈페이지의 뼈대를 

제작 한다는 이야기 입니다.  

여기까지 레이아웃의 기초에 대해서 알아 보았습니다.

이 다음 포스팅 부터는 레이아웃의 만드는데 관련된 속성에 대해서 

하나하나 알아 보도록 하겠습니다.

추가로 이 다음 포스팅 부터는 박스모델이나 블록요소, 인라인 요소에 대해서

어느정도는 알고 있어야 하니 이 부분은 아래 링크를 참고 하시면 좋을 듯 싶습니다.

박스모델 관련 포스팅

http://yangbari.tistory.com/45

블록태그(요소) & 인라인태그(요소) 포스팅

1. http://yangbari.tistory.com/27 (html 에서의 인라인 블록 내용 참고)

2. http://yangbari.tistory.com/49 (css 에서의 인라인 블록 내용 참고)

이상 CSS3 - CSS 스타일 - 레이아웃의 기초 (22)에

관련된 포스팅을 마치도록 하겠습니다.