티스토리 뷰

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' 카테고리의 다른 글

💡 Flex box  (0) 2020.11.06
Position  (0) 2020.11.06
Float  (0) 2020.11.05
🗃 Box Property - display  (1) 2020.11.05
🎁 CSS에서의 Box Model ?  (0) 2020.11.04
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
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 31
글 보관함