| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- 스프링 에러
- java
- 오라클클라우드에 젠킨스 설치하기
- 스프링 부트가 해결하려고 했던 문제
- 세션
- 스프링 구글차트로 기간별 현황 조회하기
- 스프링
- 자바 기초
- 자바기초
- 스프링 구글차트
- 오라클통계
- 스프링 제어역전
- 오라클일별데이터
- maven
- CSS
- 자바왕기초
- 오라클
- 썸머노트
- 스프링 Ioc Container
- 스프링과 스프링부트 차이점
- 자바왕초보
- jsp
- 오라클주별데이터
- Spring Boot가 해결하려고 했던 문제
- 스프링 Ioc
- 자바 왕기초
- HTML
- 제이쿼리
- 오라클월별데이터
- 자바
- Today
- Total
Just Do it
[CSS] CSS의 기본 본문
*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱
CH6. CSS의 기본
6-2. 스타일과 스타일 시트
1) 스타일 형식 알아보기
-CSS 스타일 기본형:
선택자 {속성: 속성값1;
속성: 속성값2
}- 선택자: 스타일을 어느 태그에 적용할 것인지 알려주는 것
- 중괄호({ }) 사이에는 스타일 정보를 넣는다.
- 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있다.
- 예를 들어 텍스트 단락의 글자를 가운데로 정렬하고, 글자색을 파랑으로 지정하고 싶다면 다음과 같이 작성한다.
p {
text-align: center;
color: blue
}
2) 스타일 시트 알아보기
- 스타일 시트: 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어 놓은 것
- 스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만든 사용자 스타일로 나눌 수 있다.
- 사용자 스타일은 다시 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉜다.
* 인라인 스타일: 간단한 스타일 정보를 적용. 별도의 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
예)
<h1>레드향</h1>
<p style="color:blue;">껍질에 붉은 빛이 돌아 레드향이라고 불린다. </p1>* 내부 스타일 시트: 스타일을 여러 곳에 적용할 때 사용. 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것.
모든 스타일 정보는 <head> 태그 안에 정의하고 <style>과 <style>태그 사이에 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
...* 외부 스타일 시트: 스타일 정보를 따로 저장해놓고 사용. *.css 라는 파일 확장자를 사용.
외부 스타일 시트 파일에는 <style> 태그를 사용하지 않으며 <link> 태그를 이용하여 외부 스타일 시트를 연결한다. <link>태그를 <head> 태그 안에 넣는다.
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
6-3. CSS 기본 선택자 알아보기
- 선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것이며, 선택자를 사용하는 방법은 미리 약속되어 있다.
1) 전체 요소에 스타일을 적용하는 전체 선택자: * (별표)
* {속성: 값;....}- 전체 선택자는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용한다.
- 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다.
2) 특정 요소에 스타일을 적용하는 타입 선택자
- 타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용한다. 다시 말해 타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용된다.
태그명 { 스타일 규칙 }
3) 특정 부분에 스타일 적용하는 클래스 선택자
- 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때, 특정 부분만 선택해서 스타일을 적용하려면 클래스 선택자를 사용한다.
- 클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 한다. 클래스 이름은 나중에 기억하기 쉽게 임의로 지정하면 된다.
.클래스명 { 스타일 규칙 }- 클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데, 이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼 class 속성을 사용해서 지정한다.
- 클래스 스타일은 여러 곳에 적용할 수 있다. 예를 들어 다음 예제 소스에서는 검은색 테두리를 그리는 .accent 스타일을 만든 후 <span> 태그를 사용해서 '레드향' 요소에 적용했다.
- 또한 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있다. 2개 이상 적용할 때는 공백으로 구분해서 스타일 이름을 적으면 된다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p{
font-style: italic;
}
.accent{
border: 1px solid #000;
padding: 5px;
}
.bg {
background-color: #ddd;
}
</style>
</head>
<body>
<h1 class="accent bg">레드향</h1> <!-- accent와 bg클래스 선택자를 사용 -->
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향이라 불린다.</span></p> <!-- accent 클래스 선택자만 사용-->
</body>
</html>
4) 특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자
- id 선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용한다.
- 마침표(.) 대신 # 기호를 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같다.
- 그리고 id 스타일을 웹 요소에 적용할 때는 id="아이디명"처럼 사용한다.
#아이디명 { 스타일 규칙 }- 클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할 수 있다는 것이다.
- 이처럼 id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용한다.
예)
...
<style>
#container{
width: 500px;
margin: 10px auto;
padding: 10px;
border: 1px solid #000;
}
</style>
<div id="container">
<h1>레드향</h1>
...5) 같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
- 선택자를 이용해 스타일을 정의하다 보면 여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있다. 이럴 때는 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한번만 정의하면 된다.
h1, p {
text-align: center;
}
**
- 스타일 우선 순위 (1->5)
1. !important: 어떤 스타일보다 우선 적용하는 스타일
2. 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용한다.
3. id 스타일: 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용할 수 있다. (선택자 이름 앞에 # 기호를 사용한다.)
4. 클래스 스타일: 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있다. (선택자 이름 앞에 마침표(.) 기호를 사용한다.)
5. 타입 스타일: 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용한다.
- 소스 코드의 작성 순서에 따라 나중에 작성된 스타일이 더 우선 순위를 갖는다. 즉 나중에 작성된 스타일이 먼저 작성된 스타일을 덮어쓴다.
- 스타일 상속: 스타일 시트에서 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데 이것을 스타일 상속이라고 한다.
예를 들어 문서 구조에서 <body> 태그는 웹 문서에 사용하는 모든 태그의 부모 요소이다. 그래서 <body> 태그 스타일에서 글자색이나 글꼴을 지정하면 그 스타일은 웹 문서 전체를 적용할 수 있다.
'신입 개발자가 되기 위해 공부했던 독학 자료들 > HTML&CSS' 카테고리의 다른 글
| [CSS] CSS 고급 선택자 (0) | 2022.02.23 |
|---|---|
| [CSS] CSS와 박스 모델 (0) | 2022.02.22 |
| [CSS] 텍스트를 표현하는 다양한 스타일 (0) | 2022.02.21 |
| [HTML] 폼(form) 삽입하기 (0) | 2022.02.21 |
| [HTML] 웹 문서 주요 구조를 만드는 주요 시맨틱 태그 (0) | 2022.02.20 |