기존의 코드에 CSS 요소를 추가하기로 했다.
a {
color: rgb(167, 1, 78);
text-decoration: none;
}
a:hover {
text-decoration: underline;
// hover 할 때만 밑줄이 생기도록 하였고 기존의 밑줄을 지우고 색상을 바꿨다.CSS = Cascading Style Sheet
: 종속 스타일 시트
-> 문자 그대로 다수의 CSS 규칙은 하나의 동일한 요소에 영향을 미칠 수 있다.
하지만 이런 CSS 코드가 많아지면 효율성 및 가독성이 떨어지기 때문에
<link href="daily-challenge.css" rel="stylesheet">이런 식으로 daily-challenge.css라는 파일을 따로 만들어서 관리해준다.
웹사이트와 HTML 및 CSS와 같은 브라우저 명령은 서버에 페이지를 보여달라고 요청하고 서버는 브라우저에 이러한 명령을 전달하는 방식으로 응답한다. 외부 파일은 이 HTML 파일에 병합된 상태가 아니다.
따라서 이와 같은 CSS 파일, 이미지 또는 자바스크립트 파일에 대한 링크를 추가하는 경우 해당 파일은 HTML 파일에 대한 첫 번째 요청이 완료된 후에 이를 별도로 요청한다. 이는 개발자 도구의 네트워크 항목에서 볼 수 있다.
결론은 HTML 파일에 외부 파일을 포함하거나 불러오려고 하는 경우 해당 파일의 위치가 지정되어 있다면 페이지가 로드될 때 브라우저가 이러한 추가 파일을 요청한다는 것이 핵심이다.
특정 단락만 스타일을 바꾸고 싶은 경우
특정 단락에 id 값을 주고 고유 식별자를 통해 스타일을 바꿀 수 있다. 이 값은 #id명을 통해 선택할 수 있다.
폰트 단위는 절대 단위인 px와 상대적 단위인 rem과 %가 있다.
구글의 다른 글꼴 사용하기
fonts.google.com 가서 폰트 선택한 후 코드 불러오기
font-family: 'Fira Sans', sans-serif;
// 폴백 폰트를 이용하여 왼쪽의 글꼴이 불러와지지 않으면 오른쪽의 글꼴이 적용된다.