Front-end/HTML & CSS

CSS 마스터하기: 기본 문법부터 HTML 적용법까지

프론트에서 풀스택까지 2023. 5. 25. 23:31

CSS 마스터하기: 기본 문법부터 HTML 적용법까지

CSS는 웹 페이지의 디자인을 결정하는 중요한 언어입니다. 이 글에서는 CSS의 기본적인 사용 목적, 문법과 구조, HTML에 적용하는 방법을 배우고, CSS를 이용해 텍스트를 꾸미는 방법과 CSS에서 사용하는 단위에 대해서도 살펴보겠습니다.

🎯 CSS의 사용 목적

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 꾸미기 위한 언어입니다. 색상, 레이아웃, 글꼴 등 웹 페이지의 모든 디자인 요소를 조절하는 데 사용됩니다. HTML이 웹페이지의 내용을 구성하는 데 반해, CSS는 그러한 내용이 어떻게 보일지를 결정합니다.

📚 CSS의 기본 문법과 구조

CSS는 '선택자(selector)'와 '선언 블록(declaration block)'로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언 블록은 중괄호 안에 세미콜론으로 구분된 여러 '선언(declarations)'을 포함합니다.

/* CSS 예제 */
p {
  color: red;
  font-size: 16px;
}

위의 예제에서, 'p'는 선택자로서 모든 <p> 요소에 스타일을 적용하라는 것을 나타냅니다. 'color: red;'와 'font-size: 16px;'는 선언이며, 각각 텍스트 색상과 폰트 크기를 지정합니다.

🔗 CSS를 HTML에 적용하는 방법

CSS는 세 가지 방식으로 HTML에 적용할 수 있습니다: '인라인 스타일', '내부 스타일 시트', 그리고 '외부 스타일 시트'.

인라인 스타일

인라인 스타일은 HTML 태그 내부에 직접 적용합니다. 'style' 속성을 사용하여 적용할 수 있습니다.

/* 인라인 스타일 예제 */
<p style="color: red;">이것은 빨간색 텍스트입니다.</p>
/* 인라인 스타일 예제 */

이것은 빨간색 텍스트입니다.

위의 예제에서, 'style' 속성을 이용해 <p> 요소의 텍스트 색상을 빨간색으로 지정했습니다.

내부 스타일 시트

내부 스타일 시트는 HTML 문서의 <head> 부분에 <style> 태그를 이용해 작성합니다.

/* 내부 스타일 시트 예제 */
<style>
p {
  color: red;
}
</style>

위의 예제에서, 모든 <p> 요소의 텍스트 색상을 빨간색으로 지정했습니다.

외부 스타일 시트

외부 스타일 시트는 CSS 코드를 별도의 .css 파일로 작성하고, HTML 문서의 <head> 부분에서 <link> 태그를 이용해 해당 CSS 파일을 연결합니다.

/* 외부 스타일 시트 연결 예제 */
<link rel="stylesheet" type="text/css" href="styles.css">

위의 예제에서, 'styles.css'라는 CSS 파일을 HTML 문서에 연결했습니다.

🚫 HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유

인라인 스타일이나 내부 스타일 시트는 편리할 수 있지만, 유지 보수 측면에서는 좋지 않습니다. HTML과 CSS를 분리하면, 디자인 변경 시 CSS만 수정하면 되므로 코드의 재사용성과 유지 보수성이 향상됩니다.

🖍 CSS를 이용해 텍스트를 꾸미는 방법

CSS를 이용하면 텍스트 색상, 글꼴, 크기, 줄 간격 등 다양한 방법으로 텍스트를 꾸밀 수 있습니다.

/* 텍스트 꾸미기 예제 */
p {
  color: blue;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

위의 예제에서, <p> 요소의 텍스트를 파란색으로 바꾸고, 글꼴을 Arial 또는 sans-serif로 설정하였습니다. 또한 텍스트 크기는 20px, 줄 간격은 1.5로 설정하였습니다.

📏 CSS에서 쓰이는 단위

CSS에서는 여러 가지 단위를 사용하여 크기, 거리, 색상 등을 정의합니다. px, em, rem, % 등의 단위가 있습니다. 각 단위가 적합한 경우를 구분하는 것이 중요합니다.

px

px(pixel)은 픽셀 단위로, 화면의 물리적인 픽셀을 기준으로 합니다. 대부분의 디자인 요소의 크기를 지정할 때 사용됩니다.

em

em은 현재 요소의 폰트 크기를 기준으로 하는 상대적인 단위입니다. 예를 들어, 요소의 폰트 크기가 16px이고, margin을 2em으로 설정하면, margin의 크기는 32px이 됩니다.

rem

rem은 HTML의 루트 요소의 폰트 크기를 기준으로 하는 상대적인 단위입니다. 이는 모든 요소에서 일관된 크기를 유지하려는 경우 유용합니다.

%

%는 부모 요소의 크기에 대한 비율을 나타내는 단위입니다. 이는 반응형 디자인에 유용하게 사용됩니다.

🔍 CSS 속성 검색하기

CSS 속성을 알고 싶을 때, MDN 또는 W3Schools 같은 레퍼런스 사이트를 이용하면 됩니다. 이 사이트들은 다양한 CSS 속성과 그 사용법, 예제를 제공합니다.

이 글을 통해 CSS의 기본적인 사용법과 HTML에 적용하는 방법을 이해하셨길 바랍니다. 계속해서 공부하시면서 CSS 마스터가 되시길 기원합니다! 🙌

참고자료

  1. MDN Web Docs
  2. W3Schools

HTML 및 CSS 코드 예제와 설명은 MDN Web Docs와 W3Schools를 참조하였습니다. 이는 웹 개발에 있어서 가장 신뢰할 수 있는 리소스 중 하나이며, 초보자부터 전문가까지 모든 수준의 웹 개발자들이 사용합니다. 그럼, 즐거운 코딩 되세요! 👋