1. CSS (Cascading Style Sheets)
CSS는 HTML, XML 등의 마크업 언어로 작성된 문서를 꾸미는 스타일링 언어로 웹 페이지의 레이아웃, 폰트, 색상, 간격 등을 제어한다.
2. CSS 적용 방법
2.1 인라인 스타일
인라인 스타일은 HTML 태그 내의 style 속성을 사용한다.
- 우선순위가 가장 높으며 해당 요소에만 적용된다.
<p style="color: red;">This is red text.</p>This is red text.
대부분의 HTML 태그에 style 속성을 사용할 수 있지만, 몇몇 HTML 태그는 스타일 적용이 무의미하거나 제한적이다 (head, title, meta, script 등).
주의: 너무 많은 인라인 스타일은 코드가 복잡해질 수 있어 유지보수가 어렵다.
2.2 내장 스타일
한 문서 내의 모든 요소에 적용됩니다.
내장 스타일은 HTML 문서의 <head>에 <style> 태그를 사용하여 정의한다.
- 한 문서 내의 모든 요소에 적용된다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a blue text.</p>
</body>
</html>2.3 외부 스타일
외부 스타일은 외부 CSS 파일을 HTML 문서에 연결하여 사용한다.
- 한 문서 내의 모든 요소에 적용될 뿐만 아니라 여러 문서에서 재사용 가능하다.
3. CSS Style의 종류
3.1 텍스트 스타일
h1 ~ h6, p, b 등 다양한 HTML 요소에 적용된다.
p {
color: red; /* 텍스트 색상 */
font-family: "Arial", sans-serif; /* 사용 폰트 */
font-size: 16px; /* 텍스트 크기 */
font-weight: bold; /* 텍스트 두께 */
text-align: center; /* 텍스트 정렬 방식 */
text-transform: uppercase; /* 대소문자 */
line-height: 1.5; /* 줄 높이 */
letter-spacing: 1px; /* 문자 간의 간격 */
}3.2 레이아웃/박스 스타일
div {
width: 300px; /* 너비 */
height: 200px; /* 높이 */
margin: 20px; /* 외부 여백 */
padding: 30px /* 내부 여백 */
border: 1px solid black; /* 테두리 (두께, 타입, 컬러) */
background-color: green; /* 배경 색상 */
color: white; /* 텍스트 색상 */
display: flex; /* 디스플레이 타입 */
justify-content: center; /* 자식 요소들의 수평 정렬 */
align-items: center; /* 자식 요소들의 수직 정렬 */
}3.3 Display의 종류
3.3.1 display: inline
span, b, i, a 등
-
상자 크기: 콘텐츠의 너비만큼만 차지 (높이, 너비 지정 불가)
-
줄 바꿈: 없음. 다른 인라인 요소나 텍스트와 같은 줄에 위치
-
용도: 주로 텍스트 스타일링에 사용
3.3.2 display: block
div, p, h1~h6, li 등
-
상자 크기: 가능한 한 부모 요소의 전체 너비를 차지 (높이, 너비 지정 가능)
-
줄 바꿈: 자동으로 줄 바꿈이 일어남
-
용도: 주로 구조와 레이아웃에 사용
3.3.3 display: inline-block
-
상자 크기: 가능한 한 부모 요소의 전체 너비를 차지 (높이, 너비 지정 가능)
-
줄 바꿈: 없음
3.3.4 display: flex
- 유연성; 아이템 간의 간격, 정렬을 유연하게 조절 가능
- 자시 요소들을 모두 inline-block으로 설정하는 것과 같은 효과
.container {
display: flex;
justify-content: space-between;
align-items: center;
}3.3.5 display: none
- 공간 차지: 화면에서 완전히 제거되어 어떠한 공간도 차지하지 않음
- 접근성: 스크린 리더에서도 읽히지 않음
.hidden {
display: none;
}
거북선통통통통