출처 : http://blog.daum.net/jty71/15645336

 


CSS에는 Margin, Padding, Border, Position, Width, Height, Left, Top 같은 속성이 서로 영향을 주게 되어 있다. 레이아웃을 만들 때 이 관계를 모르면 시행착오를 하게 된다. 이 속성의 의미는 다음과 같다.

  • Background = 사각형 영역을 확인하기 위해서 색을 준다.
  • Border = 경계선
  • Width = 내용물 영역의 폭
  • Height = 내용물 영역의 높이
  • Margin = 경계선과 외부와의 간격
  • Padding = 내용물과 경계선 사이의 간격
  • Position = 위치를 결정하는 기준
  • Left = 사각형 좌측 수평 좌표
  • Top = 사각형 상측 수직 좌표






위의 내용에선 빨강, 파랑 사각형이 녹색 사각형의 주변의 것들이고, 녹색이 그 중간에 있고, 노랑은 녹색의 내용물 영역을 나타내기 위해 만들었다. 녹색의 사각형에 마진, 패딩, 경계를 주게 된 경우 크기 변화와 위치 변화를 보여 주고 있다.





위의 그림에선 position에 따른 위치 변화를 나타내고 있다. 속성 값은 다음과 같다.

  • Static = 보통의 경우
  • Relative = Static의 좌표를 기준으로 삼는다.
  • Absolute = HTML 문서를 좌표 기준으로 삼는다.
  • Fixed = 브라우저 창을 좌표 기준으로 삼는다.

책에서도 보통 잘 설명하지 않는 매우 귀한 내용이다.(^^)





또 다른 속성 중에 Float(붕 뜨기)이란 것이 있다. 단어 뜻 그대로 뜨게 된다. 빈 자리에는 다음 내용물들이 밀려 들어와서 배경이 된다. 배경이 물이라면 뜬 것은 배가 된다. 배가 있는 곳은 물이 빠져 나간다. 배경의 내용물들은 뜬 영역 주변을 돌아서 배치 되게 된다. 마치 물이 빠져 나가는 것과 같다. 이런 속성은 그림 같은 것을 배치할 때 사용하면 좋다. 이것을 Layout에 사용하려면 용법을 잘 이해해야 한다. Float에 의해 뜬 것들은 서로 동일한 공간에 있어 서로 겹칠 수가 없다. 마치 배들은 서로 겹칠 수가 없는 것과 같다. 이 속성에 의해서 배치된 것들은 위치가 유동적이다.


'IT 이론과 퍼온정보' 카테고리의 다른 글

HTML 이란, HTML DOCTYPE, HTML 구조  (0) 2014.01.17
XML 문법  (0) 2014.01.17
JSON이란  (0) 2014.01.17
MVP(Model-View-Presenter) Pattern  (0) 2014.01.17
OSI 참조모델(Reference model)  (0) 2014.01.17
:
BLOG main image

공지사항

카테고리

분류 (356)
main (1)
php5 (218)
HTML (36)
javascript (93)
IT 이론과 퍼온정보 (8)
깨작일상 (0)
곧 추가할 내용 (0)
추후 알아볼것들... (0)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Total :
Today : Yesterday :