CSS 기초
by Steady Onmdn docs와 스파르타 코딩클럽에서 배운 자료를 토대로 정리한 것입니다.
✏️Cascading Style Sheets
- 웹페이지를 꾸미려고 작성하는 코드
- head 코드에 style 태그로 들어가기도 하지만, 보통 로 따로 작성된 파일을 추가함
✏️기본 작성 방법
- (선택자)태그 { 선언 } 꼴로 사용
- 선택자 우선 순위 : 아이디 > 클래스 > 요소(태그)
- 같은 선택자에서는 후술 되는 것이 우선 적용
선택자
| 선택자 이름 | 선택하는 것 | 예시 |
| 요소 선택자 (태그/타입 선택자) |
특정 타입의 모든 HTML 요소 | p<p>를 모두선택 |
| 아이디 선택자 | 특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서 아이디당 딱 하나의 요소만 허용) |
#my-id<p id=’my-id’> 또는 <a id=’my-id’>를 선택 |
| 클래스 선택자 | 특정 클래스를 가진 페이지의 요소 (한 페이지에 여러번 나타날 수 있음) |
.my-class<p class=’my-class’>와 <a class=’my-class’>를 선택 |
| 속성 선택자 | 특정 속성을 갖는 페이지의 요소 | img[src='myimage.png']<img src=’myimage.png’>를 선택하지만 다른 <img>는 선택 안함 |
| 수도(pseudo) 클래스 선택자 | 특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over상태일때 |
a:hover<a> 링크위에 마우스를 올렸을 때 |
텍스트 관련
font-size // 글자크기 [px or %]
color // 글자색상 [red, green, ...]
text-align // 텍스트 정렬 [left, center, right]
line-height // 줄 간격
letter-spacing // 글자 간격
text-shadow // 글자의 그림자; [수평 수직 흐림 그림자색상]
박스 관련
border // 테두리 [두께, 모양, 색상 등을 지정가능]
padding // 요소의 안쪽의 공간
margin // 요소의 바깥 공간
// → padding과 margin의 값에 대하여…
//- 값 1개 : 상하좌우 모두
//- 값 2개 : 상하 좌우
//- 값 3개 : 상 좌우 하
//- 값 4개 : 상 우 하 좌(시계방향)
//- 전역값 : inherit; initial; unset;
//- auto는 브라우저가 적절한 여백크기를 선택하여 중앙에 오도록 함
요소 관련
background-color // 배경 색상
display // 요소의 표시 형식 설정 [block, inline, grid]
// - block 블록화
// - inline 자신의 크기 만큼
// - grid 유연한 표
폰트 적용 방법
[<link>적용방법]
<head>
<link href="폰트링크" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
</style>
</head>
참고 코드
//[배경이미지를 넣는 코드 3줄]
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(“이미지 주소”); # linear-gradient로 흐리게 만드는 것
background-size: cover;
background-position: center; # %값으로 위아래로 조정가능
//[내용물을 가운데로 잡아주는 코드 4줄]
display: flex;
flex-direction: column; or row; # column은 세로, row는 가로정렬
justify-content: center;
align-items: center;
그 외 참고 자료
- 반응형 디자인 : 미디어쿼리
'Last Record(Web Develop) > WEB' 카테고리의 다른 글
| JavaScript 기초3(Python과 비교하여, ES6 기준) : 배열 (0) | 2022.08.15 |
|---|---|
| JavaScript의 ES란? (ES5와 ES6의 차이점에 대하여) (0) | 2022.08.14 |
| JavaScript 기초2(Python과 비교하여, ES6 기준) : 조건문 (0) | 2022.08.11 |
| JavaScript 기초1(Python과 비교하여, ES6 기준) : 자료와 변수 (0) | 2022.08.11 |
| HTML 기초 (0) | 2022.08.07 |
블로그의 정보
Roen의 iOS 개발로그
Steady On