HTML, CSS, JavaScript

[CSS] CSS의 기본

BGK97 2025. 1. 14. 18:23

CSS란

Cascading Style Sheet의 약자로, 웹 문서에서 글꼴, 색상, 정렬 등 각 요소의 배치나 디자인을 담당하는 역할을 맡는다. 반응형 웹앱, 미디어 쿼리 등 동적인 디자인부터 기본 틀까지 모든 디자인을 구성할 때 사용하는 기술이다.

스타일과 스타일 시트

스타일 형식(규칙)

  • CSS는 기본적으로 한 줄이 하나의 스타일에 해당
  • 선택자 { 속성 : 속성 값; } 의 형태로 구성, 이를 스타일 규칙이라 부름
.selector {
	text-align: center;
    color: blue;
}

스타일 시트

  • 웹 문서 안에서 스타일 규칙을 한 눈에 확인하고 필요할 때 수정하기 쉽도록 한 군데 묶어 놓은 것, css 파일 등
  • 크게 브라우저 기본 스타일, 사용자 스타일로 구성되어있음
  • 사용자 스타일은 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉨

브라우저 기본 스타일

  • CSS를 사용하지 않은 웹 문서에도 기본적으로 스타일이 적용되어 있음
  • 예시로, h1태그는 다른 스타일 없이 텍스트가 굵고, 크게 표시

인라인 스타일

  • 간단한 스타일 정보를 적용할 때 사용
  • 태그에 style 속성을 적용하여 "속성 : 속성 값" 형태로 변경
<p style="color: blue">하이</p>

내부 스타일 시트

  • 스타일을 여러곳에 적용할 때 사용하는 시트
  • HTML 문서 내 <head> 태그 안에서, <style> 태그 사이에 작성하여 스타일을 적용함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css스타일 적용</title>
    <style>
        p {
            color: aqua;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>하잉</p>
</body>
</html>

외부 스타일 시트

  • 스타일의 정보를 따로 저장해놓은 것으로, 프로젝트를 수행할 때 주로 css로 따로 파일을 만들어 적용시키는 것이 외부 스타일 시트
  • <style> 태그가 아닌, <link>태그를 통해 스타일 시트를 호출함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css스타일 적용</title>
    <!-- 이곳에 link 태그 -->
    <link rel="stylesheet" href="주소">
</head>
<body>
    <p>하잉</p>
</body>
</html>

CSS의 기본 선택자

1. 전체 선택자 *

  • 스타일을 문서의 전체에 적용할 때 사용하는 선택자
  • 웹 브라우저의 기본 스타일을 초기화 시킬 때 자주 사용
* {
	margin: 0;
    	padding: 0;
}
태그와 요소의 차이점
 - 요소는 태그를 적용한 것을 가리킴, <p>예시</p> 에서 태그는 <p> 태그 자체를, 요소는 안의 내용인  "예시"를 가리킴, CSS를 적용할 때에도 p태그 자체에 적용하는 것이 아닌 p 요소에 적용하는 스타일로 표현해야함

2. 타입 선택자 (타입)

  • 특정 태그를 사용한 모든 요소에 스타일을 적용하는 선택자
  • 한번 써두면, 태그를 사용시 안의 요소에 스타일이 모두 적용됨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css스타일 적용</title>
    <style>
        p {
            color: aqua;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>하잉</p>
    <p>하이</p>
    <p>하잉2</p>
</body>
</html>
  • 해당 코드에서 하잉, 하이, 하잉2는 style에 따라 글씨 색과 정렬이 수행되어 화면에 표시

3. 클래스 선택자 .(클래스)

  • 같은 태그라도 다른 스타일을 사용하고 싶을 경우에 사용
  • 클래스 이름을 지정하여 다른 선택자와 이름을 구분하여 다른 스타일을 적용할 수 있음
<p class="color">하이</p>
.color {
	color: white;
}
  • 클래스명은, 안의 요소를 고려하여 유지보수가 쉬운 이름을 선택해야함

4. 아이디 선택자 #(아이디)

  • 특정 부분에 딱 한번만 스타일을 적용할 수 있는 선택자
  • 문서의 레이아웃이나, 관련 스타일을 지정할 때, 혹은 웹 요소에 자바스크립트를 사용하며 요소를 구별할 때 사용
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css스타일 적용</title>
    <style>
      #container {
        width: 500px;
        margin: 10px auto;
        padding: 10px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <p>하잉</p>
      <p>하이</p>
      <p>하잉2</p>
    </div>
  </body>
</html>

5. 그룹 선택자 (선택자), (선택자)

  • 같은 스타일을 사용하는 선택자들을 묶어서 한번에 처리할 수 있게함
h1, p {
        color: #000;
        text-align: center;
      }

캐스케이딩 스타일 시트, CSS

  • 우선 순위가 위에서 아래로 계단식 처럼 적용된다는 의미로 사용함.
  • CSS는 우선 순위가 있는 스타일 시트로 해석할 수 있음

스타일 우선순위

  1. !important - 어떤 스타일 보다 우선적으로 적용
  2. 인라인 스타일 - 태그안에 style속성을 사용하여 해당 태그만 스타일을 적용
  3. id 스타일 - 지정한 부분에만 적용되고, 한 문서에 한 번만 적용 가능
  4. 클래스 스타일 - 웹 문서에서 지정한 부분에만 적용
  5. 타입 스타일 - 웹 문서에 사용한 특정한 태그(h1, p 등)에 스타일을 적용
  • 위에서 아래로 내려 갈수록, 우선순위가 떨어져 다른 스타일이 있을 시 적용이 안될 수 있음

스타일 상속

  • 웹 문서에서 사용하는 여러 태그는 서로 포함관계가 존재
  • 포함하는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다
<div> <!-- 부모 태그 div -->
	<!-- 자식 태그 p -->
	<p>자식</p>
    <p>자식</p>
    <p>자식</p>
</div>
  • HTML에서 사용되는 <body>태그는 웹에서 사용한 모든 태그의 부모요소
  • <body>태그에서 스타일을 지정하면 웹 문서 전체에서 스타일이 변경됨
저작자표시 비영리 동일조건