Sujin's Dlog

made by 수지니 모각코 html/css 과정 step1 좋아하는 유튜브 소개하기 😆몽자 유튜브 링크 step2 위키 백과 만들기 HTML, CSS 본격 시작하기! step3 위키 백과 수정하기 웹 폰트 적용하기 step4 웹 페이지 생성하기 여러 방법으로 크기 적용하기 @import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Serif+KR:wght@500;700&display=swap'); div{ font-family: 'Noto Serif KR', serif; }

made by 수지니 모각코 html/css 과정 step1 좋아하는 유튜브 소개하기 😆몽자 유튜브 링크 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap'); div{ font-family: 'Noto Serif KR', serif; }

태그 Paragraph : 문단을 지정하는 기능 문단 1 문단 2 태그 Line Break : 줄을 바꾸는 기능 문단 1 1. 내용 문단 2 2. 내용 태그로도 문장을 나눌 수 있다. 문단 11. 내용 문단 22. 내용 태그 Division : 영역을 나누는 기능 ( 한 페이지 내에서 영역을 지정 ) 태그 : 범위를 지정하는 기능 ( 영역을 나누거나 줄바꿈을 하지 않고 일정 범위를 지정 ) 내용 1 내용 2 내용 3 내용 4 → div는 자동으로 줄바꿈이 되지만 span은 줄바꿈이 되지 않음 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap'); div{ font-family: 'Noto..

1. 구글 폰트 사이트에서 폰트 확인하기 fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 한국어 폰트만 찾도록 Language를 Korean으로 변경 3. 원하는 폰트를 하나 골라 클릭 → 원하는 굵기의 폰트를 골라 select this style 클릭 4. 방식 / @import 방식으로 웹 폰트 불러오기 ▶ 방식 : html 파일 내 head 태그 안에 코드 복사해서 붙여 넣기 ▶ @import 방식 : 외부 스타일 시트(따로 분리한 css 파일)에 코드 복사해서 붙여 넣기 5. 웹 폰트 적용하기 : 위 캡쳐본에서 CSS rules t..

HTML 태그에 바로 적용하기 : html 태그에 style 속성을 추가하는 방식 속성1 : 속성값; 속성2 : 속성값; 속성3 : 속성값; Pink & Grey ▶ 제목은 'This is a Test File.'이며 글씨는 'Pink & Grey'임 ▶ 글씨 색상은 pink, 배경 색상은 grey로 설정 내부 스타일 시트 적용하기 : head 안의 style 태그를 작성하는 방식 Pink & Grey 외부 스타일 시트 적용하기 : css 속성을 별도의 파일로 저장하고 태그로 불러오기 → 다른 사람의 라이브러리 파일을 불러오거나 css 파일을 여러개로 분리하여 관리하기 편함 1. html 파일과 같은 폴더 내에 style.css 파일 생성 2. style.css 파일 내에 css 속성 작성 h1{ col..

1. Visual Studio Code 사이트 접속 https://code.visualstudio.com/download 2. Windows 버튼 클릭 (Mac의 경우는 Mac 버튼 클릭) 3. 약관 허용 버튼 클릭 후 다음으로 이동 4. 다운 받을 경로 선택 후 다음으로 이동 5. 바로가기를 만들 폴더 경로 선택 후 다음으로 이동 6. PATH에 추가 선택 후 다음으로 이동 7. 설치가 완료되면 종료