CSS3
기본 사용법
주석
html 파일에서는 <!-- --> 으로 주석을 나타내었지만, css 파일에서는 /* */으로 나타낸다.
css에서는 <!-- -->을 무시한다.
외부 스타일시트 연결
<head>
<link rel="stylesheet" type="text/css" href="파일.css">
</head>
CSS의 다양한 선택자
태그 선택자
HTML 페이지의 코드 중에서 해당 태그와 일치하는 부분에 지정된 스타일이 적용된다.
콤마로 구분하여 여러 태그에 똑같은 속성을 지정할 수 있다.
p {
background: yellow;
}
h1, h2 {
text-align: center;
}
전체 선택자
페이지 안의 모든 요소를 선택할 때 사용된다.
* {
color: white;
background: blue;
}
아이디 선택자
문서의 가독성을 위해 특정 부분에 id 속성을 부여하여, 특정한 id 속성을 가지고 있는 태그를 선택할 때 사용된다.
id는 동일한 이름이 없이 유일해야 한다. (사실 되기는 하지만 나중에 문제가 생길 수 있다.)
#을 붙여서 표현한다.
<body>
<p id = "para"> 아이디 선택자 예시입니다. </p>
<p> 일반 문단입니다. </p>
</body>#para {
text-align: center;
color: red;
}
클래스 선택자
아이디는 웹페이지 내에서 유일해야하지만, 여러 개의 요소를 하나의 클래스로 묶어서 동일한 스타일을 지정할 수 있는 방법이 있다.
- '.클래스이름'의 형식으로 표현한다.
- 특정 태그내의 해당 클래스만 지정할 때는 '특정태그.클래스이름'의 형식으로 표현한다.
<body>
<h1 class="center"> heading </h1>
<p class="center"> p </p>
</body>.center {
text-align: center;
color: red;
}
p.center {
color: blue;
}
가상 클래스(pseudo class) 선택자
특정 외부 요인으로 인한 요소에 스타일을 적용하는 방법이다.
폰트 크기의 단위
비고
자세히 적지는 않았지만, 활용할 수 있는 여러 속성
- 배경 관련 속성 (background-color, linear-gradient 등)
- 목록 스타일 지정 (list-style-type
레이아웃 구성
display 속성
block 속성
- 대표 태그: div, p, ul, li
- 한 줄에 하나씩 차지
inline 속성
- 대표 태그: span, img, em
- inline은 안에 내용이 있어야 화면에 표시됨
- 한 줄에 공간이 많으면 여러개 나옴
inline-block은 inline과 같이 한 줄에 여러 개 나오되 블락 단위로 표현됨
position 속성
static
- position 속성을 지정하지 않으면 적용되는 디폴드 값
- html에 정의된 순서대로 브라우저 상에 자연스럽게 보여지는 것
relative
- 원래 있어야하는 자리에서 상대적으로 옮겨짐
- 부모에 대해서 상대적임 (relative 속성일 때 부모가 움직이면 자식도 움직임)
- 0, 0으로 주면 원래 있었던 자리로 이동
fixed
- 상자 안에서 완전 벗어나서 윈도우 안에서 위치 변경이 이루어짐
- 공주 부양한다는 느낌
- 스크롤에 영향을 받지 않고 고정됨
absolute
- 해당 아이템과 가장 가까이 있는 부모 박스(static이 아닌 곳) 안에서 위치 변경이 이루어짐
- 공주 부양한다는 느낌
참조
웹 프로그래밍 기초, 박보석 외 3인 공저, 홍릉과학출판사
https://www.youtube.com/watch?v=0kA0mBvumrg&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9
'Front > html, css, javascript' 카테고리의 다른 글
| Date Range Picker 소개 (0) | 2022.02.03 |
|---|---|
| 이메일 포맷 검증 방법 (regular expression of email) (0) | 2021.07.03 |
| ch03. HTML5 (0) | 2021.06.24 |
| ch02. 개발환경 구축 (0) | 2021.06.22 |
| ch01. 웹 프로그래밍 소개 (0) | 2021.06.21 |
