230428 3

CSS 스타일, 속성 - 글꼴관련스타일

font-family : 폰트패밀리란 웹 문서 전체에 'Nanum Gothic'을 적용하는데, 만일 해당 글꼴이 없으면 다음 글꼴인 'sans-serif'를 적용하고 그 글꼴도 없다면 '굴림' 글꼴로 적용하라는 뜻 font-family: 'Nanum Gothic', sans-serif; ex. font-family : 글꼴지정 브라우저 기본 글꼴 사용 Nanum Pen Script 웹 폰트 사용 Nanum Pen Script 웹 폰트 사용 출력화면 font-size : 글자 크기 지정 font-size: 절대크기 | 상대크기 | 크기 | 백분율 사용할 수 있는 값 : 절대크기, 상대크기, 숫자, 백분율 기본값은 상대크기인 medium이다 font-size 속성은 상속이 된다 px 단위 px 단위를 사용하..

Backend/HTML, CSS 2023.04.28

CSS 구글 웹폰트 적용하기

@font-face 속성 웹폰트(web-font) : 웹 문서 안에 글꼴정보도 함께 저장하고 있다가 사용자가 웹문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴 사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트를 표시할 수 있다 구글 웹폰트 사용하기 1. https://fonts.google.com/earlyaccess 2. 한글 폰트 검색 3. Link 항목에 있는 소스 복사 & 글꼴 이름 기억 4. 웹 문서의 style 태그 안에 붙여넣기 5. font-family 속성을 이용하여 웹 폰트 글꼴 이름 사용 항목 내의 내용을 복사해 사용하면 된다 import속성을 사용할 수도 있음

Backend/HTML, CSS 2023.04.28

CSS Style Tag 스타일태그, 선택자

스타일 태그 스타일 형식 선택자 {스타일속성 : 속성값; ... } 내부 스타일시트 : head태그 안에서 정의 인라인스타일 : 태그 안에 style속성을 통해 외부 스타일시트 : .css파일로 정의한 후 link태그를 이용해 불러온다 주요 선택자들 * : 전체 선택자 페이지 내부에 있는 모든 요소들을 대상으로 적용할 때 사용 웹브라우저마다 기본 마진, 패딩값이 있다 브라우저마다 그 값이 같지 않기 때문에 일반적으로 패딩과 마진값을 0으로 리셋한다 * { margin: 0; padding: 0; } 태그 선택자 태그명 { 스타일 } 특정 태그에 적용 클래스 선택자 문서 안에서 여러 번 반복할 스타일을 지정할 때 사용한다 .스타일명 { 스타일 } 태그에서 class를 통해 불러온다 태그명.스타일명 { 스타..

Backend/HTML, CSS 2023.04.28