inline / inline-block
- inline
- inline 속성을 가진 요소는 컨텐츠에 필요한 만큼의 너비만 차지하고, 새로운 줄에서 시작하지 않는다.
- 텍스트 흐름과 함께 배치되며, 블록 요소처럼 취급되지 않아 텍스트의 흐름을 깨지 않는다.
- a태그, span태그
- 특징
- inline 요소는 너비와 높이를 설정할 수 없음(컨텐츠에 의해 결정됨).
- margin과 padding은 수평적으로만 적용됨, 수직 margin/padding은 제한적으로 적용됨
- inline-block
- inline 요소처럼 동작하지만 너비와 높이 설정 가능
- 새로운 줄에서 시작하지 않으며, 주변 컨텐츠 흐름과 함께 배치됨
- 요소에 inline-block을 적용하면, 블럭 요소임에도 불구하고 인라인 흐름에 따라 배치 가능
- 특징
- width, height, padding, margin 설정 가능
- 레이아웃과 스타일을 더 유연하게 제어 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 vs 인라인-블록</title>
<style>
.inline-example {
display: inline;
background-color: lightblue;
padding: 5px;
margin: 5px;
}
.inline-block-example {
display: inline-block;
background-color: lightblue;
padding: 5px;
width: 100px;
height: 50px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<h2>인라인 예시:</h2>
<p>
이것은 <span class="inline-example">인라인</span> 요소이고, 이것도 <span class="inline-example">인라인</span> 요소입니다.
</p>
<h2>인라인-블록 예시:</h2>
<p>
이것은 <span class="inline-block-example">인라인-블록</span> 요소이고, 이것도 <span class="inline-block-example">인라인-블록</span> 요소입니다.
</p>
</body>
</html>
위치속성
- 요소의 위치는 다음 두 가지 방법으로 설정
- 절대 위치 좌표 : 요소의 X좌표와 Y좌표를 설정
- 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치 지정
- position 속성
| 키워드 | 설명 |
|---|---|
| static | 상대 위치 좌표 설정 |
| relative | 초기 위치에서 상하좌우로 이동 |
| absolute | 절대 위치 좌표 설정 |
| fixed | 화면을 기준으로 절대 위치 좌표 설정 |
- left, top 속성
<!<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box {
width : 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color:red;
left:10px;
top:10px;
}
.box:nth-child(2) {
background-color:green;
left:50px;
top:50px;
}
.box:nth-child(3) {
background-color:blue;
left:90px;
top:90px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
이것저것 다 적는 기록장📚