[CSS] 박스 모델(box model), 테두리(border), 마진(margin), 박스사이징(box-sizing), 디스플레이(display), 폼(form)

박스 모델 (BOX MODEL)

모든 HTML 요소는 박스 모양으로 구성됩니다. 이것을 박스 모델이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.
실제로 width와 height는 내용 부분에만 적용된다.

 

내용(content) 

: 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

 

패딩(padding) 

: 내용과 테두리 사이의 간격입니다.

• padding-top : 위
• padding-right : 오른쪽
• padding-bottom : 아래
• padding-left : 왼쪽
• padding : 모든 패딩 속성을 한꺼번에 설정합니다. 방향은 상단부터 시작해서 시계방향으로 설정합니다.

<div id="pad">안녕하세요.</div>
div#pad { padding: 20px 50px 30px 10px; }

상단 20p, 오른쪽 50px, 하단 30px, 왼쪽 10px로 패딩 설정

 

div#pad { padding: 20px 50px 30px ;}

상단 20px, 오른쪽 왼쪽 50px, 하단 30px로 패딩 설정

 

div#pad { padding: 20px 50px ; }

상단 하단 20px, 오른쪽 왼쪽 50px로 패딩 설정

 

div#pad { padding: 20px; }

상단 하단 오른쪽 왼쪽 모두 20px로 패딩 설정

 

테두리(border) 

: 내용과 패딩 주변을 감싸는 테두리입니다.

 

• border-style : 테두리를 다양한 모양으로 설정할 수 있습니다. (solid, dotted, dashed, double, ...)
• border-color : 테두리 색상을 설정합니다. 기본적인 color 속성값들뿐 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수 있습니다. border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 상속받습니다.
• border : 모든 테두리 속성을 한꺼번에 설정합니다. 방향은 상단부터 시작해서 시계방향으로 설정합니다.
• border-width : 테두리 두께를 설정합니다.

 

마진(margin) 

: 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. 

※ 박스 바깥쪽 여백을 담당하는 마진은 세로 겹침 현상이 일어납니다. 
즉, 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하게 됩니다.

※ 박스의 중앙정렬을 위해 margin: 0 auto; 를 사용합니다.

 

박스사이징(box-sizing)

정확한 픽셀이 아니라 퍼센트로 줬을때 애매해질 상황이 생긴다.

width, height 값에 padding 이나 border 영역은 포함되지 않습니다. 따라서 width가 100%로 설정되었을 경우 padding이나 border 속성을 추가할 수 없습니다. CSS3 부터는 box-sizing이라는 새로운 속성이 생겼습니다. 이 속성을 설정하면 해당 요소의 패딩과 테두리가 포함되어 계산됩니다.

• - content-box : 컨텐츠 영역을 기준으로 크기가 결정됩니다. (기본값)
• - border-box : 테두리를 기준으로 크기를 정합니다. 패딩과 테두리를 포함한 크기가 요소의 크기가 됩니다.

둥근 테두리 만들기(border-radius)

border-radius : top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

테이블 테두리 설정하기

HTML 요소 중 테이블 요소의 스타일을 설정할 수 있습니다. 스타일을 table 요소나, th, td 요소등에 주는 방법은 동일합니다. 
하지만 테이블만 들어가는 border 관련 속성이 추가되어 있습니다.

 

border-collapse

: 테이블 셀들간에 공백을 처리할지 여부를 결정하는 속성입니다. 이 속성은 tr, th, td 요소들에는 사용할 수 없습니다.

• separate : 셀들을 분리시켜 사이에 공백을 만듭니다.기본값.
• collapse : 셀들을 합쳐서 사이의 공백을 없앱니다.

 

vertical-align

: 테이블의 텍스트를 세로 정렬 할 수 있습니다. (벽 위에 붙일것인지 아래에 붙일것인지를 설정가능하다.)

 

CSS display

웹 페이지의 레이아웃을 결정하는 속성입니다.

 

1. 블록 : display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하고, 해당 라인의 모든 너비를 차지합니다.

2. 인라인 : display 속성값이 인라인인 요소는 새로운 라인에서 시작되지 않습니다. 또한 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지합니다.

3. 인라인 블록 

인라인 블록에서는 아래와 같은 기능을 사용할 수 있습니다.

• width / height 를 적용할 수 있습니다.
• margin / padding 을 적용할 수 있습니다.
• line-height 를 적용할 수 있습니다.

*** display : none;

웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라집니다.

*** visibility : hidden;

해당 HTML 요소를 웹 페이지에서 나타내지 않습니다. 여전히 웹 페이지의 레이아웃에서는 존재합니다.

 

아이디 : [ ] [중복체크]

아이디가 중복되었습니다. 확인하세요. <--자리 차지는 하고 있지만 보이지 않다가 중복체크를 눌렸을 때 나오면 visibility : hidden;

비밀번호 : [ ]

 

아이디 : [ ] [중복체크]

비밀번호 : [ ]<--자리 차지는 하지않다가 중복체크를 눌렸을 때 글자가 나오면 display:none;

 

CSS 폼

• width : 폼 요소의 너비를 설정합니다.
• height : 폼 요소의 높이를 설정합니다.
• border : 테두리 색상과 두께, 스타일을 설정합니다. 
               또한 border-radius 속성을 이용하여 폼 요소의 모서리를 둥글게 만들 수 있습니다.
• background-color : 폼 요소의 배경색을 설정합니다.
• color : 텍스트의 색상을 설정합니다.
• :focus : 폼 요소가 포커스를 가지고 있을 때 스타일을 설정할 수 있습니다.
• background-image : 폼 요소에 아이콘이나 이미지를 삽입할 수 있습니다. 
                                  또한 background-position 속성을 이용하여 삽입한 아이콘이나 이미지가 나타날 위치를 설정할 수 있습니다.