HTML, CSS

css 기본

9tun 2025. 6. 8. 22:12

스타일

HTML 문서에서 자주 사용하는 글꼴, 색상, 정렬, 배치 방식 등 문서의 시각적 스타일을 결정짓는 속성을 의미한다.

 

스타일이 왜 따로 있나?

웹 문서는 다음과 같이 구성된다:

  • HTML: 웹 페이지의 구조와 내용을 담당
  • CSS: 웹 페이지의 디자인과 스타일을 정의

 

👨‍🏫 장점

HTML로 작성한 내용은 그대로 두고, 대상 기기에 맞게 CSS만 바꿔주면 된다!

 

✅ 반응형 웹 디자인

사용자의 접속 기기나 화면 크기에 따라
웹 페이지의 레이아웃과 요소들이 자동으로 조정되는 디자인 방식입니다.

 

스타일 형식

선택자{

    속성1: 속성값1;

    속성2: 속성값2;

}

/* CSS 주석은 이렇게 씁니다. */
p{
	text-align: center;	/* 텍스트 정렬: 중앙 */
    color: blue;		/* 글자색: 파랑 */
}

 

👨‍🏫 CSS 코드 경량화

CSS 코드는 네트워크를 이용해 파일로 내려받으므로 파일 크기가 작을수록 좋습니다.

줄 바꿈, 공백 등을 최대한 제거해서 사용합니다. CSS 코드 파일 크기를 줄여주는 다양한 툴이 있습니다. 

cssminifier.com: https://www.toptal.com/developers/cssminifier

 

스타일 시트

여러 스타일 규칙(CSS)을 한 곳에 모아 정리한 문서나 코드 블록입니다.
이를 통해 웹 문서의 디자인을 일관되게 적용하고 관리할 수 있습니다.

 

브라우저 기본 스타일

CSS를 사용하지 않더라도 웹 브라우저가 자동으로 적용하는 기본 디자인 규칙을 말합니다.

 

예를 들어서, <h1> 제목은 크게 표시되고, <p> 본문은 제목보다 작게 표시되는 것입니다.

 

인라인 스타일

HTML 태그 안에 style 속성을 사용해 간단한 스타일을 직접 지정하는 방식입니다.

<p style="color: red; font-size: 18px;">안녕하세요</p>

 

 

내부 스타일 시트

웹 문서 안에서 사용할 스타일을 같은 HTML 문서의 <head> 안에 <style> 태그로 정리한 것을 말합니다.

 

📌 특징 요약

  • 한 문서 안에서만 유효
  • <style> 태그는 반드시 <head> 내부에 위치
  • 빠르게 적용하고 확인할 수 있지만, 재사용성은 떨어짐
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  
  <!-- 내부 스타일 시트  -->
  <style>
    h1{
      padding:10px;
      background-color: #222;
      color: #fff;
    }
    p{
      padding:10px;
      background-color: #222;
      color: #fff;
    }
  </style>
  
</head>

 

 

외부 스타일 시트

여러 웹 문서에서 공통으로 사용할 스타일을 별도의 .css 파일로 저장해 두고,

필요할 때마다 HTML 문서에서 불러와 사용하는 방식입니다.

 

📌 특징 요약

  • .css 파일로 작성
  • <link rel="stylesheet" href="style.css"> 형태로 연결
  • 유지보수와 재사용에 가장 적합한 방식
h1{
    padding: 10px;
    background-color: #222;
    color:#fff;
}

 

<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <!-- 외부 스타일 시트 파일 연결하기 -->
  <link rel="stylesheet" href="css/style.css"> 
  <!-- rel은 relationship(관계)를 뜻함 -->
</head>

 

CSS 기본 선택자

웹 문서에서 어떤 요소에 스타일을 적용할지 지정하는 역할을 합니다.

 

전체 선택자

웹 문서의 모든 요소에 스타일을 한 번에 적용할 때 사용하는 선택자입니다.

 

✅ 마진, 패딩

웹 문서 내용을 창에 바짝 붙지 않도록 하기 위해 두는 여백

 

전체 선택자를 이용해서 마진을 줘보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  
  <!-- 전체 선택자를 사용해 마진, 패딩 초기화하기 -->
  <style>
    *{
      margin: 0;
    }
  </style>
  
</head>
<body>
  <img src="images/cat.jpg">
</body>
</html>

 

🙋‍♂️ 태그와 요소는 뭐가 다른가요?

태그는 HTML에서 구조를 정의하는 기호입니다. 

요소는 태그 + 내용 + 종료태그까지 포함한 전체 구조입니다.

항목 예시 설명
태그 <p> 마크업을 위한 명령어 형태
요소 <p>Hello</p> 태그로 이루어진 구조 전체

 

타입 선택자

HTML의 특정 태그 이름을 가진 모든 요소에 스타일을 적용할 때 사용합니다.

HTML의 태그 이름 자체를 선택하여 해당 태그에 스타일을 적용하는 선택자입니다.

  <style>
    P{
      /* p를 사용하는 태그의 font를 이탤릭체로 설정 */
      font-style: italic;
    }
  </style>

 

클래스 선택자

HTML 요소에 class 속성을 부여하고,
CSS에서 .(점) 기호로 해당 클래스를 선택하여 스타일을 적용하는 방식입니다.

 

같은 태그라도 일부 요소에만 다른 스타일을 적용할 때 사용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  
  <style>
    p {
      font-style: italic;  /* 이탤릭체 */
    }
    .accent {
      border:1px solid #000;  /* 테두리 */
      padding:5px;  /* 테두리와 내용 사이의 여백 */
    }
    .bg {
      background-color:#ddd;    /* 배경색 */  
    }
  </style>
  
</head>
<body>
  <div>
    <!-- h1 태그에 .accent 스타일과 .bg 스타일 적용하기 -->
    <h1 class="accent bg">레드향</h1>
    
    <!-- '레드향' 텍스트에 .accent 스타일 적용하기 -->
    <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
    
  </div>
</body>
</html>

 

id 선택자

HTML 요소에 고유한 ID를 부여하고,
CSS에서 # 기호를 사용해 해당 요소를 선택하여 스타일을 적용하는 방법입니다.

 

클래스 선택자는 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 한 번만 적용할 수 있다.

  <style>
    #container {
      width:500px;  /* 너비 */
      margin:10px auto;  /* 바깥 여백 */
      padding:10px;  /* 테두리와 내용 사이 여백 */ 
      border:1px solid #000;  /* 테두리 */
    }    
  </style>
  
  <div id="container">

 

같은 스타일 사용하는 요소 묶기

아래와 같이 같은 스타일을 사용하는 요소는...

h1{
  text-align: center;
}
p{
  text-align: center;
}

콤마를 이용해서 이렇게 묶을 수 있습니다.

h1, p{
  text-align: center;
}

 

케스케이딩 스타일 시트

 

케스케이딩 의미

CSS: Cascading Style Sheet

스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용됩니다.

 

CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위를 결정합니다.

 

✅ 스타일이 충돌되지 않게 하려면 다음 2가지 원칙을 지켜야 합니다.

  • 스타일 우선순위
    스타일 규칙의 중요도와 적용범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일 적용

  • 스타일 상속
    태그 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 위에서 아래로 전달합니다.

스타일 우선순위

우선순위는 다음 3가지 개념에 따라 지정됩니다.

 

스타일 우선 순위

 

  1. 사용자 정의 스타일 (User Styles)
    → 사용자가 직접 설정한 스타일 (브라우저 설정 등)
    → 예: 브라우저 접근성 설정 등
  2. 제작자 스타일 (Author Styles)
    → 우리가 CSS로 작성하는 대부분의 스타일
  3. 브라우저 기본 스타일 (User-Agent Styles)
    → 브라우저가 제공하는 기본 스타일

 

만약 위 스타일이 서로 상충한다면, 우선순위가 높은 스타일이 적용됩니다.

 

스타일 적용 범위

스타일 적용 범위가 좁을수록 우선순위가 높아집니다.

  1. !important
  2. 인라인 스타일 (style="...")
  3. ID 선택자 (#id)
  4. 클래스 / 속성 / 가상 클래스 (.class, [type="text"], :hover 등)
  5. 타입 선택자 (div, p 등)
  6. 전체 선택자 (*)
  7. 브라우저 기본 스타일 (user-agent stylesheet)

소스 코드 작성 순서

나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

 

🎯 핵심원칙

  • 명시도(Specificity)가 높을수록 우선
  • 선언 위치가 뒤일수록 우선 (동일 명시도일 경우)
  • !important가 붙으면 무조건 최우선 (단, 동일 조건 내에서 우선순위 비교됨)

스타일 상속

태그끼리는 서로 포함관계에 있죠.

  • 부모 요소: 포함하는 태그
  • 자식 요소: 포함된 태그

✅ 스타일 상속

자식 요소에 스타일을 별도로 지정하지 않으면 부모 요소의 스타일 속성이 자식 요소로 전달됩니다.

 

끝

'HTML, CSS' 카테고리의 다른 글

텍스트를 표현하는 다양한 스타일  (0) 2025.06.11
입력 양식  (0) 2025.06.03
웹 문서에 다양한 내용 입력하기  (0) 2025.01.12
시맨틱 태그란?  (0) 2025.01.12
HTML 구조  (0) 2025.01.12

'HTML, CSS'의 다른글

  • 현재글css 기본

관련글

티스토리툴바