*link:css > HTML파일과 CSS파일 연동
[아이콘을 가져오는 방법]
1) 직접 아이콘을 구하는 방법
2) 직접 이미지를 만들고/추출 or svg 파일 가져오기(픽셀이 없는 이미지 파일 형식_수학:좌표으로 구성되어 있음)
> (svg) heroicons
> (svg) font awesome_code kit를 적용해야 함
> (폰트) google forms : import 추출 시, 맨 위에 @import url() body{font-fmaily: } https://fonts.google.com/
[Script]
- 항상 마지막에 작성, <body> 태그 닫기 전
== 코드 ==
1) .class : 전체적인 틀을 잡아주고
2) .class__sth : 세부적인 틀을 잡아주는 것
3) margin : 상하 좌우
4) display:flex; : row형태로 정렬(부모가 자식을 > sth가 sth_자식을)
ex) 1 2 3 ... 9
참고 블로그 : https://blog.naver.com/readytosee/223035587045
5) justify-content : center; : 센터로 정렬
justify-content : space beetween : 간격 정렬 > 다른 너비가 있을 때 잘안됨
justify-conetnet : flex-end : 끝에서 부터 졍렬
ex) 참고 블로그 : https://blog.naver.com/nodutol/223059575539
6) CSS hack
:first-child{} : 첫번째 요소
:last-child{} : 마지막 요소
:nth-child(구분번호) : 특정 요소
:nth=child(2n) : 짝수번째 요소
:nth-child(2n+1) : 홀수번째 요소
7) first-child span{} : 반복되는 span에 동일하게 적용하기 위한 태그
(저작권 이슈 대비 이해와 해석용)
[CSS_코드 예시 참고]
'html, css' 카테고리의 다른 글
| [css] CSS BOX MODEL (0) | 2023.08.03 |
|---|---|
| ★[html/css] 코로나 속 복습 6-1~6-5까지_카카오톡 홈화면 예시 (8.2~8.3) (0) | 2023.08.02 |
| [css] BEM 사용하기 (0) | 2023.07.30 |
| [html] Div, Span의 차이 그리고 부수적 요소 (0) | 2023.07.29 |
| [html] 시맨틱 태그 요소 이해하기 (0) | 2023.07.22 |