티스토리 뷰

CSS

💡 CSS 란 무엇일까?

baegofda_ 2020. 11. 4. 15:28

✨ CSS - Cascading Style Sheet

    - HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트언어입니다.

HTML로 문서의 골격을 잡는다면 CSS는 이 문서를 꾸며주는 화장의 역할을 합니다.

글꼴, 배경색, 크기, 위치 등을 변경할 수 있도록해줍니다.

1. 기본구조

selector {
	property : value;
	/* declare */
}

 

2. 사용법

    - External, Internal, In-line 처럼 3가지의 방법이 있습니다.

    1. External CSS

        - css파일을 따로 작성하여 link & @import 등의 방식으로 사용하는 방식입니다.

        - 여러 문서의 css 작업에 대하여 작업이 용이합니다.

        - 가장 표준이되고 많이 사용되는 방식입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body></body>
</html>

    2. Internal CSS

        - 한 HTML 문서의 <head></head> 내에 <style></style>을 선언하여 사용하는 방식입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <style>
            selector {
	        property : value;
	        /* declare */
            }
        </style>
    </head>
    <body></body>
</html>

    3. Inline CSS

        - HTML 문서의 tag 내에 사용하는 방식입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
    </head>
    <body>
    	<div style="color:red; font-size:20px">
            안녕하세요.
        </div>
    </body>
</html>
저작자표시

'CSS' 카테고리의 다른 글

🗃 Box Property - display  (0) 2020.11.05
🎁 CSS에서의 Box Model ?  (0) 2020.11.04
[HTML/CSS] Custom Properties  (0) 2020.08.06
[HTML/CSS] Transition  (0) 2020.08.02
[HTML/CSS] background  (0) 2020.08.02
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/06   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
글 보관함