CSS 기초
CSS란?
CSS
- 글씨의 색상이나 크기, 이미지 크기나 배치 방법 등 웹 문서의 디자인 요소를 담당
CSS의 장점
- 웹 문서의 내용과 별개로 디자인만 바꾸거나, 디자인은 그대로 두고 웹 문서의 내용
변경이 용이함
- 다양한 기기(PC, 스마트폰 등)에 맞게 탄력적으로 디자인이 바뀌도록 반응형 디자인
(Responsive Design)을 구현할 수 있음
- 동일한 문서 구조이더라도 서로 다른 CSS 테마 적용이 가능함
CSS의 동작 원리
- CSS 구문은 선택자와 선언부로 구성됨
- 선택자는 디자인을 적용하고자 하는 HTML 요소이므로 선택자 정의가 중요함
- 선언부는 { } 블록을 사용하며, 다수의 속성을 포함함
- 각 속성 정의는 ‘속성:값;’ 형식이며 항상 세미콜론(;)으로 끝남
: h1 {color: red; font-size = 15px;}
: 선택자 선언부
: 선택자: HTML 문서에서 디자인 적용을 원하는 요소를 선택함. (인라인 스타일시트)
: 선언부: 적용하고자 하는 디자인 속성을 선언한다.
스타일 시트 작성과 실행
CSS를 HTML에 적용하기 위한 방법
① 인라인 스타일 시트 : HTML 태그에 CSS 속성을 정의함
② 내장 스타일 시트 : HTML 문서의 <head> 부분에 CSS 정의 부분을 포함함
: 주의할 점) 현재 작성한 문서에만 적용됨
③ 외장 스타일 시트 : 별도의 CSS 파일을 생성한 후 HTML 문서에 링크로 포함함
: 주의할 점) 하나의 파일로 여러 문서에 적용 가능함
CSS의 중첩(Cascading) 적용 방식
- CSS는 위에서 아래로 중첩되는 방식임
: 외장 CSS에서 적용한 디자인 속성은 내장 스타일 시트에서 수정하거나
속성을 추가할 수 있음
: 셀렉터의 중첩에 의해 발생하는 경우에도 동일하게 적용됨
셀렉터의 개념
셀렉터(Selector)
선택자의 다른 명칭
HTML 문서에서 특정 부분을 선택하기 위한 구문을 의미함
기본적인 선택자 : 태그, 아이디, 클래스
태그 셀렉터
태그는 HTML의 기본 구성요소로, 태그 이름으로 요소를 선택함
태그는 중복 사용되기 때문에 특정 영역을 선택하기보다는 공통 디자인 속성을 정의
하는 데 사용됨
같은 디자인 속성을 적용할 여러 태그는 콤마(,)로 나열해 일괄 적용할 수 있음
아이디 셀렉터
아이디(Id) 속성을 사용함
문서에 존재하는 유일한 값으로 아이디를 지정하여 특정 요소를 가장 확실하게 선택
할 수 있는 방법
한 곳만 선택이 가능한 셀렉터로 보통 문서의 전반적인 구조에 해당하는 부분에 사
용하고 서로 다른 문서 간에도 동일 규격을 따르는 경우 재활용이 가능하도록 설계
아이디가 선택자로 올 때는 HTML에서 지정한 아이디 앞에 #을 붙여 정의
클래스 셀렉터
- 가장 대표적인 CSS 셀렉터
- 클래스(Class) 이름으로 구분해 스타일을 만들어두고
HTML에서 클래스 속성을 적용해 원하는 디자인을 적용하는 방법
: 즉 CSS 선언이 먼저이고 HTML에서 이를 사용하는 개념
- 재활용이 용이하고 누구나 사용할 수 있도록 라이브러리 등을
만드는 데도 기본이 되는 방법임
- HTML 요소의 클래스가 선택자로 올 때는 클래스 앞에 온점(.)을 붙여 정의함
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Coche-Control" content="no-store">
<title>classSelector.jsp</title>
<style type="text/css">
.red {
font-family: serif;
color: red;
}
.blue {
font-family: sans-serif;
color: blue;
}
</style>
</head>
<body>
<h1 class="red">Hello</h1>
<h2>Hello</h2>
<h3 class="blue">Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
</body>
</html>
'Hello World > Frontend Study' 카테고리의 다른 글
| JavaScript - javascript basic 자바스크립트 node.js 라이브러리 다운로드. [개발스터디 기몬] (0) | 2023.05.04 |
|---|---|
| JavaScript - javascript basic memo [개발스터디 기몬] (0) | 2023.05.04 |
| HTML 기초 [개발스터디 기몬] (0) | 2023.04.19 |
| 프론트엔드 HTML / CSS 기초 공부하는 것들 코드 내용 (0) | 2022.07.19 |
| Frontend Beginner : vs code download / Visual Studio Code _ HTML _ Hello World (0) | 2022.07.17 |
댓글