-
[100DaysOfCode] 04강Front-end/100DaysOfCode 2022. 7. 16. 20:02
Pseudo element
hover: 마우스를 올렸을 때 동작하는 속성
**a태그로 링크를 삽입했을 때 기본 속성(밑줄 등)이 어떤 게 적용된 것인지 확인하는 방법
: 크롬 - 개발자 도구 - Elements - style에 user agent stylesheet 영역을 확인하면 된다.
a { color: fff; text-decoration: none; } a:hover { text-decoration: underline; }
외부 파일에 css 저장하기
<head>
<link href = "style.css" rel="stylesheet">1. link와 같은 태그는 void element이다 (닫는 태그가 없음, 마지막에 '/'만 써도 되고 안 써도 된다)
2. 개발자는 .css 확장자를 보고 css 파일임을 알 수 있지만 컴퓨터는 알 수 없기 때문에 rel="stylesheet"와 같이 작성한다
3. link와 같은 요소는 첫 번째로 HTML 파일에 대한 요청이 완료된 후에 별도로 요청한다. HTML에는 메타 데이터가 포함되어 있기 때문에 가장 먼저 호출한다. 그 다음 css와 같이 연계된 파일은 후에 브라우저에서 자동으로 요청한다.
ID 선택자
[HTML 작성법 예시] <p id = "BlogTitle"> Daily Coding </p>
[CSS 작성법 예시] #BlogTitle { color: fff; }
CSS Size
Absolute Relative px rem %
구글 폰트 불러오는 방법
원하는 폰트를 모두 선택한 후 그대로 복붙하면 된다!
'Front-end > 100DaysOfCode' 카테고리의 다른 글
[100DaysOfCode] 07강 (0) 2022.07.20 [100DaysOfCode] 06강 (0) 2022.07.19 [100DaysOfCode] 05강 (0) 2022.07.19 [100DaysOfCode] 01 - 03강 (0) 2022.07.16 [100DaysOfCode] 100일 웹개발 챌린지 시작 (0) 2022.07.16