728x90
01 수평, 중앙, One True 정렬 레이아웃
- 수평 정렬 레이아웃
- float와 overflow 속성을 사용해 레이아웃을 만들기
- 규칙: 자손에게 float 속성을 지정하고, 부모의 overflow속성에는 hidden키워드를 적용
<head>
<title>Float with overflow</title>
<style>
div.container{
overflow: hidden;
}
div.item{
float: left;
border: 1px solid black;
margin: 0 3px; /*바깥 여백*/
padding: 10px; /*안쪽 여백*/
}
div.clear{
clear: both; /*overflow처럼 사용, div태그 다음줄에 다음 내용이 오도록*/
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolore consectetur rerum quisquam error eligendi mollitia facilis officiis similique non. Totam reprehenderit eveniet optio possimus quo et minus voluptatibus molestias.</p>
<div class="container">
<div class="item">메뉴 - 1</div>
<div class="item">메뉴 - 2</div>
<div class="item">메뉴 - 3</div>
<div class="item">메뉴 - 4</div>
</div>
<div class="clear"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae maxime voluptate totam id? Similique aliquam odio esse, eaque culpa impedit quos ipsa fuga quibusdam laboriosam nemo natus animi maxime quisquam.</p>
</body>
- 부모의 overflow 속성을 hidden으로 입력하면 div 다음 줄에 p태그가 붙는다
- overflow를 지정하지 않으면 p태그 요소가 div요소 바로 옆에 붙는다.
- 중앙 정렬 레이아웃
- 특정한 너비의 중앙에 내용이 위치
<head>
<title>Margin width</title>
<style>
/*초기화*/
*{ /* *은 전체선택자*/
margin: 0;
padding: 0;
}
/*주제*/
body{
margin: 0 auto;
width: 960px;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Neque porro quisquam est qui...</h2>
<p>loremNisi deserunt nisi veniam ullamco occaecat eu consequat nostrud minim consectetur veniam labore eu nisi.</p>
<p>loremExcepteur nulla quis Lorem eiusmod commodo ex nulla ex.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur distinctio ipsum ex itaque dolorum, a fugit corrupti reiciendis esse! Soluta illo assumenda distinctio blanditiis voluptas corporis fugit enim doloribus sapiente.</p>
</body>- width 속성을 부여하고 margin 속성을 '0 auto'로 입력
- One True 레이아웃
- 국내 모든 포털 사이트의 메인 페이지 레이아웃
- "행을 독립적으로 생각"해서 공간을 나눔
1. 행 구성
2. 열 구성
3. 레이아웃 구성
1 부모 태그에 고정된 너비를 입력
2 수평 정렬하는 부모 태그의 overflow속성에 hidden을 적용
3 자손 태그에 적당한 너비를 입력하고 float속성을 적용
<head>
<title>One True Layout</title>
<style>
body{
width: 500px;
margin: 10px auto;
}
#top{ background: green;}
#middle{ overflow: hidden;}
#left{
float: left;
width: 150px;
background: red;
}
#right{
float: left;
width: 350px;
background: blue;
}
#bottom{background: purple;}
</style>
</head>
<body>
<div id="top">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio mollitia nulla error non iure minima vel perspiciatis porro, obcaecati eum eligendi corporis necessitatibus, numquam doloribus rem voluptate, recusandae labore! Magni?</div>
<div id="middle">
<div id="left">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</div>
<div id="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, nam molestias. Atque itaque veniam aliquam, impedit facilis, maiores laudantium deleniti obcaecati omnis totam inventore quos, mollitia illum. Omnis, modi porro!</div>
</div>
<div id="bottom">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod quae similique vitae facere quasi ipsa distinctio dolorem quibusdam fuga assumenda voluptatum illo voluptates error ad, laboriosam neque ipsum sequi eligendi?</div>
</body>
02 요소 배치
- 절대 위치를 사용한 요소 배치
- 자손의 position 속성에 absolute를 적용하려면 부모의 position 속성에 relative를 적용
<head>
<title>Absolute Position</title>
<style>
#container{
width: 500px;
height: 300px;
border: 3px solid black;
overflow: hidden;
position: relative; /*부모입장에서는 position이 relative*/
}
.circle{
position: absolute; /*자손입장에서는 position이 absolute*/
width: 100px;
height: 100px;
border-radius: 50% 50%; /*50%만 줘도 원이 됨*/
}
#red{
left: 20px;
top: 20px;
background-color: red;
}
#green{
right: 20px;
top: 20px;
background-color: green;
}
#yellow{
left: 20px;
bottom: 20px;
background-color: yellow;
}
#blue{
right: 20px;
bottom: 20px;
background-color: blue;
}
</style>
</head>
<body>
<h1>Dummy Text</h1>
<div id="container">
<div id="red" class="circle"></div>
<div id="green" class="circle"></div>
<div id="yellow" class="circle"></div>
<div id="blue" class="circle"></div>
</div>
<h1>Dummy Text</h1>
</body>
- 요소를 중앙에 배치
1. 중앙 정렬하려는 div 태그의 position 속성을 absolute로 지정
2. left 속성과 top 속성을 모두 50%로 지정
3. 중앙에 정렬하려는 div태그의 margin-left 속성과 margin-top속성에 음수 입력
- 입력하는 값은 div 태그 너비와 높이의 정확히 반이어야 한다.
<head>
<title>Absolute Posision</title>
<style>
/*초기화*/
*{margin: 0; padding: 0;}
/*주제*/
body{background: black;}
#container{
width: 500px;
height: 250px;
background: orange;
/*위치설정*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -125px;
}
</style>
</head>
<body>
<div id="container">
<h1>요소의 중앙 배치</h1>
</div>
</body>
- 고정 바 배치
1. position 스타일 속성에 fixed를 적용
2. left 속성, top 속성, right 속성, bottom 속성에 값을 입력해 위치를 설정
3. width 속성과 height 속성으로 크기를 설정
<head>
<title>Document</title>
<style>
h1,p{width: 300px;}
.ellipsis{
white-space: nowrap; /*줄바꿈을 못하게함*/
overflow: hidden;
text-overflow: ellipsis; /*글자생략*/
}
</style>
</head>
<body>
<h1 class="ellipsis">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, recusandae ea! Doloremque maxime, odit atque maiores, molestias totam magnam cupiditate obcaecati autem praesentium et ullam laborum ipsam reprehenderit officia tenetur!</h1>
<p class="ellipsis">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam veniam autem atque eum laborum iste amet aut, esse aliquam natus dolore maxime rerum cum voluptates impedit. Architecto quidem omnis aspernatur?</p>
</body>
728x90
'HTML' 카테고리의 다른 글
| [JavaScript] 자바스크립트 기본 문법 (0) | 2021.11.14 |
|---|---|
| [CSS] 반응형 웹 (0) | 2021.11.04 |
| [CSS] CSS3 속성 (0) | 2021.10.11 |
| [CSS] CSS3 기초 : 선택자와 단위 (0) | 2021.10.10 |
| [HTML] 입력 양식 태그와 구조화 태그 (0) | 2021.10.10 |
