[개발일지] 스파르타코딩클럽 신년운세 코딩 패키지

스파르타 코딩클럽 신년 운세 코딩 패키지 (1일차)

최근 개인 웹페이지를 만드는 것에 관심이 있었는데, 마침 친구가 스파르타 코딩클럽에서 진행 중인 무료 강의 링크를 공유해줬다. 기본적인 html, css, JavaScript 를 사용해서 '신년 운세 홈페이지'라는 웹페이지를 제작하는 강의로 총 2일차 분량으로 이루어져 있다. 실습 위주라서 핵심적인 요소들을 빠르게 익힐 수 있을 것 같아 바로 시작!

https://online.spartacodingclub.kr/classroom

SpartaCodingClub

online.spartacodingclub.kr

What I learned

1일차 수업 목표

서버와 클라이언트의 역할에 대해 이해한다.
HTML, CSS의 기초 지식을 이해한다.
신년운세 메인페이지를 완성한다

시작하기 전, 완성하게 될 페이지 미리보기

서버와 클라이언트

웹서비스에서 서버와 클라이언트의 역할은 아래와 같다.

서버(Server): 웹페이지 원본. 요청이 들어오면 원본을 복사해서 클라이언트에 전송
클라이언트(Client): 일반 사용자 입장. 필요할 때 서버로 요청하여 웹페이지의 복사본을 받아와서 화면에 표시

Web의 구성요소: HTML, CSS, JavaScript

Web은 크게 HTML, CSS, JavaScript의 영역으로 나뉘어 있으며, 각각의 역할은 아래와 같다.

HTML: 웹페이지의 뼈대 (구역 나누기, 텍스트 표시 등)
CSS: 웹페이지 꾸미기
JavaScript: 웹페이지를 움직이게 하기

HTML 기초

HTML은 웹페이지의 뼈대를 세우는 부분으로, 크게 head와 body로 구성되어 있다.

head: 페이지의 속성 정의, 필요한 스크립트 호출 등 (meta, script, link, title 등)

body: 페이지의 내용

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

위 코드를 실행시키면 아래와 같은 웹 페이지가 생성된다.

CSS 기초

CSS는 html에서 정의한 요소를 꾸미는 역할으로, CSS를 사용하기 위해서는 '누구를', '어떻게' 꾸밀 것인지에 대한 정보가 필요하다.

'누구를' : class 속성을 사용하면 html 에서 정의한 요소에 원하는 이름을 붙여줄 수 있다. 그 후에 <style> 태그에서 해당 class를 호출하여 대상을 꾸밀 수 있다.
- html > body > div 태그에 class="mytitle" 를 적어줌으로써, div 전체 요소들을 묶어 "mytitle"이라는 이름을 붙여주었다.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2021년 신년운세!</title>
</head>
<body>
    <div class="mytitle">
        <h1>2021년 신년운세</h1>
        <h2>by 르탄. 믿거나 말거나~!</h2>
    </div>
</body>
</html>
```
'어떻게' : 호출한 class를 어떻게 꾸밀 것인지에 대한 CSS 속성을 작성한다.
- head > style 에서 .mytitle 을 호출하여 color는 red로, text 정렬은 가운데로 지정해주었다.
- mytitle 안에 있는 <h1> 영역만 CSS 속성을 주고 싶다면, .mytitle > h1 으로 h1만 지정하여 꾸밀 수 있다.
```
.mytitle {
    color: darkred;
    text-align: center;

    margin-top: 100px;
    margin-bottom: 50px;
}
.mytitle > h1 {
    font-size: 56px;
    margin-bottom: 0px;
}
```

배경 적용하기

배경에 CSS 속성을 적용하기 위해서는 별도의 class 지정 없이 body 를 호출하여 속성을 입력하면 된다.

body {
    background-color: ivory;
    background-image: url('https://new-year.spartacodingclub.kr/images/pattern.png');

    background-position: 600px 100px;
    background-repeat: no-repeat;
}

background-color: 배경 색상
background-image: 해당 url의 이미지를 배경에 적용
background-position: 이미지 위치 설정
background-repeat: 'no-repeat'으로 설정하면 이미지가 반복되지 않는다.

폰트 적용하기

아래 구글 폰트 링크로 들어가면 다양한 폰트의 CSS 속성을 확인할 수 있다.
https://fonts.google.com/?subset=korean
마음에 드는 폰트를 선택하고 우측 속성을 보면, web에서 사용할 수 있는 link와 CSS 코드가 있다.위에서 얻은 link를 복사해서 <head> ~ </head> 사이에 붙여넣고, CSS를 복사해서 <style> ~ </style> 사이에 붙여넣는다.

CSS에서 특정 요소가 아닌 web 전체에 CSS 속성을 적용하고 싶을 때는 아래와 같이 * { } 를 사용하면 된다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">

* {
	font-family: 'Yeon Sung', cursive;
}

도형 만들기

본 강의에서 만드는 웹페이지는 신년운세를 보는 페이지기 때문에, 12간지를 나타낼 12개의 원형 버튼이 필요하다.

HTML 작성하기

<div>로 구역을 나누고, 12개의 <a> 태그를 만들어준다.
href는 특정 링크로 이동하게 만들어 주는 속성인데, "#"을 지정하면 현재 페이지에 그대로 있겠다는 뜻이다.

<div class="rtans">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

CSS 작성하기

a 태그를 동그랗게 만들기
```
.rtans > a {
    width: 150px;
    height: 150px;

    border-radius: 150px;
    border: 3px solid darkred;

    box-shadow: 0px 0px 10px 0px darkred;

    background-color:white;
    display: block;
    
    margin: 10px;
}
```
- width / height: 크기 속성
- border-radius: 모서리 속성 (width, height와 동일하게 설정함으로써 원 모양 만들기)
- border: 테두리 속성
- box-shadow: 그림자 속성
- background-color: 배경색 속성
- display: block 으로 설정하여 속성을 박스로 설정
- margin: 원 사이에 여백 주기
12개의 원을 배치하기
```
.rtans {
    display: flex;
    flex-direction: row;
    justify-content: center;

    flex-wrap: wrap;

    width: 1200px;
    margin:auto;
}
```
- display: flex 는 div 안에 있는 요소들을 정렬하는 속성이다.
- flex-direction:row 또는 flex-direction:column
- justify-content:center 세 개가 거의 같이 다닌다고 한다.
  - 여기까지 작성하면 아래 그림처럼 12개의 원이 구겨져서 길게 들어가기 때문에, 아래 속성을 더 추가해준다.
- flex-wrap: wrap 을 설정하면 원이 찌그러지지 않고 웹 페이지의 가로 길이에 맞게 원을 배치한다.
- width: 가로 길이를 제한해주면, 우리가 원하는 대로 한 줄에 6개씩의 원을 배치할 수 있다.
- margin: auto 로 설정하면 양 옆 margin이 동일하게 맞춰져 원들이 가운데에 배치된다.

르탄이 이미지 입히기

HTML 작성하기

앞서 만들었던 12개의 <a> 태그에 각각 class 속성으로 이름을 부여한다.

<div class="rtans">
    <a class="rtan1" href="#">쥐</a>
    <a class="rtan2" href="#">소</a>
    <a class="rtan3" href="#">호랑이</a>
    <a class="rtan4" href="#">토끼</a>
    <a class="rtan5" href="#">용</a>
    <a class="rtan6" href="#">뱀</a>
    <a class="rtan7" href="#">말</a>
    <a class="rtan8" href="#">양</a>
    <a class="rtan9" href="#">원숭이</a>
    <a class="rtan10" href="#">닭</a>
    <a class="rtan11" href="#">개</a>
    <a class="rtan12" href="#">돼지</a>
</div>

CSS 작성하기

각 클래스를 호출하여 배경 이미지를 지정해준다.

.rtan1 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS1.png'); }
.rtan2 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS2.png'); }
.rtan3 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS3.png'); }
.rtan4 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS4.png'); }
.rtan5 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS5.png'); }
.rtan6 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS6.png'); }
.rtan7 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS7.png'); }
.rtan8 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS8.png'); }
.rtan9 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS9.png'); }
.rtan10 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS10.png'); }
.rtan11 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS11.png'); }
.rtan12 { background-image: url('https://new-year.spartacodingclub.kr/images/yearS12.png'); }

HOVER 적용하기

hover CSS 속성을 사용하면, 마우스를 올렸을 때 배경색이 바뀌는 효과를 적용할 수 있다.

.rtans > a:hover {
    background-color: darkred;
}

아래 페이지 완성!

3. 1일차 후기

차근차근 코드를 작성하면서 내가 만드는 페이지가 최종 목표에 가까워지는 걸 보는 게 재밌었다.
~~다만, 본 과정이 올해 연 초에 진행된 이벤트 강의여서, 강의에서 제공해주는 이미지들은 현재 사용할 수 없는 것은 좀 아쉬웠다.~~ ~~내 최종 구현 페이지에는 르탄이 없는 12개의 흰색 원들뿐..~~ -> (내용 수정) 분명 1일차 강의 들을 때는 이미지가 안 떴는데, 며칠 뒤에 2일차 강의 들으니 이미지 잘 나왔다. 내가 1일차 과정을 진행한 해당 일자에 문제가 있던건지 뭔지는 모르겠지만, 이제는 문제 없습니다!
2일차 듣고 또 적으러 오겠습니다.

일취월장

[개발일지] 스파르타코딩클럽 신년운세 코딩 패키지 - 1일차

스파르타 코딩클럽 신년 운세 코딩 패키지 (1일차)

What I learned

1일차 수업 목표

시작하기 전, 완성하게 될 페이지 미리보기

서버와 클라이언트

Web의 구성요소: HTML, CSS, JavaScript

HTML 기초

CSS 기초

배경 적용하기

폰트 적용하기

도형 만들기

HTML 작성하기

CSS 작성하기

르탄이 이미지 입히기

HTML 작성하기

CSS 작성하기

HOVER 적용하기

아래 페이지 완성!

3. 1일차 후기

티스토리툴바