디스플레이
1. 블록과 인라인
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가지는데 이 display 속성값은 다음 두 가지 중 하나이다.
- 블록(block)
- 인라인(inline)
블록 (block) 타입의 요소
- display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
< p >, < div >, < h >, < ul >, < ol >, < form >요소< div >요소 : 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용
인라인(inline) 타입의 요소
- display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않음 ✍🏼
- 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
< span >, < a >, < img ><span>요소 : 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소. 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용
display 속성의 기본 설정값의 변경
- < div >, < h1 >, < p >, < ul >, < ol >, < form >요소는 대표적인 블록(block) 요소
- < span >, < a >, < img >요소는 대표적인 인라인(inline) 요소
<style>
h1,a{border:1px solid red;}
h1{display: inline;}
a{display:block;}
</style>- 원래 h1은 기본 설정값이 블록이고 a는 인라인이지만 위에 같이 변경할 수 있음. 이럴 경우 라인 모든 너비를 차지하던 h1이 해당 요소만큼만 차지하고, 해당 요소 내용만큼만 차지하던 a가 라인 모든 너비를 차지
인라인-블록(inline-block)
{ display: inline-block; }: 인라인 요소처럼 한 줄로 늘어서게 되지만, 블록 요소처럼 너비와 높이를 설정할 수 있음. 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용
2. visibility 속성
- visible, hidden, collapse
- { visibility: hidden; } : 눈에 보이지만 않을 뿐 여전히 웹 페이지의 레이아웃에는 존재
3. HTML 요소 숨기기
- { display: none; } : 웹 페이지에 더 이상 나타나지 않으며, 웹 페이지의 레이아웃에도 영향을 미치지 않음
4. opacity 속성
- 투명도, 0.0부터 1.0까지 설정할 수 있으며, 속성값이 0에 가까울수록 투명한 상태
포지션
1. 정적 위치(static position) 지정 방식
div { position: static; }- static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않음
- 모든 HTML 요소의 position 속성의 기본 설정값은 static
2. 상대 위치(relative position) 지정 방식
div.relative { position: relative; left: 30px; }- 기본 위치를 기준으로 위치를 설정
- 기본 위치 : 해당 요소가 정적 위치(static position) 지정 방식일 때 결정되는 위치
3. 고정 위치(fixed position) 지정 방식
div.fixed { position: fixed; top: 0; right: 0; }- 뷰포트(viewport)를 기준으로 위치를 설정
- 즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치
4. 절대 위치(absolute position) 지정 방식
5. z-index 속성
Float
1. float 속성
- img { float: left; margin-right: 20px; }
- 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록. 본문에 이미지 삽입할 때 자연스럽게
- 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용
2. clear 속성
<style>
.left {
background-color: #FF8C00;
width: 150px;
height: 50px;
float: left;
}
.right {
background-color: #9932CC;
width: 150px;
height: 50px;
float: right;
}
p { clear: both; }
</style>- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
3. overflow 속성
- float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 됨 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커짐
4. float 속성을 이용한 레이아웃
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style>
div.page {
border: 3px solid #CD5C5C;
overflow: auto;
}
h2 { text-align: center; }
header{ border: 3px solid #FFD700; }
nav {
border: 3px solid #FF1493;
width: 150px;
float: left;
}
section {
border: 3px solid #00BFFF;
margin-left: 156px;
}
footer{ border: 3px solid #00FA9A; }
</style>
</head>
<body>
<h1>float 속성을 이용한 레이아웃</h1>
<div class="page">
<header>
<h2>header 영역</h2>
</header>
<nav>
<h2>nav 영역</h2>
<p>여기에는 보통 메뉴가 들어갑니다.</p>
</nav>
<section>
<h2>section 영역</h2>
<p>여기에는 페이지에 해당하는 내용이 들어갑니다.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare sapien suscipit tincidunt ullamcorper. Cras ac sem sed mauris maximus rhoncus vel in metus. Nam pharetra arcu sit amet dolor interdum, eget scelerisque libero finibus. Phasellus quis vulputate ante. Fusce sit amet viverra justo. Donec id elementum mauris. Nam id porttitor nisl, et suscipit nunc. Vestibulum sit amet volutpat quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis placerat sem eu facilisis ultricies.
</p>
</section>
<footer>
<h2>footer 영역</h2>
</footer>
</div>
</body>정렬
1. margin 속성을 이용한 가운데 정렬
<style>
div { width: 300px; margin: auto; }
</style>- margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬
- 해당 요소의 width 속성값을 먼저 설정해야 함
2. position 속성을 이용한 좌우 정렬
<style>
div { width: 300px; padding: 10px; margin: 0;
position: absolute; right: 0; }
</style>- position 속성을 이용하여 정렬할 경우에는 < body >요소에 margin과 padding 속성값을 설정하는 것이 좋음
3. float 속성을 이용한 좌우 정렬
<style>
div { width: 350px; padding: 10px; margin: 0; }
div.left { float: left }
div.right { float: right }
</style>- float 속성을 이용하여 정렬할 경우에는 < body >요소에 margin과 padding 속성값을 설정하는 것이 좋
개발자로서의 삶은 https://velog.io/@maxminos 에서 기록하고 있습니다 😀