본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.
CSS 기초
- HTML과 함께 웹 페이지의 디자인을 구성하는 언어
- 선택자와 선언부로 구성
CSS의 기본 구조
selector {
property: value;
property: value;
}- 선택자는 스타일을 적용할 HTML 요소를 지정
- 선언부는 선택한 요소에 적용할 스타일 속성과 값을 지정
선택자
전체 선택자
* {
property: value;
}- 모든 HTML 요소에 스타일을 적용
- 선택자로 *을 사용
태그 선택자
p {
property: value;
}- 특정 HTML 요소들에 스타일을 적용
- 선택자로 태그 이름을 사용
클래스 선택자
.class_name {
property: value;
}- HTML 요소에 대해 class 속성을 지정하여 스타일을 적용
- 선택자로 .을 사용
<h2 class="class_name"></h2>형식으로 작성된 태그를 사용
ID 선택자
#id_name {
property: value;
}- HTML 요소에 대해 id 속성을 지정하여 스타일을 적용
- 선택자로 #을 사용
<h2 id="id_name"></h2>형식으로 작성된 태그를 사용
그룹 선택자
h1,p, .btn {
property: value;
}- 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용
- 쉼표(,)를 이용해 여러 선택자를 그룹화
선택자가 겹치는 경우!!
- 선택자가 겹치는 경우 나중에 작성된 스타일이 적용되는게 일반적
- 그러나 같은 요소에 서로 다른 선택자로 CSS가 적용된 경우, 선택자 우선순위에 의해 스타일이 적용
1. Style 태그
2. 아이디 선택자(#id_name)
3. 클래스 선택자(.class_name)
4. 태그 선택자(ht, p, button, etc.)
스타일 속성과 값
색상
selector {
color: red;
color: rgb(255, 0, 0);
color: #FF0000;
}- color 속성을 사용
- 이름, RGB, HEX 값을 사용하여 지정
글꼴
selector {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 10px;
font-style: italic;
}font-family여러개의 글꼴 지정 가능font-weight글꼴 굵기 지정 가능font-size글꼴 크기 지정 가능font-style글꼴 스타일 지정 가능
배경
selector {
background-color: yellow;
background-image: url("image.png");
background-repeat: no-repead;
background-position: 20% 100%;
}background-color배경색 지정 가능background-image배경이미지 지정 가능background-repeat배경 반복 지정 가능(repeat-x, repeat-y, no-repeat)background-position배경 위치 지정 가능(%, px, top 등 사용가능)
크기
selector {
width: 200px;
height: 100px;
}width가로길이 지정 가능(%, px 사용가능)height세로길이 지정 가능(%, px 사용가능)
테두리
selector {
border-style: solid;
border-width: 5px;
border-color: red;
}border-style테두리 스타일 지정 가능border-width테두리 두께 지정 가능border-color테두리 색 지정 가능
CSS 적용방법
인라인(in-line) CSS
<body>
<p style="color: #000000">Hello Wolrd!</p>
</body>- 태그요소 내부의 style 속성으로 CSS를 정의
Style 태그 CSS
<head>
<style type="text/css">
p {
color: #000000;
}
</style>
</head>- HTML 문서 내부에 style 태그를 사용하여 적용
CSS 파일 적용
<head>
<link rel="stylesheet" href="style.css">
</head>- CSS 파일을 따로 만들어 HTML 문서에서 불러와 사용
가독성이 높고 유지보수가 쉽다
CSS 변수 만들기
:root {
--purple1: #fbfbfb;
}- 사용하는 방법은
var(--purple1)
Semantic Web 이란?
- HTML의 태그나 ID, class 등이 그 역할에 알맞은 이름을 가지고 있는 경우
- 의미가 명확한 태그를 사용하는 경우(article, section, nav 등)
열심히