💡 25-07-01
오늘부터 포트폴리오 시작이다 😎
이번년도 시간 진짜 빠르네...
Vs code CSS 실습
✅ Type 선택자
: 태그 이름으로 전체 스타일 지정
h2와 p 태그를 type 선택자로 스타일링하면 페이지 내 모든 h2, p 태그에 스타일이 적용된다
✅ Class 선택자
: class 속성으로 여러 요소에 같은 스타일 적용
클래스 선택자는 우리가 직접 원하는 이름으로 지정할 수 있지만 의미에 맞는 이름으로 작성하는 것이 좋다
CSS에서 클래스를 불러올 때는 앞에 점(.)을 붙여서 '.클래스명' 형태로 작성한다
span 태그에 class="blue-text", class="red-text"를 지정하고, CSS에서 .blue-text, .red-text로 스타일을 적용했다
▶︎ 여러 요소에 같은 class를 반복 사용 가능
✅ ID 선택자
: id 속성으로 특정 요소 하나만 선택하는 방식
#(샵)을 사용해 #아이디명 형태로 ID 선택자를 지정하면 된다
id="title"인 h1 태그에만 특정 스타일을 적용했다
▶︎ 한 페이지에 고유 id 값은 중복 없이 단 하나만 사용 가능
CSS에서 어떤 요소에 어떤 스타일을 적용할지를 지정하는 가장 기본적인 선택 방법들이고, CSS는 다양한 방식으로 스타일을 적용할 요소를 선택할 수 있다
현재 html 태그에 font-size: 16px;로 기본 폰트 크기가 설정되어 있다
16px이 뿌리가 되는 폰트 사이즈이며, *{} 선택자를 사용하면 페이지 내의 모든 요소에 스타일을 일괄 적용할 수 있다
rem은 전체에서 설정한 전역 폰트 사이즈를 기준으로 하고, em은 부모 요소의 폰트 사이즈를 기준으로 한다
▶︎ em의 기준이 되는 부모 요소는 div class="article"에 해당
font-size: 2rem;으로 지정하면 전역 기준 폰트 크기인 16px의 2배인 32px로 설정된다
☝️ article에 font-size: 10px;을 설정하면, 그 안에서 em 단위를 사용하는 폰트 크기는 이 10px을 기준으로 계산되어 2em은 20px로 적용된다
⏺️ 폰트를 불러오는 코드
Google Fonts에서 Noto Sans KR을 검색하여 원하는 폰트를 선택한 뒤,
사진처럼 @import 코드를 복사해 HTML의 head 부분에 있는 style 태그 안에 붙여넣으면 해당 폰트를 사용할 수 있다
⏺️ 폰트를 적용하는 스타일
Google Fonts에서 Noto Sans Korean을 선택하면 오른쪽에 CSS class for a variable style 예시 코드가 나오는데, 이 코드를 html{}에 복사해 붙여넣으면 HTML 요소의 전체 폰트를 Noto Sans KR로 설정할 수 있다
▶️ 둘 다 필요하며 서로 역할이 다르기 때문에 함께 써야 폰트가 적용된다
