[WEB][CSS] CSS 기초 - CSS 선택자와 주요 기본 속성
청월누리
[WEB][CSS] CSS 기초 - CSS 선택자와 주요 기본 속성🖥️ Dev/WEB2025. 1. 31. 00:42@청월누리
Table of Contents

CSS 적용 방법

인라인 스타일 (inline style)

<p style="color: blue; font-size: 20px;">이 문장은 파란색이고, 글자 크기는 20px입니다.</p>
  • HTML 요소의 style 속성을 사용하여 개별적으로 CSS를 적용하는 방법
  • 특정 요소에만 스타일을 적용할 때 사용

인라인 스타일의 특징

  • 특정 요소에 적합한 스타일을 적용
  • 스타일을 적용하는 코드가 HTML 문서 내에 존재하기 때문에 유지보수가 어려움
  • CSS 코드가 분리되지 않아 가독성이 떨어짐

내부 스타일 (internal style)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일 예제</title>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>이 문장은 빨간색이고, 글자 크기는 18px입니다.</p>
</body>
</html>
  • HTML 문서의 <head> 태그 내부에 <style> 태그를 사용하여 CSS를 작성하는 방식
  • 특정 HTML 문서에만 적용할 스타일이 있을 때 유용

내부 스타일의 특징

  • 특정 HTML 문서에서만 스타일 적용
  • HTML과 CSS가 같은 파일에 있어 코드가 복잡해질 수 있음
  • 외부 파일을 로드할 필요가 없어 빠르게 스타일을 적용할 수 있음

외부 스타일 (external style)

CSS 파일(style.css) 생성

p {
    color: green;
    font-size: 16px;
}

HTML 문서에 외부 CSS 파일 연결

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 스타일 예제</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>이 문장은 녹색이고, 글자 크기는 16px입니다.</p>
</body>
</html>
  • .css 파일을 만들어 HTML 문서에 <link> 태그를 사용하여 불러오는 방법
  • 가장 많이 사용되는 방식이며, 유지보수와 확장성이 뛰어남

외부 스타일의 특징

  • 여러 HTML 파일에서 동일한 CSS 파일을 공유하여 사용 가능
  • HTML과 CSS가 분리되어 있어 가독성이 높고 유지보수가 쉬움
  • 웹사이트의 스타일을 일괄적으로 변경할 때 매우 효율적

CSS 선택자

기본 선택자

전체 선택자 (*)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  • 문서 내의 모든 요소를 선택
  • 일반적으로 초기화 스타일을 적용할 때 사용

태그(요소) 선택자 (element)

p {
    color: blue;
    font-size: 16px;
}
  • 특정 태그명을 가진 요소를 선택
  • 위 코드는 모든 <p> 태그에 스타일을 적용

클래스 선택자 (.class)

.warning {
    color: red;
    font-weight: bold;
}
<p class="warning">경고: 중요한 메시지입니다.</p>
  • 특정 class 속성을 가진 모든 요소를 선택
  • 여러 요소에 동일한 스타일을 적용할 때 유용

아이디 선택자 (#id)

#main-title {
    font-size: 24px;
    color: green;
}
<h1 id="main-title">제목입니다.</h1>
  • 특정 id 속성을 가진 요소를 선택
  • 한 문서 내에서 고유한 id에만 적용하는 것이 원칙 >> 하나의 HTML에는 하나의 고유한 id를 가진 요소만 존재

그룹 및 결합 선택자

그룹 선택자 (A, B)

h1, h2, p {
    color: gray;
}
  • 여러 요소를 동시에 선택하여 동일한 스타일을 적용
  • 위 코드는 <h1>, <h2>, <p> 태그에 동일한 스타일 적용

자식 선택자 (A > B)

div > p {
    color: purple;
}
<div>
    <p>이 문장은 보라색입니다.</p>
    <span>
        <p>이 문장은 영향을 받지 않습니다.</p>
    </span>
</div>
  • 특정 요소의 직계 자식만 선택
  • 위 코드는 <div> 안에 있는 직속 <p> 태그에만 스타일 적용

하위(후손) 선택자 (A B)

div p {
    color: orange;
}
<div>
    <p>이 문장은 오렌지색입니다.</p>
    <span>
        <p>이 문장도 오렌지색입니다.</p>
    </span>
</div>
  • 특정 요소의 하위 요소를 포함한 모든 자손을 선택
  • 위 코드는 <div> 안에 있는 모든 <p> 태그에 스타일 적용

인접 형제 선택자 (A + B)

h1 + p {
    font-style: italic;
}
<h1>제목입니다.</h1>
<p>이 문장은 기울어집니다.</p>
<p>이 문장은 적용되지 않습니다.</p>
  • 특정 요소 다음에 바로 위치하는 형제 요소를 선택
  • 위 코드는 <h1> 태그 바로 다음에 오는 <p> 태그에만 스타일 적용

일반 형제 선택자 (A ~ B)

h1 ~ p {
    color: blue;
}
<h1>제목입니다.</h1>
<p>이 문장은 파란색입니다.</p>
<p>이 문장도 파란색입니다.</p>
  • 특정 요소 뒤에 오는 모든 형제 요소를 선택
  • 위 코드는 <h1> 태그 이후에 나오는 모든 <p> 태그에 스타일 적용

주요 기본 속성

텍스트 관련 속성

텍스트의 스타일을 조정하는 속성

텍스트 색상

p {
    color: blue;
}
  • color 속성 : 텍스트의 색상을 지정하는 속성
  • 색상 이름, rgb 코드, 16진수 등으로 적용 가능

텍스트 크기

p {
    font-size: 20px;
}
  • font-size 속성 : 텍스트의 크기를 지정하는 속성
  • 기본 사이즈는 16px

텍스트 굵기

p {
    font-weight: bold;  /* 또는 100 ~ 900 사이 값 */
}
  • font-weight 속성 : 텍스트의 굵기를 지정하는 속성
  • 이름 값(thin, medium, bold 등) 혹은 100 ~ 900 사이의 값으로 굵기 지정 (기본값은 normal = 400)
  • thin = 100, normal = 400, medium = 500, bold = 700의 값과 동일

텍스트 정렬

p {
    text-align: center; /* left, right, center, justify */
}
  • text-align 속성 : 텍스트의 정렬 지정
  • 왼쪽 정렬 (기본 값, left), 오른쪽 정렬 (right), 가운데 정럴 (center), 양쪽 정렬 (justify)

텍스트 장식

a {
    text-decoration: none; /* underline, overline, line-through */
}
  • text-decoration 속성 : 텍스트에 밑줄, 취소선 등 추가
  • overline (텍스트 위에 줄 생성), underline (텍스트 아래 줄 생성, 밑줄), line-through (텍스트 중간에 줄 생성, 취소선), none (텍스트에 줄 없음)

줄 간격

p {
    line-height: 1.5;
}
  • line-height 속성 : 텍스트 줄 사이의 간격 조정

박스 모델 관련 속성

요소의 크기, 여백, 테두리 등을 조정하는 속성

너비와 높이

div {
    width: 200px;
    height: 100px;
}
  • width 속성 : 요소의 가로 크기 조정
  • height 속성 : 요소의 세로 크기 조정

바깥 여백

div {
    margin: 20px;
}
  • margin 속성 : 요소의 외부 여백을 설정
  • margin-top, margin-right, margin-bottom, margin-left 속성을 이용하여 개별적으로 바깥 여백을 설정할 수 있음
div {
    margin: 20px 30px;
}
  • 위 코드는 상하 20px, 좌우 30px의 바깥 여백 설정
div {
    margin: 10px, 20px, 30px, 40px;
}
  • 각 방향에 대한 바깥 여백은 개별적으로 설정할 수 있지만, 위 코드처럼 한번에 작성할 수도 있음
  • 위 코드는 margin-top: 10px, margin-right: 20px, margin-bottom: 30px, margin-left: 40px을 설정한 것과 동일한 의미

안쪽 여백

div {
    padding: 10px;
}
  • padding 속성 : 요소의 내부 여백을 설정
  • padding-top, padding-right, padding-bottom, padding-left 속성을 사용하여 개벌적으로 안쪽 여백을 설정할 수 있음
  • margin 속성과 동일하게 각 방향에 대한 안쪽 여백을 한번에 작성하는 것도 가능

테두리

div {
    border: 2px solid black;
}
  • border 속성 : 요소의 테두리를 지정
  • 속성 값은 순서대로 두께, 테두리 종류 (실선 : solid, 점선 : dotted 등), 색상

 

'🖥️ Dev > WEB' 카테고리의 다른 글

[WEB][Node.js] Node.js 설치 및 NVM을 이용한 버전 관리 (feat. nvm-windows)  (0) 2025.03.06
[WEB][JS] JavaScript 기초 - DOM 제어  (0) 2025.02.10
[WEB][JS] JavaScript 기초 - JavaScript 기본 문법  (0) 2025.02.09
[WEB][CSS] CSS 기초 - 레이아웃 관련 기본 속성  (4) 2025.02.04
[WEB][HTML] HTML 기초 - 기본 구조와 기본 태그  (0) 2025.01.29
청월누리
@청월누리 :: DevKuk 개발 블로그

since 2025.01.27. ~ 개발자를 향해....🔥

🖥️ Dev/WEB 추천 글
more
image

티스토리툴바