1.0.0

레이아웃을 위한 스타일

Block vs Inline

종류블록 레벨인라인 레벨

범위

사용가능한 최대 가로 너비를 사용

필요한 만큼의 너비를 사용한다.(해당 요소 크기만믘)

크기

크기 지정이 가능

가로, 세로 사이즈를 지정할 수 없다.

default

width:100%; height:0 으로 시작해서 요소가 완성

width:0; height:0

수직으로 쌓임

수평으로 쌓임

margin, padding 위, 아래, 좌, 우 사용 가능

margin, padding 위, 아래 속성은 사용할 수 없다.

용도

레이아웃을 잡는 용도로 사용

텍스트를 다루는 용도로 사용

해당 테그

<p>, <h1>~<h6>,<ul>,<ol>,<div>, <blockquote>,<form>,<hr>,<table>, <fieldset>,<address>

<img>,<object>,<br/>,<sub>, <sup>,<span>,<input>,<textarea>, <label>,<button>

박스 모델(box model)

블록 레벨 요소들은 모두 박스 형태이다.

  • width, height : 콘텐츠 영역의 크기(너비, 높이)

모던 브라이저에서 박스 모델의 전체 너비 = width + 좌우 패딩 + 좌우 테두리 인터넷 익스플로러 6에서 박스 모델의 width값 = 콘텐츠 너비 + 좌우 패딩 + 좌우 테두리

display : 화면 배치 방법 결정

display: none | contents | block | inline | inline-block | table | table-cee

블록 레벨 요소와 인라인 레벨 요소를 지정할 때 display속성을 이용하지만 원래 display속성은 해당 요소가 화면에 어떻게 보일지를 지정할 때 사용

  • block : 해당 요소를 블록 레벨로 지정

  • inline : 블록 레벨 요소를 인라인 레벨로 바꿀 수 있다.

  • inline-block : 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정한다.

  • none : 해당 요소를 화면에 아예 표시하지 않는다.(공간조차 차지하지 않음)

테두리 관련 속성들

  • border-style : 테두리 스타일 지정

border-style: none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid
# none 기본값

  • border-width : 테두리 두께

border-top-width: <크기> | thin | medium | thick
border-right-width: <크기> | thin | medium | thick
border-bottom-width: <크기> | thin | medium | thick
border-left-width: <크기> | thin | medium | thick
border-width: <크기> | thin | medium | thick

border-width를 정할 때 속성 값이 2개라면 좌우, 위아래로 묶어 적용하고, 4개라면 위에 부터 시계방향으로 적용(top->right->bottom->left)

  • border-color : 테두리 색상 지정

border-top-color: <색상>
border-right-color: <색상>
border-bottom-color: <색상>
border-left-color: <색상>
border-color: <색상>

  • border : 테두리 스타일 묶어 지정하기

border-top: <두께> | <색상> | <스타일>
border-right: <두께> | <색상> | <스타일>
border-bottom: <두께> | <색상> | <스타일>
border-left: <두께> | <색상> | <스타일>
border: <두께> | <색상> | <스타일>

이때 순서는 상관없다.

  • border-radius : 박스 모서리 둥글게 만들기

border-top-left-radius: <크기> | <백분율>
border-top-right-radius: <크기> | <백분율>
border-bottom-right-radius: <크기> | <백분율>
border-bottom-left-radius: <크기> | <백분율>
border-radius: <크기> | <백분율>
# 타원 형태로 둥글게
border-top-left-radius: <가로크기>  <세로크기>
border-top-right-radius: <가로크기>  <세로크기>
border-bottom-right-radius: <가로크기>  <세로크기>
border-bottom-left-radius: <가로크기>  <세로크기>
border-radius: <가로크기> / <세로크기>

참고

Previous색상과 배경을 위한 스타일NextCSS 포지셔닝

Last updated