[CSS] 개요

Notice

Recent Posts

Recent Comments

Link

Tags more

Archives

Today

Total

관리 메뉴

Hello Ocean! 🌼

[CSS] 개요 본문

Web

[CSS] 개요

bba_dda 2020. 12. 17. 21:29

CSS?

Cascading Style Sheets의 약자로,

HTML에서 웹 페이지를 꾸미는 부분을 정의하는 스타일 시트 언어이며,

웹 페이지를 시각적으로 꾸밀 수 있게 해준다.

HTML4부터 모든 서식 설정을 HTML 문서로부터 분리할 수 있게 되었다.

사용하는 이유?

HTML을 이용해 웹 페이지를 만들 때, 각 세부 요소의 스타일을 일일이 따로 지정해주어야 하는데,

이렇게 하면 시간이 오래걸리는 것 뿐만 아니라, 추후 수정 및 유지보수도 번거롭다.

따라서 웹 페이지의 스타일을 별도의 파일로 분리하여 이용할 수 있게 해주어 편리하다.

사용법

CSS를 사용하는 방법은 3가지이며, 문법은 동일하게 적용된다.

1. HTML 태그의 style 속성

<h1 style="color:green"> This is heading </h1>

2. HTML문서 내의 <style> 태그

태그는 주로태그 내에 사용한다.
type부분은 없어도 되지만, 더 정확한 표현을 위해 쓰기도 한다.

<html> 
<head> 
    <style type="heading/css"> 
    .my-heading{color:green} 
    </style> 
</head> 
<body> 
    <h1 class="my-heading"> This is heading </h1> 
</body> 
</html>

3. css 파일

위에서 html 파일 내에 작성한 css를 별도의 파일로 분리한다.

.my-heading{color:green}

1,2번의 경우 HTML 문서내에 사용하기 때문에 간단한 경우나, html문서 하나만을 작성할 때 적합하다.
하지만 style태그가 길어지거나, 여러 html 문서에 같은 스타일을 적용하고 싶을 때는 분리하는 것이 좋다.

주석

참고자료

ofcourse.kr/css-course/CSS-%EC%9E%85%EB%AC%B8

CSS 입문 - ofcourse

개요 Cascading Style Sheets HTML 입문 강의에서 HTML을 웹 사이트에서 화면에 표시되는 정보를 약속 한 것이라고 했는데요, CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할

ofcourse.kr

www.tcpschool.com/css/css_intro_syntax

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

nm817.tistory.com/15

'Web' 카테고리의 다른 글

[Postman] request속 cookie undefined error 해결 (0)	2021.08.27
[VanillaJS] 객체 정렬 어떻게 하지? (feat. 문자열) (0)	2021.08.23
[nodejs-react]Server-Client 통신 시 무한 호출 해결 (0)	2021.03.01
[Node.js] 서버 생성 (0)	2021.01.26
[JavaScript] 개발 환경 구축 (0)	2020.12.28

'Web' Related Articles

Hello Ocean! 🌼

[CSS] 개요 본문

[CSS] 개요

CSS?

사용하는 이유?

사용법

주석

참고자료

'Web' 카테고리의 다른 글

티스토리툴바