반응형

web 82

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑦

1. home.html TODAY 28 | TOTAL 234918 ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★ 수지니 (♪♬) 파도타기 블로그 바로가기 페이스북 바로가기 인스타그램 바로가기 수지니의 추억 상ㅈr... (*ˊᵕˋo💐o https://url주소/나중에입력 Updated news 사진첩 일상...♥ 게시판 웹코딩...♥ 게시판 Memory...♥ 사진첩 여행...♥ 다이어리0/25 사진첩0/25 게시판0/25 방명록0/25 Miniroom 홈 다이어리 사진첩 방명록 2. picture.html TODAY 28 | TOTAL 234918 ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★ 수지니 (♪♬) 파도타기 블로그 바로가기 페이스북 바로가기 인스타그램 바로가기 수지니의 추억 상ㅈr... (*ˊ..

Web/모각코 2022.01.04

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑥

1. home.html TODAY 28 | TOTAL 234918 ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★ 수지니 (♪♬) 파도타기 블로그 바로가기 페이스북 바로가기 인스타그램 바로가기 수지니의 추억 상ㅈr... (*ˊᵕˋo💐o https://url주소/나중에입력 Updated news 사진첩 일상...♥ 게시판 웹코딩...♥ 게시판 Memory...♥ 사진첩 여행...♥ 다이어리0/25 사진첩0/25 게시판0/25 방명록0/25 Miniroom 홈 다이어리 사진첩 방명록 2. picture.html TODAY 28 | TOTAL 234918 ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★ 수지니 (♪♬) 파도타기 블로그 바로가기 페이스북 바로가기 인스타그램 바로가기 수지니의 추억 상ㅈr... (*ˊ..

Web/모각코 2022.01.01

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑤

1. home.html TODAY 28 | TOTAL 234918 ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★ 수지니 (♪♬) 파도타기 블로그 바로가기 페이스북 바로가기 인스타그램 바로가기 수지니의 추억 상ㅈr... (*ˊᵕˋo💐o https://url주소/나중에입력 Updated news 사진첩 일상...♥ 게시판 웹코딩...♥ 게시판 Memory...♥ 사진첩 여행...♥ 다이어리0/25 사진첩0/25 게시판0/25 방명록0/25 Miniroom 홈 다이어리 사진첩 방명록 2. font.css @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"); @font-face { font-fa..

Web/모각코 2021.12.31

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ④

1. html TODAY 28 | TOTAL 234918 ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★ 수지니 (♪♬) 수지니의 추억 상ㅈr... (*ˊᵕˋo💐o https://url주소/나중에입력 Updated news 사진첩 일상...♥ 게시판 웹코딩...♥ 게시판 Memory...♥ 사진첩 여행...♥ 다이어리0/25 사진첩0/25 게시판0/25 방명록0/25 Miniroom 2. font.css @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"); @font-face { font-family: "NeoDunggeunmo"; src: url("https://cdn.jsdelivr.n..

Web/모각코 2021.12.29

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ③

TODAY 28 | TOTAL 123456 수지니(♪♬) 수지니의 추억상ㅈr..(*ˊᵕˋo💐ohttps://cafe.naver.com/codeuniv Updated news 사진첩 일상★ 게시판 Dream★ 게시판 먹방★ 사진첩 여행★ 다이어리 8/25 사진첩 8/25 게시판 8/25 방명록 8/25 Miniroom @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Hi+Melody&display=swap'); body { background-color: #a3a3a3; /** body에 배경이미지 적용 */ background-image: url("../static/images/pattern.png"); /** 고정된 사이즈로 ..

Web/모각코 2021.12.29

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ①

body { background-color: #a3a3a3; /** body에 배경이미지 적용 */ background-image: url("../static/images/pattern.png"); /** 고정된 사이즈로 설정 */ background-size: 100px; /** 기본 body 사이즈를 화면 크기로 고정 */ position: fixed; left: 0; top: 0; right: 0; bottom: 0; } .bookcover { /** 배경 색깔 지정 */ background-color: #b4d1da; /** 모서리 둥글게 */ border-radius: 9px; /** 윤곽선 */ border: 1px solid #738186; /** 기본 너비, 높이 지정 (반응형 X) */ ..

Web/모각코 2021.12.26

[ Visual Studio Code ] 웹 페이지 생성

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; }

Web/모각코 2021.12.24

[ Visual Studio Code ] 태그 정리

태그 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..

Web/모각코 2021.12.18

[ Visual Studio Code ] 웹 폰트 적용

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..

Web/모각코 2021.12.17

[ Visual Studio Code ] css 적용 방법

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..

Web/모각코 2021.12.13
반응형