| 선택자 | 설명 | 예제 |
|---|---|---|
* | 모든 요소 선택 | * { 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;
}
}https://youtu.be/n8-wlkZiqio 1. 개요 NFS(Network File System)를 설치하고, rw/ro 및 root_squash 옵션에 따른 접근 제어와 성능을 테스트하는 방법을 정리한 가이드입니다.…
https://youtu.be/4MVxzmepY3s 1. 개요 리눅스에서 정기적으로 실행되는 작업(백업, 로그 정리, 모니터링 등)은 cron 서비스를 통해 자동화할 수 있습니다.…
https://youtu.be/vPfxWFBE1yc 1. 개요 리눅스 서버를 운영할 때 사용자 계정 생성, 비밀번호 설정, 권한 부여, 계정…
https://youtu.be/Gvp2XwBfoKw 1. 개요 리눅스 서버에서는 시스템 시간(OS 시간) 과 하드웨어 시간(RTC, Real-Time Clock) 을 동기화하는 것이 매우 중요합니다. 클러스터…
https://youtu.be/pt9qhawl8LY 1. 개요 리눅스 서버에서는 시스템 시간(OS 시간) 과 하드웨어 시간(RTC, Real-Time Clock) 을 모두 관리할 수 있습니다. 운영체제의…
https://youtu.be/iPdHGXh7DUg 1. 개요 서버 운영 시 시스템 시간이 올바르게 설정되어 있지 않으면 로그 분석, 모니터링,…