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;
그 외 참고 자료
- 반응형 디자인 : 미디어쿼리
블로그의 정보
Roen의 iOS 개발로그
Steady On