HTML, CSS 기초 : 레이아웃에 영향을 미치는 요소

박스모델

박스모델

• margin 속성 : border 속성 기준 바깥쪽 영역
  속성값 : margin-top(상단여백), margin-right(오른쪽 여백), margin-bottom(하단여백), margin-left(왼쪽 여백)
  ex) margin: 40px 15px 20px 10px (시계방향기준으로 top right bottom left 순서)
  
  
• border 속성 : 공간의 테두리를 생성
  속성값 : solid(실선), dotted(점선)
  ex) border: solid 10px blue; (타입 선의굵기 선의색상 순서)
  
  
• padding 속성 : border 속성 기준 border 속성과 content 속성의 간격
  속성값 : padding -top(상단여백), padding -right(오른쪽 여백), padding -bottom(하단여백), padding -left(왼쪽 여백)
  ex) padding: 40px 15px 20px 10px (시계방향기준으로 top right bottom left 순서)
• content 요소 : 태그 또는 태그에 포함되어 있는 내용물
  
  

마진 병합 현상
: 인접한 공간에 margin-top과 margin-bottom속성을 적용할 경우 두 속성 중 큰 속성값이 작은 속성값을 병합하는 현상

• 형제간에 발생하는 마진 병합 현상 : HTML 태그에 margin-top과 margin-bottom속성을 적용했을 경우 공백이 큰 속성값을 기준으로 설정되는 것.
  
  
• 부모자식간에 발생하는 마진 병합 현상 : 자식의 margin-top속성이 부모에게 영향을 미치는 것.
  ex) 자식의  margin-top 속성이 부모에게 영향을 미쳐 함꼐 움직임. 이를 해결하려면 자식 속성에 positionn : absolute 속성을 추가하여 해결.
  
  

position 속성

: 선택된 태그의 상태를 2차원 또는 3차원으로 지정. HTML 태그는 기본적으로 2차원 특징을 가지고 있다.

속성값 : static, fixed, relative, absolute

 

• 2차원 세계, static 속성값
  1. 부모자식간 발생하는 마진병합현상 발생
  2. top, right, bottom, left속성 적용x
  3. 부모가 높이를 갖고있지 않을 경우 자식의 높이가 부모에게 영향을 끼침.
  ex)position_static_child 안에 position: static;을 작성하고  margin-top 속성 적용 시 마진 병합 현상 발생
  
  
• 3차원 세계, fixed 속성값
  : 선택된 태그를 화면에 고정시킨다.(ex)화면을 따라다니는 배너 광고 등)
  1. 부모자식간 발생하는 마진병합현상x,
  2. top, right, bottom, left속성 적용o
  3. 부모가 높이를 갖고있지 않아도 자식의 높이가 부모에게 영향을 끼치지 않음.
  *fixed속성이 적용된 영역 안에 margin-top : 최초의 박스가 생성된 지점을 기준으로 이동
   fixed속성이 적용된 영역 안에 top : 브라우저를 기준으로 이동
  
  
• 2차원과 3차원의 세계, relative 속성값
  1. 부모자식간 발생하는 마진병합현상x (3차원)
  2. top, right, bottom, left속성 적용o (3차원)
  3. 부모가 높이를 갖고있지 않을 경우 자식의 높이가 부모에게 영향을 끼침. (2차원)
• 3차원의 세계, absolute
  1. 부모자식간 발생하는 마진병합현상x,
  2. top, right, bottom, left속성 적용o. 단, 부모의 position 상태에 따라 좌표의 기준점이 달라진다.
  ex)부모가 relative값을 가지고 있을 때 top 속성을 사용하면 좌표가 부모를 기준으로 형성된다.
  3. 부모가 높이를 갖고있지 않아도 자식의 높이가 부모에게 영향을 끼치지 않음.