민혁이의 IT스토리

[혼자서 공부해서 개발까지] part5 - 웹 페이지 디자인의 첫걸음,CSS 기초 본문

혼자 공부해서 개발까지/CSS

[혼자서 공부해서 개발까지] part5 - 웹 페이지 디자인의 첫걸음,CSS 기초

FE_Minhyuk 2025. 2. 11. 12:00

우리는 전 시간까지 웹페이지의 만들때 필요한 HTML을 배웠습니다. HTML이 웹페이지에 뼈대를 만드는 역할을 한다고 했을 때 지금부터 우리가 공부할 CSS( Cascading Style Sheets)는 우리의 웹페이지를 예쁘게 꾸며주는 역할을 하는 친구입니다. 그럼 CSS 무엇인지 만나러 가볼까요?

 

 

목차

  • CSS란 
  • CSS 기본 문법
  • 속성과 값

 

 

CSS란 

 CSS는 웹 페이지의 스타일을 정의하는 언어입니다. HTML로 구조를 만든 후, CSS를 사용하여 텍스트 색상, 글꼴, 배치, 크기 등 웹 페이지의 시각적인 요소를 조정합니다.

 

사용 이유 : HTML만으로 웹페이지를 제작해야 할 경우, HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야 하기 때문에 많은 시간이 걸리고 완성한 후에도 스타일의 변경 및 유지보수가 힘들기 때문에 이러한 문제를 해결하기 위해 CSS를 사용하게 되습니다.

 

 

이제 우리가 왜 css를 배워야 하는지는 알았으니, 본격적으로 CSS문법을 배워보겠습니다.

 

 

CSS 기본 문법

  1. 사용방법
    CSS를 사용하는 방법은 크게 3가지가 있습니다. 
    • 인라인 스타일 (Inline CSS) :  태그 안에 style속성으로 스타일을 넣는 것을 인라인 스타일이라고 합니다
      예)  
           코드

          실행화면




    • 내부 스타일 시트 (Internal CSS) : style태그를 사용하여 html파일 안에서 사용 할 수 있습니다. 사용 위치는 head태그 안에서 선언하여 사용하는 것이 인터널 스타일  입니다.
      예)

      코드



      실행화면






    • 외부 스타일 시트 (External CSS) : 스타일을 별도의 CSS 파일로 작성하고, 그 파일을 HTML 문서에서 링크하여 사용하는 방법입니다. css파일을 불러오는 태그는 <link>태그 입니다. 링크 태그로 head태그 안에서 사용합니다.

      style.css(스타일 파일)
      HTML파일

      실행화면


  2. 선택자:  스타일을 적용할 HTML 요소를 선택합니다. 선택요소는 태그, 클래스, 아이디가 있습니다. 
    예) h1, .class-name, #id-name


    - Tag(태그) : 태그를 선택자고 사용할 때는 스타일을 변경하고 싶은 태그를 그대로 넣어서 사용하면 됩니다.

     
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .black{
      height: 100px;
      width: 100px;
      background-color: black;
    }
  </style>
  <title>Document</title>
</head>
<body>
    <div class="black"></div>
</body>
</html>



    - class(클래스)  : 클래스를 선택자로 사용할 때는 .클래스-이름{} 을 사용합니다.

     
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .red{
      height: 100px;
      width: 100px;
      background-color: red;
    }
  </style>
  <title>Document</title>
</head>
<body>
    <div class="red"></div>
</body>
</html>



    - 아이디(id): 아이디를 선택자로 사용할 때는 #아이디-이름{} 으로 사용합니다.
     
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #blue{
      height: 100px;
      width: 100px;
      background-color: blue;
    }
  </style>
  <title>Document</title>
</head>
<body>
    <div id="blue"></div>
</body>
</html>

 

속성과 값

HTML태그들은  각각에 맞는 속성들을 가지고 있습니다. 그 속성들을 프로퍼티(property)라고 하고 프로퍼티의 값들을 
value라고 합니다. 



 

 

 

마무리

오늘은 첫시간인 만큼 깊게 배우기 보다는 CSS가 어떤 언어인지, 어떻게 사용하는지에 대해서 알아보았습니다. 어려운 내용은 아니라고 생각되지만 이해가 한번 더 복습하는 것은 추천드립니다. 그럼 저희는 다음시간 부터 본격적으로 태그들의 속성과 값은 어떤 것이 있는지 확인하러 가도록하죠! 오늘도 끝까지 읽어주셔서 감사합니😊

'혼자 공부해서 개발까지 > CSS' 카테고리의 다른 글

[혼자 공부해서 개발까지]part9 - 테두리와 그림자 효과  (0) 2025.02.25
[혼자 공부해서 개발까지]part8 - 색상과 배경 설정  (0) 2025.02.21
[혼자 공부해서 개발까지]part7 - 글꼴과 텍스트 스타일링  (0) 2025.02.18
[혼자 공부해서 개발까지] part6 - 스타일의 여백과 크기 설정 &값의 단위  (0) 2025.02.15
'혼자 공부해서 개발까지/CSS' Related Articles more