강의를 한 번 보고는 눈에 잘 들어오지도 않고 바로 다 잊어버렸는데 여러 강의 계속해서 듣다보니 CSS 속성들이 비슷하게 쓰이는걸 보고 바로 정리해야겠다는 생각이 들었다.
물론 정확하게 알고 싶은 것들은 구글검색을 통해 정리하면서 짚고 넘어갈 수 있었다.
1. color
글자 색
2. width / height
width는 가로길이, height는 세로길이
주로 아래 단위를 많이 사용함.
auto(기본값) / px(픽셀) / %(부모 요소에 상대적인 너비)
3. margin / padding
margin은 바깥쪽여백, padding은 안쪽여백
두 속성은 방향(top, right, bottom, left(시계방향))으로 표현할 수 있음.
<예시>
margin:10px -> 상하좌우 모두 10px 여백
margin:15px 10px -> 상하15px, 좌우10px 여백
margin:40px 30px 20px 10px -> 상40px, 우30px, 하20px, 좌10px 여백
margin-top: 15px -> 위쪽 여백 15px
이런식으로 한쪽 방향만 줄 때 '-방향'을 붙인다.4. border
1) width : 테두리의 두께 (px 단위 사용)
2) style : 테두리의 스타일
- solid : 실선
- dotted : 점선
- dashed : 조금긴 점선
3) color : 테두리의 색상
border: width, style, color;
ex) border: 1px, solid, blue;
-> 1픽셀 두께, 실선, 파란색 테두리
5. border-radius
테두리의 모서리 각도 조절
단위: px, % 사용
6. 배경이미지
1) background-image: url(' ');
2) background-position: 배경 이미지 위치
-> 숫자값(x, y), left, top, center, bottom, right
3) background-size: cover;
7. 내용물을 가운데로 이동하는 코드묶음
display: flex; 가로방향으로 item 배치
flex-direction: row 또는 column; item이 행/열로 배치
align-items: center;
justify-content: center;
8. font
1) font-style: 스타일 지정
-> normal(기본), italic(기울기) 등
2) font-weight: 글자 두께
-> 100~900 사이의 숫자를 통해 설정하거나, 지정된 값을 사용한다.
lighter (100)
normal (400)
bold (700)
bolder (900)
3) font-size: 글자크기
4) font-family: 글꼴
-> 구글폰트에서 가져와서 head 태그 안에 style 태그 안에
'@import url(' ')'부분을 삽입한다.
9. box-shadow
1) Horizontal Length: 음수이면 왼쪽으로, 양수이면 오른쪽으로 그림자 위치 설정
2) Vertical Length: 음수이면 위쪽으로, 양수이면 아래쪽으로 그림자 위치 설정
3) Blur-Radius: 숫자가 커질수록 블러처리 되어 흐려짐.
4) Spread-Radius: 숫자가 커질수록 그림자 크기가 커짐.
5) color: 그림자 색상 설정
6) inset을 작성하면, 그림자가 요소의 바깥쪽이 아닌 안쪽에 생성
<예시>
box-shadow: 0px 0px 3px 0px blue inset;10. hover 선택자 사용
마우스 커서를 요소 위에 올렸을 때 적용되는 스타일
':hover'는 링크, 버튼, 이미지 등 다양한 요소에 사용할 수 있습니다.
