📗CSS 기초 문법

이제 CSS의 기초적인 문법에 대해 잠시 살펴보겠습니다.

(편의상, Internal CSS 방식으로 작성합니다. 🙇🏻‍♂️)

<html lang="ko">
  <head>
    <title>🔰 프리코스 | 바닐라코딩</title>
    <style>
      body {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <a>Gmail</a><a>Images</a><a>Sign in</a>
    <h1>바닐라코딩</h1>
  </body>
</html>

CSS 문법 구조

🔴 Where 대상 요소

우선 스타일을 적용하고 싶은 요소를 선택하여 명시해야만 합니다. 위의 예시에서는 body 태그를 명시하여 body 태그에게 스타일을 적용하고 싶다는 표현을 한 것입니다.

이 부분이 보통 CSS 선택자 라고 하는 부분입니다. CSS 선택자에는 태그 이름 뿐 아니라 다양한 표현구문을 사용할 수 있고, 조금 더 시간이 지난 후 CSS 선택자 문법에 대해 이야기를 나눠볼 예정입니다.

🟢 What 적용하고 싶은 스타일 종류

이 부분은 어떤 종류의 스타일을 적용하고 싶은지 명시하는 부분입니다. 예를 들어, 배경색깔을 바꾸고 싶은지, 폰트 색깔을 변경하고 싶은지, 혹은 텍스트 나열 방식을 변경하고 싶은지 등을 작성합니다.

🟠 How 변경을 원하는 내용

배경색깔이라면 검은색으로 바꾸고 싶은지, 노랑색으로 바꾸고 싶은지 등을 명시하고, 폰트 색깔이나 크기라면 어떤 색깔로 얼마나 크게 하고 싶은지 등을 명시하는 자리입니다.

종합적으로,

body {
  text-align: right;
}

위 구문은 body 태그 내부에 있는 모든 텍스트 컨텐츠를 우측으로 나열하라 라는 의미를 지닌 코드입니다.

PreviousCSS 작성 방식 NextGoogle Header 꾸미기 2

Last updated 3 months ago