CSS 기초
2025. 9. 10. 00:32ㆍ웹 기초/css
?
- HTML문서에 스타일을 결정함.
- 하지만 HTML로 바로 하지 않고 따로 적용함.
디자인 변경에 집중
- 내용과 디자인을 HTML/CSS로 구분.
- 이로 인해서 내용을 수정하더라도 하나의 부문에만 집중하여도 수정가능!
다양한 기기에 맞는 문서 작성 가능
- 기존 CSS는 모바일, PC환경에 따라서 다르게 작동함.
- 그렇기에 CSS만 환경에 따라 수정하면 되기에 용이함!
스타일 형식
- CSS형식은 다음과 같음.
선택자 {속성1: 속성값1; 속성2: 속성값2}- 선택자 : 스타일을 어느 태그에 적용할 것인지 알려줌.
- 중괄호 사이 : 스타일 정보 삽입. 세미콜론으로 구분하여 스타일 속성을 지정.
p {
font-size: 15px; /* 글자 크기 */
color: #333333; /* 글자 색상 */
line-height: 1.5; /* 줄 간격 */
margin-bottom: 20px; /* 아래쪽 여백 */
}스타일 시트
- 스타일 규칙을 여러 개 사용하는 경우에 한 군데 묶어 놓는 것을 스타일 시트라고 함.
- 스타일 시트는 엡 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나누어짐.
- 또 사용자 스타일은 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나누어짐.
브라우저 기본 스타일
-CSS를 사용하지 않더라도 기본으로 지정되는 스타일.
인라인 스타일
-스타일 시트를 사용하지 않고 직접 적용 대상에 표시.
<p style="font-size:16px; color:#333333;">...\</p>
내부 스타일 시트
-웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리함.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>ssjjss</title> <!-- 내부 스타일 시트 적용 --> <style> p { font-size: 16px; color: #444; line-height: 1.6; margin-bottom: 15px; } </style> </head> <body> <p>sssss</p> <p>jjjjj</p> </body> </html>
외부 스타일 시트
-여러 웹 문서에서 사용하기 위해. css파일로 스타일을 저장해 놓는 형식.
-외부 스타일 시트를 연결하는 경우에는 <link> 태그를 사용함.<link rel="stylesheet" href="파일 경로">
'웹 기초 > css' 카테고리의 다른 글
| 텍스트 표현 스타일(4) (1) | 2025.09.15 |
|---|---|
| 텍스트 표현 스타일(3) (0) | 2025.09.14 |
| 텍스트 표현 스타일(2) (0) | 2025.09.14 |
| 텍스트 표현 스타일 (2) | 2025.09.14 |
| CSS 선택자 (0) | 2025.09.11 |