Multi Developer SuHo

[CSS 기초 문법 ] CSS 문법 기본 구조, 스타일 적용 방식 3가지 본문

CSS 기록

[CSS 기초 문법 ] CSS 문법 기본 구조, 스타일 적용 방식 3가지

Dreaming Developer Student 2025. 1. 3. 16:07
SMALL

안녕하세요~ 이번에는 CSS 문법과 선택자, 결합자에 대해 알아보겠습니다. 


먼저 CSS 문법입니다.
문법은 어디에서나 쓰입니다. 영어에서도 문법이 있듯이  CSS에서도 문법이 있습니다. 

CSS 에서 문법이란?

웹 페이지의 디자인을 꾸미는 CSS라는 언어를 사용할 때 지켜야 하는 규칙들을 말합니다.

CSS 문법 기본 구조 

/* 선택자 {
  속성: 값;
} */

 

보통 이런 구조로 되어 있습니다. 여기서 선택자는 선택할 요소의 이름이 올 수 있고, HTML의 태그요소가 올 수도 있습니다.  속성에는 다양한 속성들이 있고 해당 속성의 값을 지정하거나 합니다. 
 
예를 들면 이런식으로 말이죠 

CSS 문법 기본 구조 예시 
 
  a {
        display : block;
    }


" <a> 태그의 diplay 라는 속성의 값을 block 으로 지정하겠다 " 라는 뜻으로 해석하시면 됩니다. 
이런식으로 CSS를 작성하여 스타일을 적용시켜 화면에 렌더링 할 수 있습니다. 

CSS를 정의하는 방식으로는 3가지 방법이 있습니다.

1️⃣ 내부 스타일 시트 (Internal Style Sheet)
2️⃣ 외부 스타일 시트 (External Style Sheet)
3️⃣ 인라인 스타일   (Inline Style)

이런 방식들로 CSS를적용합니다. 

 

1️⃣  내부 스타일 시트입니다. 
내부 스타일 시트는 HTML 문서의 <head> 태그 안에 <style> 태그를 이용하여 스타일을 직접 작성하는 방식입니다.
말 그대로 "내부(안쪽)의 스타일을 적용한다" 라는 것입니다.  내부 스타일 시트를 적용할 때는 <style> 태그를 사용하여 HTML 문서 <head> 태그 안에다 작성되도록 되어 있습니다. 예시 코드를 보여드리면서 설명하도록 하겠습니다. 

 

  • 장점: 간단한 스타일 변경 시 유용하며, 외부 파일을 관리할 필요가 없습니다.
  • 단점: 여러 HTML 문서에서 스타일을 공유하기 어렵고, 코드가 복잡해질 수 있습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* CSS 작성 영역 */
</style>
<body>
    
</body>
</html>


이런식으로 <style> 태그 안에 작성할 수 있습니다. 


2️⃣외부 스타일 방식입니다.
외부 스타일 시트는 외부에서 스타일을 불러와 적용하는 방식입니다. 주로 외부 스타일 방식을 많이 씁니다. 그 이유는 코드가 복잡하지 않고 따로 CSS를 적용하여 코드 관리가 쉽기 때문입니다.

예시 코드를 보여드리면서 설명하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>

</style>

<body>
    
</body>
</html>

 


내부의 스타일 시트 방식과 달리 <link> 태그를 사용하여 해당하는 경로에 파일을 불러오는 방식입니다. 

  • 장점: 여러 HTML 문서에서 동일한 스타일을 공유할 수 있으며, 코드 관리가 용이합니다.
  • 단점: 초기 설정이 복잡할 수 있습니다.

 

3️⃣  인라인 스타일 시트입니다. 
인라인 스타일 시트는 많이 사용되지 않지만, 특정 요소에만 스타일을 적용하고 싶을 때만 사용하도록 권장합니다. 

<h1 style="color: blue; font-size: 24px;">이것은 파란색이고 큰 제목입니다.</h1>

 

이렇게 HTML 요소 내부의 직접 스타일 요소를 작성할 수 있습니다. 

CSS 문법, 스타일 작성 방식에 대해 알아보았습니다.  

LIST
저작자표시

'CSS 기록' 카테고리의 다른 글

[CSS 디스플레이 && 포지션 속성 ] 디스플레이 속성, 포지션  (0) 2025.01.05
[CSS 문법] 결합자 && 그 외 스타일 속성  (0) 2025.01.05
[CSS 문법 ] 선택자 사용방법, 선택자 우선순위  (0) 2025.01.04
[CSS 실습 ] HTML과 CSS를 사용하여 게시판 만들기  (0) 2025.01.03
[CSS 개념] CSS란 무엇인가❓❓❓ , CSS의 역할  (0) 2025.01.02
'CSS 기록' Related Articles more