안녕하세요 찐망고입니다.
CSS의 너무 기초적인 부분을 포스팅하려고 합니다.
CSS(Cascading Style Sheet)란 웹 페이지의 겉모습을 정의하고 꾸미는 데 사용되는 스타일 시트 언어인데요.
주요 기능은 다음과 같습니다:
- 레이아웃 정의: 페이지의 구조와 배치를 지정합니다.
- 스타일 설정: 텍스트의 글꼴, 색상, 크기 등을 지정합니다.
- 디자인: 배경, 테두리, 여백 등을 설정하여 페이지의 시각적 디자인을 조정합니다.
- 반응형 디자인: 다양한 장치(데스크톱, 태블릿, 스마트폰 등)에 맞게 레이아웃과 스타일을 조정합니다.
CSS는 기본적으로 선택자(Selector)와 선언(Declaration)으로 구성되며,
선언은 속성(Property)과 값(Value)으로 이루어집니다.
h1 {
color: blue;
}
CSS를 HTML 문서에 적용하는 세 가지 방법
1. 인라인 스타일 (Inline Style)
HTML 요소에 직접 CSS를 작성하는 방법입니다.
<p style="color: blue; font-size: 20px">이 문단은 파란색이로 글꼴 크기는 20px입니다.</p>
2. 내부 스타일 시트 (Internal Style Sheet)
HTML 문서의 <head> 요소에 <style> 요소를 사용하여 CSS를 작성합니다.
<head>
<style>
p {
background-color: tomato;
}
</style>
</head>
<body>
<p>문단의 배경색이 토마토색으로 바뀝니다.</p>
</body>
3. 외부 스타일 시트 (External Style Sheet)
별도의. css 파일에 CSS를 작성하고 HTML 문서에서 링크를 통해 불러옵니다.
여러 HTML 문서에 동일한 스타일 시트를 공유할 때 사용합니다.
내부스타일시트 위치에 따라 외부 스타일로 연결된 CSS가 수정될 수 있습니다.
<head>
<!-- 내부 스타일 시트 -->
<style>
p { background-color: tomato; }
<sytle>
<!-- 외부스타일시트 -->
<link rel="stylesheet" href="css파일경로">
<!-- 내부 스타일 시트 -->
<style>
p { background-color: tomato; }
<sytle>
</head>
RESET.CSS
마크업 퍼블리싱하면서 가장 중요한 부분 중 하나는 크로스 브라우징인데.. 각 브라우저마다 html요소가 보이는 부분이 조금씩 다르다 보니...(안녕 ie? 니 얘기야 ios너도... 인마) html의 각 요소를
uiweb.tistory.com
장단점 비교
인라인 스타일
- 장점: 특정 요소에 빠르게 스타일을 적용할 수 있습니다.
- 단점: 유지보수가 어렵고, 코드의 가독성이 떨어집니다.
내부 스타일 시트
- 장점: 단일 HTML 문서에 여러 스타일을 적용하기 편리합니다.
- 단점: 여러 HTML 문서에 동일한 스타일을 적용하기 어렵습니다.
외부 스타일 시트
- 장점: 여러 HTML 문서에 동일한 스타일을 쉽게 적용할 수 있으며, 유지보수가 용이합니다.
- 단점: 추가 파일 요청으로 인해 초기 로딩 시간이 길어질 수 있습니다.
일반적으로 유지보수와 재사용성을 고려할 때, 외부 스타일 시트를 사용하는 것이 가장 권장됩니다.
'WEB > CSS' 카테고리의 다른 글
| 스크롤 시 텍스트에 그라디언트 배경색 채우기 효과 구현 (0) | 2024.08.08 |
|---|---|
| CSS 그라디언트 transition 적용 방법 (0) | 2024.08.05 |
| CSS clip-path로 사다리꼴 링크 선택 영역 만들기 (0) | 2024.05.20 |
| 초보자를 위한 CSS :where() 셀렉터 가이드: 쉽고 빠르게 배우기 (0) | 2024.05.17 |
| CSS의 :is() 클래스 활용하기 (0) | 2024.05.15 |