CSS란?

2021. 12. 21. 15:25·CSS
반응형

<목차>

  1. css란?
  2. css의 역할
  3. css와 html의 관계

 

 

 

<CSS란?>

CSS(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로 HTML에서 주로 쓰인다. CSS는 HTML과 같은 하나의 언어다. 그리고 이 언어의 목표는 디자인하는 것에 최적화 되어있다고 볼 수 있다.

 

 

 

<CSS의 역할>

css는 기본적으로 html을 꾸며주는 역할을 한다고 보면된다.

기존에 가지고 있던 엘리먼트의 속성을 변경시켜주는 역할을 하는 것이 css이다.

예를 들면 display가 블럭인 것을 인라인으로, 인라인인 것을 블럭으로 변경하는 등 요소를 내 마음대로 조절할 수 있다. 더 나아가서 글자크기, 색상 등도 조절할 수 있다.

 

ex) <h1>엘리먼트의 속성은 블럭형태, css를 활용하여 블럭형태->인라인형태로 변경가능, 글자크기도 조절가능 

 

 

 

<CSS와 HTML의 관계>

그렇다면 html을 사용하여 웹페이지를 꾸미지 않고 css를 사용하는 이유는 무엇일까?

html을 쓰는 이유는 웹페이지 상에 어떠한 데이터를 넣고 싶을 때 데이터들 간의 구분값을 명시하기 위함이다.

즉, html은 어떠한 내용들을 꾸며주기 위해 쓰는 것이 아니다.

<header></header>
<aside></aside>
<section></section>

위의 세 코드는 <div></div>와 쓰임이 똑같다.

위와 같이 쓰는 이유는 해당 영역을 엘리먼트로 표현해주기 위함이지 기능적인 효과는 없다.

<header></header>의 경우, 명시적으로 "<header>라는 엘리먼트 안에서는 header내용을 넣을거야"라는 내용만 있을 뿐 다른 기능이 들어가 있지는 않다.

다시말해, html은 데이터의 구분을 짓기 위해 생긴 엘리먼트들이 많을 뿐 다른 기능을 가진 것은 없다.

 

다음 포스팅에서 css를 활용하여 html에서 작성된 엘리먼트들에게 스타일을 주는 방법에 대해 알아보도록 하자.

 

 

반응형

'CSS' 카테고리의 다른 글

CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child  (0) 2021.12.27
CSS skills(1) - display, float, position  (0) 2021.12.22
CSS 문법  (0) 2021.12.21
CSS(2) - width, height, margin, padding  (0) 2021.12.21
CSS (1) - CSS 적용 방법  (0) 2021.12.21
'CSS' 카테고리의 다른 글
  • CSS skills(1) - display, float, position
  • CSS 문법
  • CSS(2) - width, height, margin, padding
  • CSS (1) - CSS 적용 방법
bitkunst
bitkunst
Ever tried, Ever failed, No matter. Try again, Fail again, Fail better.
  • bitkunst
    THE DEVELOPER
    bitkunst
  • 전체
    오늘
    어제
  • bitkunst GitHub
    • 분류 전체보기 (154)
      • Setup (1)
      • HTML (7)
      • CSS (10)
      • Go (2)
      • JavaScript (14)
      • TypeScript (3)
      • Node (34)
        • Node.js (7)
        • Express (19)
        • NestJS (8)
      • React (19)
      • MySQL (6)
      • BlockChain (14)
      • Ethereum (20)
      • AWS (5)
      • Linux (2)
      • Infra (2)
        • Docker (2)
      • Testing (2)
      • ABOUT CS (11)
      • 토이 프로젝트 (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    JavaScript
    nestJS
    블록체인 지갑 서버 만들기
    Nest
    Nodejs
    css
    html
    redux
    TypeScript Blockchain
    AWS
    프론트엔드
    타입스크립트 블록 체인
    이더리움
    웹프론트엔드
    Blockchain
    웹
    타입스크립트로 블록 체인 만들기
    웹개발
    이더리움 스마트 컨트랙트
    nodejs mysql
    리액트
    Ethereum
    React
    타입스크립트로 블록체인 만들기
    AWS EC2
    블록체인
    타입스크립트 블록체인 만들기
    CSS Style
    블록체인 트랜잭션 만들기
    자바스크립트
  • 최근 댓글

  • hELLO· Designed By정상우.v4.10.1
bitkunst
CSS란?
상단으로

티스토리툴바