신년운세 코딩 패키지_01
코딩 무료 특강 중
나는 신년운세 코딩 패키지를 신청했다.
코딩으로 재미있는 서비스를 만들고 싶다는 나의 생각과 일치했기 때문이다.
이번 특강의 목표는 아래와 같이 신년운세 페이지 완성이다.
자신의 십이지간을 클릭하면 한해의 운세가 뜨고,
공유도 가능하게 만드는 과정이다.
신년운세 페이지는 html, css, javascript로 만드는 과정이고,
강사님이 처음부터 세세하게 알려주셔서 이해하기 쉬웠다.
코딩은 vscode로 진행됐다.
1. vscode 사용 방법
vscode에서 !를 쓰면 html 기본 템플릿을 가져올 수 있다.
2. html 기초
HTML은 뼈대고, CSS는 꾸미기 과정이다.
HTML은 크게 head와 body로 구성되는데,
head안에는 페이지의 속성 정보를(meta, script, link, title 등),
body안에는 페이지의 내용을 담는다.
HTML 기초
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>3. CSS 기초
css는 <head>....</head>안에
<style>....</style> 태그를 만들고,
그 안에 작성해야 한다.
css로 꾸미기 위해서는 "철수"나 "영희"처럼 "이름"이 필요하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년 신년운세!</title>
<style>
.mytitle {
color: red;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>2021년 신년운세</h1>
<h2>by 르탄. 믿거나 말거나~!</h2>
</div>
</body>
</html>위 코드처럼 <div>로 묶은 다음에 class 이름을 만든다. 그리고 <style> 코드 안에 .mytitle {}과 같은 class 이름을 생성 후 그 안에서 꾸민다.
👉 만약에, .mytitle 안에 있는 h1 태그를 가리키고 싶다면?
.mytitle > h1 { font-size: 56px; margin-bottom: 0px; } 처럼
class 이름 뒤에 부등호를 쓰고, h1처럼 변경하고자 하는 속성을 적으면 된다.
04. CSS 적용하기 - 배경
배경의 반복을 없애려면???
background-repeat: no-repeat;
body {
background-color: ivory;
background-image: url('https://new-year.spartacodingclub.kr/images/pattern.png');
background-position: 600px 100px;
background-repeat: no-repeat;
}
05. 구글 웹폰트 적용 방법
구글 웹폰트 사이트에서 마음에 드는 폰트의 + Select this style을 클릭한 다음에
link 소스는 head 태그 안에 복붙 후, css를 복사하여 style 태그 안에 적용시킨다.
그런데 font는 전체 페이지에 적용되야 한다.
그럴 때 사용하는 코드가 * { }이다.
페이지 전체에 적용시키려면
* {
font-family: 'Jua', sans-serif;
}이렇게 적용시키면 된다.
