CSS(Cascading Style Sheets) :
텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
1. 스타일과 스타일 시트
style: 꾸미기 + 요소 배치
style sheet: html에 적용할 스타일들을 일괄적으로 정의한 것
스타일 형식
p { text-align: center; }
p : 선택자(스타일 규칙이 적용될 대상)
text-align: 스타일 속성
center : 속성 값 (속성/속성 값 쌍이 여러 개일 경우, 세미콜론(;)으로 구분)
[ 스타일 지정 방법 ]
화면1을 만드는 3가지 방법이 존재한다.
- 내부 스타일 시트
: 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
color:green;
list-style-type:square;
}
</style>
</head>
<body>
<h1>내부 스타일 시트</h1>
<ul>
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>
</body>
</html>- 외부 스타일 시트(일반적인 방법)
: 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용함.
<style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결함.
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/css_base.css" type="text/css">
</head>
<body>
<h1>내부 스타일 시트</h1>
<ul>
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>
</body>
</html>css 코드
ul {
color:green;
list-style-type: square;
}
- 인라인 스타일
: 태그에 style 속성을 이용해 style="속성: 속성 값;" 형태로 스타일 적용 가능
간단한 스타일, 특정 요소에만 스타일을 적용할 때 사용
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>내부 스타일 시트</h1>
<ul style="color:green; list-style:square;">
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>
</body>
</html>
2. 선택자
정의 : 스타일을 적용할 요소들을 선택하는 다양한 방법
-종류
| 종류 | 설명 | 기본형 |
| 전체 선택자 | 모든 요소에 적용 | * {속성:속성 값; 속성:속성 값; ...} |
| 태그 선택자 | 특정 태그를 사용한 요소에 적용 | 태그 { 스타일 } |
| 클래스 선택자 | 특정 부분에 적용 (문서 안에서 여러 요소에) |
.클래스명 { 스타일 } |
| id 선택자 | 특정 부분에 적용 (문서 안에서 하나의 요소만) |
#아이디명 { 스타일 } |
| 그룹 선택자 | 둘 이상의 요소에 같은 스타일 적용 | 이름1, 이름2 { 스타일 } |
html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<h2 class="bluetext">css 선택자 공부</h2>
<p class="bluetext">현재 블로그에서는 <span class="redtext">css 선택자</span>
공부를 하고 있습니다.</p>
<p>선택자 : 스타일을 적용할 요소들을 선택하는 다양한 방법</p>
<h2>선택자 종류</h2>
<p> 전체/태그/클래스/id/그룹 </p>
</body>
</html>
css 코드
h2 {
color: green;
}
.bluetext {
color: blue;
}
.redtext {
color: red;
}
선택자는 양이 많아서 추가적인 공부를 하겠다.
2023.03.25 - [수업] - 웹프로그래밍 - 3-1 CSS 기초 - 선택자
웹프로그래밍 - 3-1 CSS 기초 - 선택자
다양한 선택자 1. 연결 선택자 2. 속성 선택자
codingtoday.tistory.com
3. 캐스케이딩(Cascading)
CSS: Cascading Style Sheet(위에서 아래로 흐르는 스타일 시트)
캐스케이딩 원칙
1. 스타일 우선순위
스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.
소스코드에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다. (CSS 파일 링크 순서에도 적용)
인라인 > id > 클래스 > 전체
2. 스타일 상속
태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
'수업' 카테고리의 다른 글
| 웹프로그래밍 - 3.1 가상클래스와 가상 요소 (0) | 2023.03.26 |
|---|---|
| 웹프로그래밍 - 3-1 CSS 기초 - 선택자 (0) | 2023.03.25 |
| 코드 디버깅하는 법, 에러 체크하는 법, Log.e 사용, kotlin (0) | 2023.03.21 |
| 모바일프로그래밍 - spinner 사용 (0) | 2023.03.20 |
| 모바일프로그래밍 - Android Studio에서 View Binding 하는법 (0) | 2023.03.20 |
