[CSS] 개요

728x90

CSS (Cascading Style Sheet)

<head>
    <style>
        /* body 코드에 대해 스타일 적용 */
        선택자 { 
            스타일속성1 : 속성값1; 
            스타일속성2 : 속성값2; 
            ... 
        }
    </style>
</head>

<body>
    ...
</body>

- 브라우저에게 웹 사이트가 어떻게 보여져야 하는지 알려주는 언어

- Style sheet : 스타일을 관리하기 쉽도록 한 군데에 모아놓은 것

- HTML에 종속적임 (독립적으로 쓰일 수 없음)

- 선택자 : 스타일 규칙이 적용될 대상

- 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 상속함

스타일의 우선순위

- 인라인 스타일 → id 스타일 → class 스타일 → 태그 스타일

- 우선순위가 같다면 나중에 입력된 스타일이 앞 스타일을 덮어씀

# 중요 스타일 !important

- 우선순위가 동일한 스타일이 있을 때, 중요 스타일로 지정된 것이 가장 우선적으로 실행됨

<style>
	선택자 { 스타일속성 : 속성값 !important; }
</style>

내부 스타일 시트

<head>
    <style>
        선택자 { 스타일속성 : 속성값; }
    </style>
</head>

# 인라인 스타일

- 스타일 시트를 사용하지 않고 <body> 부분에 스타일을 적용할 대상에 직접 표시

<태그 style = "스타일속성 : 속성값;">

외부 스타일 시트

- 여러 웹 문서에서 사용할 스타일을 별도 css 파일로 저장해 두고, 필요할 때마다 가져와서 사용함

/* CSS 파일 */
선택자 {
    스타일속성 : 속성값;
}

/* HTML 파일 */
<head>
    <link rel = "stylesheet" href = "경로/파일명.css">
</head>

기타 메모

- 테스트용 텍스트 생성 : lorem 입력 and [Ctrl] + [Space]

320x100

저작자표시 (새창열림)

'HTML & CSS' 카테고리의 다른 글

[CSS] 가상 선택자 : 가상 클래스와 가상 요소 (0)	2023.02.05
[CSS] 선택자 (0)	2023.02.05
[HTML] 폼 태그 (0)	2023.02.05
[HTML] 멀티미디어 태그 (0)	2023.02.05
[HTML] 이미지 태그 (0)	2023.02.05