CSS - 상자, 레이아웃

재이·2022년 1월 10일

CSS3

목록 보기

2/4

*본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성됨.
※코드 출력화면이 보이지 않을 시 글 수정 페이지로 들어와 확인 할 것

상자(Box)

width

박스의 가로 사이즈를 말하는데 여백을 포함하지 않는 크기로 px, %, em 등의 단위로 된 수치를 쓸 수 있고, 많은 브라우저 오류가 가로 사이즈를 기재함으로써 치유되므로 가장 중요한 속성 중 하나라고 볼 수 있다.

height

박스의 세로 사이즈를 말하는데 역시 여백을 포함하지 않는 크리고 px, %, em등의 단위로 된 수치를 쓸 수 있다. 높이값 속성은 레이아웃 작업에서 float을 해제할 때 쓰는 겨우가 있지만 장문의 텍스트 상자에서는 레이아웃을 설계하는데 오히려 방해가 되므로 높이값은 가능한 한 사용하지 않는 것이 좋다.

padding

박스의 안쪽 여백을 발한다. 즉, 내용과 테두리 사이의 간격을 말하는 것이며, 간격과 방향에 관련해서는 다음의 형식으로 사용하게 된다.

padding : 10px; --- 값을 한 번만 지정하면 위, 아래, 왼쪽, 오른쪽 안 여백 모두 각 10px
padding : 10px 20px; --- 값을 두 번 지정하면 위, 아래 10px / 왼쪽, 오른쪽 20px
padding : 10px 20px 30px; --- 값을 세 번만 지정하면 위 10px / 왼쪽, 오른쪽 20px / 아래 30px
padding : 10px 20px 30px 40px; --- 값을 네 번 지정하면 위 10px / 오른쪽 20px / 아래 30px / 왼쪽 40px
padding-top : 10px; --- 위쪽 안 여백만 10px로 지정함
padding-right : 10px; --- 오른쪽 안 여백만 10px로 지정함
padding-bottom : 10px; --- 아래쪽 안 여백만 10px로 지정함
padding-left : 10px; --- 왼쪽 안 여백만 10px로 지정함

margin

박스의 바깥쪽 여백을 말한다. 즉, 테두리와 다음 박스 영역 사이의 간격을 말하는 것이며, 특정 브라우저에서 오류를 많이 일으키므로 가능한 한 사용하지 않는 것이 좋겠다.

margin : 10px; --- 값을 한 번만 지정하면 위, 아래, 왼쪽, 오른쪽 바깥 여백 모두 각 10px
margin : 10px 20px; --- 값을 두 번 지정하면 위, 아래 10px / 왼쪽, 오른쪽 20px
margin : 10px 20px 30px; --- 값을 세 번만 지정하면 위 10px / 왼쪽, 오른쪽 20px / 아래 30px
margin : 10px 20px 30px 40px; --- 값을 네 번 지정하면 위 10px / 오른쪽 20px / 아래 30px / 왼쪽 40px
margin-top : 10px; --- 위쪽 밖 여백만 10px로 지정함
margin-right : 10px; --- 오른쪽 밖 여백만 10px로 지정함
margin-bottom : 10px; --- 아래쪽 밖 여백만 10px로 지정함
margin-left : 10px; --- 왼쪽 밖 여백만 10px로 지정함

두 개의 값을 써서 세로 가로 여백을 설정하는 형식으로 박스를 가운데에 정렬할 수 있다.
박스에 가로 사이즈를 주고 [margin : 세로값 auto;] 하게 되면 전체 폭의 중앙에 설정한 크기의 박스가 배치된다.

<!DOCTYPE html>
<html lang="ko">
<head><title> CSS </title>
<meta charset="utf-8">

<style type="text/css">
   body { font:12px "굴림", Gulim; background:url("images/bg_grid.gif") ; }
   .exp { width:500px ; background:#abc ; padding:10px ; margin:20px 0 ; }
   .cloud { width:200px; margin:0 auto; }
</style></head>
<body>
   <p class="exp">오늘은 비가 옵니다.</p>
   <p class="exp">오늘은 눈이 옵니다.</p>
   <p class="exp">오늘은 해가 납니다.</p>
   <p class="exp cloud">오늘은 흐립니다.</p>
</body>

</html>

이를 출력하면 다음과 같다.

오늘은 비가 옵니다.

오늘은 눈이 옵니다.

오늘은 해가 납니다.

오늘은 흐립니다.

각 요소 간의 마진은 합해서 40px이어야 할 텐데 20px이다. - 세로 마진 겹침 오류!
마지막 박스는 중앙에 배치되었다. - margin : 0 auto;

border

박스의 테두리를 말한다. 테두리의 색상, 모양, 굵기를 정할 줄 알아야 하며 한꺼번에 지정할 줄도 알아야 한다.

border-color : #00f; --- 테두리의 색상을 파란색으로 지정한다
border-width : 2px; --- 테두리의 굵기를 2px로 지정한다
border-style : solid; --- 테두리의 모양을 실선으로 지정한다
border-top : 1px solid red; --- 위쪽 테두리만 1px짜리 빨간 실선으로 지정한다
border-bottom : 1px solid red; --- 아래쪽 테두리만 1px짜리 빨간 실선으로 지정한다
border-left : 1px solid red; --- 왼쪽 테두리만 1px짜리 빨간 실선으로 지정한다
border-right : 1px solid red; --- 오른쪽 테두리만 1px짜리 빨간 실선으로 지정한다

테두리 선의 모양은 다음과 같다.

solid --- 실선 모양의 테두리를 칠함
dashed --- 긴 점선 모양의 테두리를 칠함
dotted --- 점선 모양의 테두리를 칠함 (IE6에서는 1px dotted line은 dashed line으로 표현된다)
double --- 테두리 모양이 이중선으로 나타남
none --- 테두리를 치지 않음
groove, ridge, inset, outset --- 액자 형태의 테두리를 칠함

border:5px solid #123456; border:5px dotted #123456; border:5px dashed #123456; border:10px groove #06c; border:10px ridge #f06; border:10px inset #0c3; border:10px outset #c63; border:none;

레이아웃

이번에 나오는 속성들은 블록들의 위치를 가로로 나열하는 데 필요한 요소와 요소들을 겹치게 배열하는 데 필요한 요소들이며 웹 표준 전반에서 가장 중요한 부분이다.

float

박스를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 반드시 필요한 것이다. float한 박스에 가로 사이즈를 함께 주어야 모든 구형 브라우저에서까지도 크로스 브라우징 된다.
*크로스 브라우징이란? --- 각 브라우저들에서 한 웹페이지가 동일한 결과로 표현되는 것

left --- 박스를 왼쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르도록 함
right --- 박스를 오른쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르도록 함

[float : left;] 를 계속 쓴다는 것은 float된 박스의 옆 공간 중에서 왼쪽에 붙인다는 뜻이다.
따라서 계속 가로로 나열해야 하는 박스들은 맨 마지막 것을 제외하고는 모두 [float : left;]여야 하고 모두 다 [float : left;]여도 된다는 것이다.

clear

float된 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치되도록 하는 속성이다.
즉, float을 해제시켜주는 중요한 역할을 하는데, 이 요소는 블록이어야 한다.

left --- float된 박스 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴
right --- float된 박스 중 우측이 짧을 때 우측의 빈 공간부터 채워 내려옴
both --- float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치해줌(가장 중요)

float을 해제하지 않으면 얼핏 보기에 정상적인 것 같아도 float된 박스를 감싸는 박스에 부여된 배경이나 테두리 속성이 실행되지 않는다. 특히 float된 박스 다음에 [clear : both;]를 부여할 박스가 없어서 방치한 경우가 그런 경우이다.

이런 경우에는 [clear : both;]를 부여할 가짜 요소를 만들어 주어야 한다. :after 선택자를 이용하여 container 안에 실제로는 없는 마지막 박스를 만들고 내용은 비웓둔다. 거기에 [clear : both;]을 해준다.

#container:after {
  content : "";
  display : block;
  clear : both;
}

이렇게 세 문장이다.

이러한 float 해제 처리를 해주지 않으면 container에 디자인이 들어가지 않는다는 것을 다음 예제를 통해 확인해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}li{list-style-type:none;}
body{font:12px "굴림",Gulim;margin:10px;}
#container{width:500px;padding:10px;background:#fdd;border:5px solid #caa;}
h1{text-align:center;padding:10px;}
p{text-align:justify;}
.green{float:left;width:200px;padding:15px;background:#dda;}
.coffee{float:right;width:200px;padding:15px;;background:#ba7;}
#container:after{content:"";display:block;clear:both;}
</style>
</head>

<body>
<div id="container">
<h1>녹차와 커피</h1>
<div class="green">
<p>녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.</p>
</div>
<div class="coffee">
<p>커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우  태어나기 전부터 커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.</p>
</div>
</div>
</body>
</html>

이를 출력하면 다음과 같다.

CSS

녹차와 커피

녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.

커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우 태어나기 전부터 커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.

위의 코드에서

#container:after{content:"";display:block;clear:both;}

이 구문이 사라지면 #container 의 디자인이 제대로 실행되지 않아 결과가 다음처럼 나오게 된다.

CSS

녹차와 커피

※ 만약 제대로 출력이 되지 않을 시 수정 페이지에서 모습을 확인할 수 있다.

display

요소의 성격을 바꾸어주는 속성이다. display가 어떻게 설정되어 있는지에 따라 그 후 사용할 수 있는 속성이 달라지므로 주의하자.

block --- 박스를 블록 요소로 만들어 줌 (줄 바꿈이 일어남)
inline --- 박스를 인라인 요소로 만들어 줌 (줄 바꿈이 일어나지 않음)
inline-block --- 박스를 인라인 요소로 두어 줄 바꿈은 일어나지 않게 하면서 블록에 쓸 수 있는 속성을 쓸 수 있음
none --- 박스를 보이지 않ㅎ게 숨겨 줌

*블록에 쓸 수 있는 속성이란? - width, height, padding, text-align... 등이다.

[display : inline-block;]을 사용하면 요소들 사이에 5px의 margin이 발생한다.
따라서 만약 각 메뉴들 사이가 붙어 있어야 한다면 [display : inline-block;] 대신 [float : left;] 를 넣어야 한다.
이때 float 해제는 gnb 요소에 높이값을 주는 것으로 처리한다. (뒤에 가서 정리할 float 해제 방법에 다시 나온다.)

overflow

박스 안의 내용이 박스보다 클 경우 넘치는 부분을 처리하는 속성이다.

hidden --- 넘치는 컨텐츠를 숨김
auto --- 넘치는 컨텐츠가 존재할 경우에만 스크롤바를 생성해 줌
scroll --- 넘치는 컨텐츠가 없어도 스크롤바를 생성해 줌
scroll-y, scroll-x --- 각 방향으로 스크롤바를 따로 처리하게 해줌

<!DOCTYPE html>
<html lang="ko">
<head><title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}li{list-style-type:none;}
body{font:12px "굴림",Gulim;margin:10px;}

#container{width:200px;height:100px;
    border:1px solid #ccc;overflow:hidden;}
</style></head>
<body>
	<div id="container">
		<blockquote>우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다</blockquote>
		<p> - 김연수(소설가) </p>
		<p>이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. </p>
	</div>
</body>
</html>

이를 출력하면 다음과 같다.

CSS