CSS에서 박스 모델 배열.
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다.
Recap
- 스타일 요소를 html 에 포함한다.
- 기본 작성 규칙
- 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다.
- 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다.
- RGB 값을 이용하여 색상을 숫자로 표현한다.
flex 모델
부모 요소에 flex 스타일을 적용
flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다.
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<style>
body {
background-color: #ccc;
margin-top: 30px;
}
#top {
background-color: white;
border: none;
}
.rect {
border: 1px solid black;
width: 250px;
height: 250px;
}
#rec_container {
display: flex;
}
</style>
</head>
<body>
<div id="top" style="border: 3px solid red; height:30">top</div>
<div id="logo" style="border: 3px solid blue; height:70">logo</div>
<div id="main">main image</div>
<div id="rec_container">
<div class="rect">rectangle 1</div>
<div class="rect">rectangle 2</div>
<div class="rect">rectangle 3</div>
<div class="rect">rectangle 4</div>
</div>
</body>
</html>마치 짠 것처럼 원하던 바대로 배열이 될 것이다. 예제에서 변경된 부분을 살펴보면, 배열될 요소들을 감싸고 있는 부모 요소의 보여주는 방법을 flex 모델로 명시해 주었을 뿐이다.
자식 요소들의 정렬
이제 메인 이미지 부분의 높이 값을 부여하고, 자식 요소들의 같은 여백을 가지도록 배열하여, 홈 페이지 제작을 위하여 실제로 사용할 수 있을 만한 레이아웃을 잡아 본다.
<style>
#rec_container {
display: flex;
justify-content: space-evenly;
}
#main {
height: 150px;
}
</style>위의 일부 스타일을 기존의 예제에 추가하고 결과를 확인하여 보면. 기본적인 레이아웃을 확인 할 수 있다.
댓글
댓글 쓰기