반응형

Web/모각코 22

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

TODAY 28 | TOTAL 123456 수지니의 추억상ㅈr..(*ˊᵕˋo💐ohttps://cafe.naver.com/codeuniv 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-rad..

Web/모각코 2021.12.28

[ 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 ] 위키백과 웹페이지 생성

프로그래밍과 코딩 프로그래밍이란 '컴퓨터 프로그램을 작성하는 일'을 뜻하며 코딩이란 프로그래밍에 수반되는 '코드 작성 작업'을 의미한다. 프로그래밍은 '일반적으로 프로그램 작성 방법의 결정, 코딩(coding), 에러 수정 따위의 작업을 이르지만, 특수하게 코딩만을 이를 때도 있다. 프로그래밍 언어 이 부분의 본문은 프로그래밍 언어입니다 특정한 프로그래밍 언어로 쓰인 프로그램은 기계어로 번역되어 컴퓨터에 의해 실행되며, 어떤 프로그래밍 언어도 기계어로 번역이 가능하다. 어떤 언어에서는 기계어 대신 p-부호로 불리는 바리를 생성하기도 한다. 프로그래머가 기계 부호로 직접 작성하는 것도 가능하지만, 이는 굉장히 어려운 작업이다. 때문에 낮은 수준에서의 컴퓨터 제어가 필요한 경우 프로그래머들은 기계어 명령어에..

Web/모각코 2021.12.22

[ Visual Studio Code ] 텍스트 색 각자 다르게 설정하기

안녕하세요 ▶ 각각의 텍스트를 태그로 감싸줌 @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap'); body{ background-color:darkgreen; } h1{ font-family: 'Noto Serif KR', serif; font-size:30px; } h1 span:nth-child(1){ color:red; } h1 span:nth-child(2){ color:orange; } h1 span:nth-child(3){ color:yellow; } h1 span:nth-child(4){ color:green; } h1 span:nth-child(5){ color:blue;..

Web/모각코 2021.12.19

[ 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
반응형