초보 블로거가 반드시 알아야 할 CSS 사용법과 가장 많이 사용하는 CSS 코드

CSS 코드는 워드프레스나 티스토리에서 블로그를 운영하는 분들이라면 한 번쯤 사용해 보셨을 텐데요. 어렵지 않음에도 불구하고 사용을 꺼리는 분들이 많습니다. 이 글에서는 초보 블로거가 반드시 알아야 할 CSS 사용법과 가장 많이 사용하는 CSS 코드에 대해 알아보겠습니다.

초보 블로거가 반드시 알아야 할 CSS 사용법과 가장 많이 사용하는 CSS 코드

목차 숨기기

초보 블로거가 반드시 알아야 할 CSS 사용법과 가장 많이 사용하는 CSS 코드

1. CSS란?

2. CSS 작성 방법

① 인라인 스타일(In-line Style)

② 내부 스타일 시트(Internal Style Sheet)

③외부 스타일 시트(External Style Sheet)

3. CSS 문법

1. CSS란?

CSS는 “Cascading Style Sheets”의 약자로, HTML 요소의 스타일을 지정하는 언어입니다. CSS는 웹 페이지의 레이아웃, 색상, 글꼴, 여백, 테두리 등을 제어하여 웹 페이지의 시각적인 표현을 개선하기 위해 사용하며, HTML 내에 직접 작성하거나, 별도의 .css 파일로 작성할 수 있습니다.

2. CSS 작성 방법

CSS를 작성하는 방법에는 대표적으로 3가지가 있으며 하나씩 알아보도록 하겠습니다.

① 인라인 스타일(In-line Style)

HTML 요소의 style 속성에 직접 스타일을 지정하는 방식입니다.

<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>

② 내부 스타일 시트(Internal Style Sheet)

HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 스타일을 지정하는 방식입니다.

<html>
<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

③외부 스타일 시트(External Style Sheet)

별도의 .css 파일을 생성하여 HTML 문서에 링크하는 방식입니다.

styles.css 파일

h1 {
    color: blue;
    font-size: 24px;
}

HTML 파일

<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

3. CSS 문법

CSS는 다음과 같은 구조로 작성됩니다.

선택자 {
    속성: 값;
    속성: 값;
    ...
}

선택자(Selector): 스타일을 적용할 HTML 요소를 선택합니다.
속성(Property): 스타일을 지정할 속성을 나타냅니다.
값(Value): 해당 속성에 적용할 구체적인 값을 나타냅니다.

주요 선택자

CSS에서 ‘선택자’는 웹 페이지의 특정 부분을 가리키고 스타일을 지정하는 방법을 말합니다. 쉽게 말해, 특정한 요소를 찾아서 꾸며주기 위한 표시라고 생각하면 되는데요. 주요 선택자는 크게 6가지로 구분할 수 있습니다.

① 기본 선택자

HTML 요소 이름을 사용하여 선택합니다.

h1 {
    color: blue;
}

② 클래스 선택자

HTML 요소의 class 속성을 사용하여 선택합니다. 클래스 이름 앞에 .을 붙입니다.

.highlight {
    background-color: yellow;
}

<p class="highlight">This is highlighted text.</p>

③ 아이디 선택자

HTML 요소의 id 속성을 사용하여 선택합니다. 아이디 이름 앞에 #을 붙입니다.

#header {
    background-color: lightgray;
}

<div id="header">This is the header</div>

④ 속성 선택자

HTML 요소의 특정 속성을 기준으로 선택합니다.

input[type="text"] {
    border: 2px solid blue;
}

<input type="text" name="username">
<input type="password" name="password">

⑤ 후손 선택자

특정 요소 안에 포함되는 모든 후손 요소를 선택합니다.

div p {
    color: red;
}

<div>
    <p>This is a paragraph.</p>
</div>
<p> 이 문단은 div 밖에 있기 때문에 빨간색이 적용되지 않습니다.</p>

⑥ 자식 선택자

특정 요소의 직계 자식만을 선택합니다.

ul > li {
    font-weight: bold;
}

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

4. 가장 많이 사용하는 CSS 코드

CSS 코드는 매우 다양하고 많은데요. 그 중에서 가장 자주 사용되는 CSS 코드는 아래와 같습니다.

속성	설명	사용 방법 및 예제
color	글자 색상을 지정합니다. 이 속성은 텍스트의 색상을 설정하는 데 사용됩니다.	color: red;
background-color	배경 색상을 지정합니다. 요소의 배경 색상을 설정하여 시각적 구분을 제공합니다.	background-color: blue;
font-size	글자 크기를 지정합니다. 텍스트의 크기를 픽셀(px), 포인트(pt), 백분율(%) 등으로 설정합니다.	font-size: 16px;
margin	요소의 바깥 여백을 지정합니다. 요소와 다른 요소 사이의 공간을 설정합니다.	margin: 10px 20px;
padding	요소의 안쪽 여백을 지정합니다. 콘텐츠와 요소 경계 사이의 내부 공간을 설정합니다.	padding: 10px 20px;
border	요소의 테두리를 지정합니다. 테두리의 두께, 스타일, 색상을 설정합니다.	border: 1px solid black;
width	요소의 너비를 지정합니다. 요소의 가로 길이를 픽셀(px) 또는 백분율(%)로 설정합니다.	width: 100px;
height	요소의 높이를 지정합니다. 요소의 세로 길이를 픽셀(px) 또는 백분율(%)로 설정합니다.	height: 50px;
display	요소의 표시 방법을 지정합니다. block, inline, flex 등 다양한 표시 방법을 설정할 수 있습니다.	display: block;
position	요소의 위치를 지정합니다. static, relative, absolute, fixed, sticky 등의 위치를 설정합니다.	position: absolute;
top, bottom, left, right	요소의 위치를 조정합니다. position 속성과 함께 사용하여 요소의 정확한 위치를 설정합니다.	top: 10px; left: 20px;
text-align	텍스트의 정렬 방법을 지정합니다. left, right, center, justify 등으로 텍스트 정렬을 설정합니다.	text-align: center;
flex	Flexbox 레이아웃을 설정합니다. flex 컨테이너와 자식 요소들의 배치를 설정합니다.	display: flex; justify-content: space-between;
grid	Grid 레이아웃을 설정합니다. 행과 열의 배치를 설정하고 요소들을 배치합니다.	display: grid; grid-template-columns: 1fr 1fr;
z-index	요소의 쌓임 순서를 지정합니다. 요소들이 겹칠 때 표시 순서를 설정합니다.	z-index: 10;
opacity	요소의 투명도를 지정합니다. 0(투명)부터 1(불투명)까지 설정할 수 있습니다.	opacity: 0.5;
overflow	넘치는 콘텐츠의 처리 방법을 지정합니다. hidden, scroll, auto 등으로 설정하여 넘치는 콘텐츠를 처리합니다.	overflow: hidden;
cursor	마우스 커서의 모양을 지정합니다. pointer, default, text 등 다양한 커서 모양을 설정할 수 있습니다.	cursor: pointer;
transition	애니메이션 전환 효과를 지정합니다. 요소의 상태가 변할 때 전환 효과를 설정합니다.	transition: all 0.3s ease;

오늘은 워드프레스나 티스토리에서 블로그를 운영하시는 초보 블로거가 반드시 알아야 할 CSS 사용법과 가장 많이 사용하는 CSS 코드에 대해 알아보았습니다. 블로그를 운영하다 보면 단순한 텍스트 콘텐츠만으로는 부족함을 느끼게 되는데요, 사용자의 시선을 사로잡고 편리한 사용성을 제공하기 위해서는 CSS를 활용한 스타일링이 필수적입니다. CSS 사용에 어려움을 겪고 계신 초보자분들께 이 글이 조금이나마 도움이 되길 바랍니다.