CSS 레이아웃의 기본

• inline과 block

 

• inline : 블록라인이 화면 일부를 차지하는 태그이다. 
• block : 블록라인이 화면 전체를 사용하는 태그이다.

 

 

 

1. inline이 적용된 "인라인" 텍스트의 border는 일부분 공간으로 바뀌고, block은 "이 텍스트는 블럭레벨 입니다."의 텍스트 문장이 있는 라인 전체 공간을 사용한다.

 

2. display 속성 특성을 인하여 텍스트 글의 줄바꿈이 자동으로 되는 것을 볼 수 있다.

 

 

 

 

1. display와 inline, block을 쓰지 않으니 줄바꿈은 되지 않으며 border와 soild의 효과만 적용된 것을 볼 수 있다.

 

 

 

 

 

 

 

• 박스 모델 box model

 

각 태그들이 웹 페이지에 표현될 때 사각형의 형태(box)로 그 태그의 부피감을 결정한다.

 

- margin : 태그와 태그 사이의 여백 조절
- padding : 태그와 내부 컨텐츠 사이의 조절

- border : (width) (style) (color); 순서로 값 지정

 

* 대신 inline은 width, height 값이 무시된다.

 

 

 

더 많은 박스 모델의 CSS 사전 참고.

www.opentutorials.org/course/718/3798

박스모델 - 생활코딩

 

 

박스를 조절할 수 있는 효과들을 여러 종류 적용해 보았다.

 

 

 

 

 

 

• Box-sizing

 

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정하지만 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다.

 

box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있다.

 

EX) box-sizing:border-box;

 

 

이렇게 border의 두께가 달라 두 박스의 경계가 맞지를 않는다.

 

box-sizing:border-box;을 추가하자 두 박스의 경계가 일치하여 보기 좋게 효과를 보게 되었다.

※ 여기서 *{}는 웹페이지에 등장하는 모든 태그를 포괄할 수 있게하는 CSS 선택자이다.

 

 

 

 

 

• 포지션

엘리먼트의 위치를 지정해주는 역할을 한다.

 

위치를 지정해 주는 4가지 방법이 존재한다.

• static
• relative
• absolute
• fixed
• z-index(추가)

 

 

 

static과 relative

 

• static : 원래 있어야 되는 위치에 정적으로 위치한다. (offset 값 무시) 즉, 위치 설정이 되지 않은 상태이다.
  
  top, bottom, left, right (offset값들)을 적용하고 싶을 경우 position의 값을 static외의 값으로 지정해야 한다.
  (bottom, right, top, left의 offset값들 적용)
  
  position을 지정해도 offset값을 지정하지 않을경우 static처럼 원래 있어야 할 위치에 있게된다

 

• relative : 원래의 위치에서 상대적으로 위치를 변경

 

relative을 적용하여 offset값들을 적용하자 원하는 위치로 텍스트를 마음대로 옮길 수 있다.

 

relative대신 static을 붙이자 offset값을 무시하고 다시 원래 있던 자리로 텍스트가 고정되어 있다는 것을 확인 할 수 있다.

 

 

 

 

 

absolute

 

html element를 기준으로 절대적인 위치로 변경 가능해진다.

 

 

• 부모-자식 관계에 놓인 태그의 경우

1) 자식 태그가 absolute인 경우 부모 태그는 자신의 크기만 가진다.( 즉, 부모와 자신과 관련이 없어진다.) 이 때 자식 태그는 block 태그여도 inline 태그처럼 컨텐츠만한 크기로 변한다. 

2) 여러 부모 태그 중 position이 relative인 부모 태그라고 가정한다면 부모한테 휘둘리지 않고 부모 안에 있는 absolute 자식 태그는 절대적으로 위치를 변경한다.  즉, absolute 자식 태그는 부모 태그와 독립 되기 때문에 width와 height 값을 독자적으로 지정하며 크기 변경한다. (fixed도 같은 효과)

 

 

 

1. absolute가 들어간 '자식' 텍스트는 그 위에 있는 부모 태그에 영향을 받지 않고 독자적으로 html element를 기준으로옮겨다니는 것을 확인 할 수 있다.  

 

 

 

2. 이렇게 absolute가 들어가지 않았다면 '자식' 텍스트는 absolute 속성을 버리고 inline 태그 또한 버리게 되며 다시 block 태그로 돌아오게 된다. 위치 또한 부모 안에 있는 평범한 자식 태그이다.

 

 

 

 

 

 

 

 

fixed

 

화면의 위치에 고정시켜 스크롤으로부터 독립되게 한다. absolute와 같이 부모element와 독립되기때문에 witdth와 height값을 다시 입력해주어야한다.

 

 

 

 

1. 상단의 자식 텍스트를 fixed을 이용하여 고정시켰다. 

2. body전체를 padding-top:30px; 로 설정하여 높이가 30px인 자식 텍스트와 겹쳐지지 않게 하였다.

 

 

 

3. 스크롤을 내려도 상단의 자식 텍스트는 고정되어 있다.

 

 

 

 

 

z-index(추가)

 

html에서는 나중에 배치된 것은 화면상에서 제일 밑으로 깔리게 되어 안보이게 되는데 z-index을 이용하면 우선순위를 임의로 정해 설정할 수 있다.

 

z-index: 10;

z-index: 20;

 

이렇게 두 개가 있다면 10보다 큰 20을 설정한 z-index가 더 큰 우선순위를 갖게 되어 배치순서와 상관없이 화면상 맨 앞으로 오게된다.