728x90
display
/* style.css 문서 */
p { display: inline; }
a { display: block; }
a { display: inline-block; }- Block과 Inline 요소의 성격을 바꿀 때 사용
- inline-block을 사용하면 두 요소의 성격을 모두 가짐
float
<div class = "left"> Hello World </div>
<div class = "right"> Hello World </div>
/* style.css 문서 */
.left { float: left; }
.right { float: right; }- 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
- 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것
<div class = "left"> Hello World </div>
<div class = "next"> Hello World </div>
/* style.css 문서 */
.left { float: left; }
.next { float: left; }- 레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우
- flot: left; 를 연속적으로 입력
clear
<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>
/* style.css 문서 */
footer { clear: both; }- float에 대한 속성을 제어하고자 할 때
- float을 마지막으로 사용한 지점 다음에 clear를 사용한다.
- 보통 both를 사용해 left, right 모두 제어한다.
브라우저와 공간 사이의 공백 제거하기
<style>
html, body {
margin: 0;
padding: 0;
}
</style>- <html>과 <body>태그는 margin과 padding 값을 가지므로 초기화를 해주어야 함
<style>
* {
margin: 0;
padding: 0;
}
</style>- 혹은 * 로 모든 html 태그 선택 가능
728x90
반응형
'Front-End' 카테고리의 다른 글
| [CSS3] Transition 속성 (0) | 2023.03.01 |
|---|---|
| [HTML/CSS] 웹사이트를 재미있게 만드는 CSS3의 transform 속성들 (0) | 2023.03.01 |
| [HTML/CSS] 박스 모델 (0) | 2023.02.27 |
| [CSS] 가장 많이 사용되는 주요 속성 (0) | 2023.02.27 |
| [CSS] Cascading (0) | 2023.02.27 |