03장 CSS 기본 문법 빠르게 끝내기

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021

03-1 HTML에 CSS 연결하기

HTML 파일에 외부 CSS 파일 연결하기

link:css 입력 후 Enter 🔽
link 태그의 href 속성값으로 경로 수정

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
  </body>
</html>

CSS 파일의 문자 인코딩 방식 지정하기

@charset "utf-8";

☝🏻 CSS 파일을 열어서 다음과 같이 1행에 인코딩 방식 작성
웹 문서에서 한글을 지원한다는 인코딩 방식을 의미

03-2 CSS로 HTML 요소 다양하게 선택하기

게임으로 선택자 배우기: CSS Diner

03-3 폰트 스타일링하기

구글 웹 폰트 사용하기: Google Fonts

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

p#text {
  font-family: 'Monoton', cursive;
}

웹 폰트 아이콘 적용하기: Font Awesome

<head>
  <script src="https://kit.fontawesome.com/7ae3a6a91c.js" crossorigin="anonymous">
  </script>
</head>

<body>
  <i class="fab fa-android"></i>
</body>

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

이전에 학습했던 적이 있는 CSS 선택자를 한 번 더 복습하는 시간을 가졌다. 각 요소의 폰트, 아이콘 지정부터 크기, 여백, 배경, 레이아웃 구성까지 전반적인 CSS 스타일링 구성에 대해 학습했다.

2021.07.14 kidsgao-2
Data Structure(1) - Stack, Queue

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage