| 선택자 | 설명 | 예제 |
|---|---|---|
* | 모든 요소 선택 | * { margin: 0; } |
태그명 | 특정 태그 선택 | p { color: red; } |
.클래스명 | 클래스 선택 | .text { font-size: 20px; } |
#아이디명 | ID 선택 | #main { background-color: gray; } |
h1 { color: blue; } /* 태그 선택자 */
.text { color: green; } /* 클래스 선택자 */
#main { font-size: 24px; } /* ID 선택자 */<h1>제목</h1>
<p class="text">이것은 클래스 스타일이 적용된 문장입니다.</p>
<p id="main">이것은 ID 스타일이 적용된 문장입니다.</p>| 선택자 | 설명 | 예제 |
|---|---|---|
A B | A 안에 있는 B 선택 | div p { color: red; } |
A > B | A의 직계 자식 B 선택 | div > p { font-weight: bold; } |
A + B | A 바로 다음 형제 B 선택 | h1 + p { color: blue; } |
div p { color: red; } /* div 내부의 모든 p 태그 */
div > p { font-size: 18px; } /* div의 직계 자식 p */
h1 + p { font-style: italic; } /* h1 바로 다음 p */<div>
<p>이것은 빨간색입니다.</p> <!-- div 내부 -->
</div>
<h1>제목</h1>
<p>이것은 기울임 글씨입니다.</p> <!-- h1 바로 다음 p -->| 속성 | 설명 | 예제 |
|---|---|---|
color | 글자 색상 | color: red; |
font-size | 글자 크기 | font-size: 20px; |
font-weight | 글자 굵기 | font-weight: bold; |
text-align | 정렬 | text-align: center; |
line-height | 줄 간격 | line-height: 1.5; |
p {
color: blue;
font-size: 16px;
text-align: center;
}margin, border, padding, width, height로 구성됩니다. width (너비)height (높이)padding (안쪽 여백)border (테두리)margin (바깥 여백)┌─────────────────────────────┐
│ margin │
│ ┌───────────────────────┐ │
│ │ border │ │
│ │ ┌─────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}<div class="box">박스 모델 예제</div>| 속성 | 설명 | 예제 |
|---|---|---|
background-color | 배경 색상 | background-color: yellow; |
border | 테두리 설정 | border: 2px solid black; |
border-radius | 모서리 둥글게 | border-radius: 10px; |
.container {
background-color: lightgray;
border: 2px dashed red;
border-radius: 10px;
}| 속성 | 설명 | 예제 |
|---|---|---|
display | 요소 표시 방식 | display: flex; |
position | 위치 지정 | position: absolute; |
float | 요소 띄우기 | float: right; |
.container {
display: flex;
justify-content: center;
align-items: center;
}/* 브라우저 너비가 600px 이하일 때 배경색이 바뀜 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}1. 개요 본 글은 LVM의 스냅샷(snapshot) 기능으로 복구 지점 생성 → 파일 변경 → 스냅샷 병합(rollback) 과정을 실습합니다. 동일한…
https://youtu.be/ZcxB7akkDKs 1. 개요 두 개의 디스크(/dev/vdb, /dev/vdc)로 LVM을 구성하고, ext4·XFS 파일시스템 생성 → 마운트 → VG/LV 확장 → ext4 축소(오프라인)까지 전체…
https://youtu.be/XYBR1ZFrV9s 1. 개요 parted를 사용해 새 디스크에 GPT 라벨 생성 → 파티션 생성(ext4/XFS) → 포맷/마운트 →…
https://youtu.be/yYV8RQKCFzA 1. 개요 이 문서는 fdisk를 사용해 MBR(DOS) 디스크에 파티션을 생성하고, ext4/XFS 파일시스템을 포맷·마운트, /etc/fstab에 등록했다가, 안전하게 해제·삭제하는 전…
1. 개요 Linux에서 디스크 파티션 스타일은 MBR(Master Boot Record) 와 GPT(GUID Partition Table)에 대해 설명합니다. 2. MBR이란? 디스크…
https://youtu.be/CNd1bJV4wGY 1. 개요 Windows Server를 새로 설치할 때의 설치 과정을 단계별로 정리하였습니다. Windows Server 설치…