CSS에서는 화면의 구성요소들을 각각 인라인, 블록 요소로 구분하고 이에 맞는 스타일 속성을 부여한다. CSS에서 적용할 수 있는 페이지 레이아웃 속성에 대해서 알아보자.


1. 기본 페이지 레이아웃

  • CSS요소를 화면에 출력할 수 있는 방법을 html의 인라인과 블록으로 구분

(1) 인라인요소 & 블록요소 display

  • 키워드값 : block, inline, none, inline-block
  • display: inline;
    • 기본값.
    • 요소를 inline요소처럼 표시한다.
    • 앞뒤로 줄바꿈 되지 않는다.
    • 블록요소에 사용하면 블록을 생성하지 않고 이전 요소와 다음 요소 사이에 배치된다.
    • 블록 요소를 인라인 요소로 변화시킬 때 사용한다.
  • display: block;
    • 인라인 요소에 사용하여 블록처럼 위치시킬 수 있다.
    • 새로운 레이아웃 블록을 생성하고 양 옆에 또다른 요소를 가질 수 없다.
    • 블록으로 만들어 float 속성을 사용하기도 한다.
    • strong, em과 같은 인라인 요소에 사용가능하지만 여전히 블록요소를 포함할 수는 없다.
  • display: none;
    • 박스가 생성되지 않는다.
    • 따라서 공간을 차지하지도 않는다.
  • display: inline-block;
    • 요소는 inline인데 내부는 block처럼 표시하고 싶을 때.
    • 박스모양이 inline요소처럼 가로 정렬된다.


  • 리스트 형태의 키워드값 : list-item
  • display: list-item;
    • p와 같은 요소를 리스트 형태로 출력할 수 있다.
    • 이렇게 어떤 요소를 리스트 형태로 출력하려면 리스트 스타일 표시자를 추가하기 위해 왼쪽 바깥 여백(margin-left)을 부여해야 한다.


(2) 가시성 visibility

  • 키워드값 : visible, hidden
  • visibility: visible;
    • 속성이 보이도록 화면에 출력
  • visibility: hidden;
    • 속성이 보이지 않게 숨김처리
    • 화면에 출력되지 않고 문서에서 차지하는 공간 또한 사라지게 함.


2. 고급 페이지 레이아웃

(1) 콘텐트 띄우기 float

CSS의 컨텐트 출력방식

  • 블록 방식 : 새로운 박스에 출력
  • 인라인 방식 : 같은 라인 내 출력

float

  • 특정 콘텐트가 주변 콘텐트와 자연스럽게 어울리도록 띄울 수 있다.
  • float: left : 콘텐트의 왼쪽모서리가 기본 레이아웃에서 벗어나 화면 왼쪽모서리로 이동
  • float: right : 콘텐트가 오른쪽 끝으로 이동
  • 이후의 콘텐트는 float 주위를 감싸게 된다.

(2) 속성 초기화 clear

  • 더이상 float 속성이 적용되는 것을 원치 않을 때
  • float 속성을 원치 않는 요소에 clear: both; 속성 부여
  • clear: right; : 왼쪽 속성은 유지하고 오른쪽 float속성은 없애고 싶을 때
  • clear: left; : 위와 반대로 적용됨


(3) 콘텐트의 위치선정 position

  • static : 기본값. 문서의 기본적인 흐름 가운데 요소를 위치시킨다.
  • relative
    • 문서의 기본적인 전체 흐름 가운데 위치한 후, top/bottom, left/right 값을 주어 위치시킬 수 있다.
    • relative 속성값이 적용되어도 전체 문서 기본 흐름에 속해있다.
  • absolute
    • 문서의 기본 흐름을 완전히 벗어나 새로운 콘텐트의 흐름을 시작한다.
    • relative, absolute, fixed 중 하나의 속성을 갖는 첫번째 요소를 기준으로 이동.
    • 다음에 오는 요소는 absolute 요소가 없는 것으로 간주한다.(따라서 다음에 오는 요소와 겹쳐보일 수 있다. )
    • top/bottom, right/left 값을 주어 위치시킨다.
  • fixed
    • 문서의 기본 흐름을 완전히 벗어나 새로운 콘텐트의 흐름을 시작한다.
    • 스크롤해도 항상 고정된 위치에 자리한다.
    • top/bottom, right/left 값을 주어 위치시킨다.


(4) top/left와 bottom/right

/*화면 가장 아래에 고정된다.*/
position: fixed;
bottom: 0;
right: 0;
  • top : 위에서 아래로 수치값만큼 이동
  • left : 왼쪽에서 오른쪽으로 수치값만큼 이동
  • bottom : 아래에서 위로 수치값만큼 이동
  • right : 오른쪽에서 왼쪽으로 수치값만큼 이동



3. 심화 - 페이지 정렬

(1) 가로 가운데 정렬

  • text-align: center : 텍스트 요소를 가운데 정렬. block요소에는 적용되지 않음.

      블록 요소의 가로 정렬
    width: 50%; <- 단락을 너비를 부모 요소(페이지레이아웃)의 절반으로 만든다.
    margin: 0 auto; <- 단락너비가 퍼센트이외의 수치값인 경우 'auto'를 쓴다.
    또는 margin: 0 25%; <- 단락너비가 퍼센트이므로 마진에 퍼센트를 사용할 수 있다.
    


  • vertical-align
    • 관련 텍스트 행을 기준으로 인라인 요소를 정렬
    • 따라서 블록요소인 div나 p에는 적용되지 않는다. -> display: inline;주고…
    • 다른 인라인 요소에 상대적으로 정렬하므로 영향받는 값에 따라 모양이 달라질 수 있다.
      • baseline : 기본값. 부모요소의 기준선에 맞춘다.
      • top/middle/bottom : 부모 요소기준으로 위/중앙/아래에 위치.
      • text-top/bottom : 요소의 맨 아래를 부모 font의 위/아래에 맞춘다.
      • super : 부모의 위첨자 기준에 맞춘다.
      • sub : 부모의 아래첨자 기준선에 맞춘다.
<p><a href=#>한식</a></p>
<p><a href=#>중식</a></p>
<p><a href=#>일식</a></p>
p {
	float: left;
	vertical-align: middle;
}

Julia Hwang

디발자를 꿈꾸는 웹개발자의 블로그입니다.