💡 CSS언어에 사용되는 다양한 프로퍼티
1. font 관련 프로퍼티
1) <font-size> : 글자 크기
-
pixel(픽셀) : 화면을 구성하는 가장 기본적인 단위 => font-size: 32px; 하는경우 모니터마다 해상도가 다르기때문에 모니터마다 크기가 달리 보일수 있음
-
em : pc마다 해당pc에 기본적으로 설정된 디폴트 글자 픽셀 정해져있음(보통 16px)
기본 폰트에서 ^몇배^ 키울것이냐
=> 해상도 다른 모니터들에서 적절한 배율로 적합하게 표시할수 있음 -
일반적인 디폴트값은 보통 16px
따라서
font-size: 32px;
font-size: 2em;
이 같은것임
2) <font-family> : 글씨체
<font-family: "굴림", Gulim, sans-serif;>
: 앞의 폰트부터 시도해보고, 없으면 다음폰트, 없으면 다음폰트 시도하라
(한글 이름은 "" 붙이기)
3) <font-weight> : 글자 굵기
<font-weight: lighter;>(일반글자)- bold; (굵게)
2. 색상 프로퍼티
-
background-color : 셀 배경색
('-color' 생략가능) -
color : 글자색
-
색상값 양식
ㅡ color: #8A2BE2 (16진수로 색 표현)
ㅡ color: rgb(138, 43, 226) (10진수로 색 표현)
(빨강, 녹색, 파랑이 얼만큼 섞여있는지) -
색상값 검색 요령
: 'material color palette' 구글 검색
3. 기타 다양한 프로퍼티
- width : 가로
- height : 세로
- text-align : 텍스트 정렬
- padding : 안쪽 여백
(안쪽 위쪽 여백 : padding-top) - margin : 바깥쪽 여백
(margin: 위px 오른쪽px 아래px 왼px;)
=> 시계방향 - border : 가장자리 선
(border-radius : 모서리 둥글게)
(border: 1px solid white;
-> 선굵기, 실선, 색) - box-shadow : 박스 바깥 그림자
(box-shadow: 0px 0px 3px 0px;
-> 순서 : 오른쪽, 아래쪽, 바깥쪽 옅은, 바깥쪽 진한 그림자)
4. 세트로 알고 있어야 할 것들!
1) 이미지 넣을때 항상 같이 다니는 CSS 속성 3총사!
background-image: url('');
background-position: center;
background-size: cover;
2) 안에 있는 내용물 가로/세로 정렬하기 (display flex)
4줄만 기억하면 됨!
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
-
가로 세로 모두 가운데로 정렬됨
-
여기서 direction을 column(세로 정렬)이냐 row(가로 정렬)냐만 바꾸면 됨
column : enter느낌 생각하면 됨
row : enter 안쳐진 가로작성 느낌
💡 참고1 : html
<div>태그
-
html에서 '특정 영역'을 지칭하는 태그
-
css 언어로 2번 문법 적용할때 div로 영역 지칭 한 후 {}로 프로퍼티 적용하기 가능
(ex)
div {
width: 1000px; (너비가 1천 픽셀)
margin-left: auto;
margin-right: auto;
}
=> div태그로 지정된 영역은 모두 {} 내의 프로퍼티를 적용받음 -
margin -> 픽셀 지정한 이외의 영역 왼/오 auto로 하는 경우, width가 설정되어 있다는 가정 하에 자동으로 픽셀영역이 가운데정렬됨
⭐ div 구역 설정하여 가운데정렬하기
- 가운데정렬 = 양쪽 여백이 같다
(내 밖으로의 여백(margin)을 끝까지 밀기!)
(끝까지 민다 = auto)
💡 참고2 : bootstrap
-
bootstrap 이란 : 누군가 예쁘게 만들어놓은 라이브러리를 모아둔 것
(예쁜 CSS를 미리 모아둔 것 !) -
참고할 bootstrap 꾸러미 사이트
https://getbootstrap.com/
