[CSS] CSS 선택자, CSS 속성, 반응형 웹 디자인

by



CSS 선택자(Selector)

  • 선택자는 CSS에서 스타일을 적용할 요소를 지정하는 역할을 합니다.



1. 기본 선택자

선택자설명예제
*모든 요소 선택* { 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>



2. 복합 선택자

선택자설명예제
A BA 안에 있는 B 선택div p { color: red; }
A > BA의 직계 자식 B 선택div > p { font-weight: bold; }
A + BA 바로 다음 형제 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 -->


CSS 속성 (Property)

  • CSS는 다양한 속성을 제공하며, 대표적인 속성은 다음과 같습니다.


1. 글꼴 및 텍스트 스타일

속성설명예제
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;
}



2. 박스 모델 (Box Model)

  • CSS에서 모든 요소는 박스 모델을 따릅니다.
  • 박스 모델은 margin, border, padding, width, height로 구성됩니다.
    1. width (너비)
    2. height (높이)
    3. padding (안쪽 여백)
    4. border (테두리)
    5. margin (바깥 여백)


┌─────────────────────────────┐
│           margin            │
│  ┌───────────────────────┐  │
│  │        border         │  │
│  │  ┌─────────────────┐  │  │
│  │  │     padding     │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘


.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}


<div class="box">박스 모델 예제</div>



3. 배경 및 테두리

속성설명예제
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;
}



4. 레이아웃

속성설명예제
display요소 표시 방식display: flex;
position위치 지정position: absolute;
float요소 띄우기float: right;


.container {
    display: flex;
    justify-content: center;
    align-items: center;
}


반응형 웹 디자인 (Responsive Web)



1. 미디어 쿼리(Media Query)

  • 미디어 쿼리를 사용하면 화면 크기에 따라 스타일을 다르게 적용할 수 있습니다.


/* 브라우저 너비가 600px 이하일 때 배경색이 바뀜 */

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}


Leave a Comment