CEOS 프론트 스터디 1주차 과제

💡 vanilla-js Todo 리스트 사이트를 만들기
과제를 하며 공부한 것을 정리해 보았어요

1. id, class 차이

html에서 태그에 id 또는 class를 부여한다. 이 차이를 알아봅시다

id: 단 하나의 요소에 사용함, css에서 '#'으로 접근
-> id는 재사용하지 않고 하나의 태그에만 부여하는 것이다.

class: 여러 요소에 사용할 수 있음->재사용 가능, css에서 '.'으로 접근

2. 폰트 적용

css에서 상단에 아래와 같이 import를 해줘야한다

@import url("https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css");

id, class 또는 태그에

font-family: "Pretendard", "Noto Sans KR", sans-serif;

를 포함하면 적용된다.

3. favicon 적용

favicon은 브라우저의 탭, 주소창, 북마크 목록 등에서 보이는 아이콘이다

먼저, 설정할 이미지를 ico파일로 저장한다.
index.html의 header부분에 아래 태그를 포함해야한다. href 부분에는 자신의 이미지의 위치를 고려하여 알맞게 수정해야한다.

<link rel="icon" type="image/svg+xml" href="/favicon.png" />

4. Flexbox 적용

참고 사이트

 <div class="week-calendar">
        <div class="day">월</div>
        <div class="day">화</div>
        <div class="day">수</div>
        <div class="day">목</div>
        <div class="day">금</div>
        <div class="day">토</div>
        <div class="day">일</div>
      </div>

.week-calender {
  display: flex;
}
.day {
  float: left;
  text-align: center;
  margin: 1rem;
}

5. px대신 rem쓰는 이유

반응형 웹을 개발할 때는 px대신 rem을 주로 쓴다고 해요

px는 절대적인 크기여서 화면 크기가 커졌을 때도 똑같은 크기로 화면에 나타난다. rem으로 크기를 설정하면 화면의 크기에 비례하여 화면에 나타난다.