[스파르타 코딩클럽] 개발일지 1주차 "모던심플 초대장"

1주 차 코딩 개발일지_정적 웹페이지 만들기

​

처음이라 뼈대인 html과 꾸미기인 css를 배웠다.

하라는 대로 따라서 하니 쉽게 했지만

나중에 혼자 할 수 있을지 모르겠다.

나중에 기억하기 위해서도 개발일지가 필요할 거 같다

---

>>시작하기

예전에 배운적이 있는데 조금 하다 포기하고 하니

처음부터 다시 시작하는 느낌이다. 

 

비주얼 코드도 있으나, 새 마음으로 시작하기 위하여 파이참을 깔았다.

 

head 안에 있는 건 머리말 위쪽 헤드,

body 안이 몸통으로 웹페이지 내용

​

보통 body에 div로 상자를 만들고

class="이름"으로 명찰을 달아준 다음,

head에 있는 style 안에

.이름 {} 형태로 불러서

중괄호 안에 꾸밀 내용을 넣는다.

​

​

>>기본적인 html

div : 구역 나누는 박스

p : 문단

​

h1 : 제목 태그

페이지마다 하나씩 써줘야

구글이 제목으로 인식하므로

검색이 잘 된다.

h2 : 소제목

​

>>기본적인 CSS

배경

background-color

background-image

background-size

*처음에는 배경 범위가 안 보이기 때문에 배경색을 지정해두면 알아보기 편하다

강사님 처럼 그린으로 설정하고 코딩하고 나중에 지우기

​

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('');

background-position: center;

background-size: cover;

->배경 이미지 넣고 가운데 정렬

하고 싶다면 위 세 줄 세트 붙여다가

''사이에 이미지 url 넣으면 된다!

​

사이즈

width

height

*단위는 px

​

폰트

font-size

font-weight

font-family color

*구글 웹 폰트 링크

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

선택해서 @import로 체크하고

<style></style> 태그 안 링크 복붙,

css 탭 코드는 전체 적용*{} css에 복붙

​

간격

margin

padding

*상 우 하 좌 순서대로 px쓰면 된다

페이지 정중앙으로 정렬하려면

좌 우에 px 대신 auto라고 쓰면 됨

​

모서리 둥글게

border-radius

​

**주석 달기

코드를 임시로 작동하지 못하게 하거나,

간단한 메모를 남겨두고 싶을 때 사용.

• </aside>
• 단축키: 라인들을 선택 → ctr + /

개인적으로 아직 주석 달고 하는 것이 익숙하지는 않다.

​

파일 분리하기

css가 너무 길 때 다른 파일로 분리하고

아래 코드만 넣으면 한 줄로 가져올 수 있음.

style.css 파일을 같은 폴더에 만들고, head 태그에서 불러온다.

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

이것은 책에서 보았는데, 갑자기 생각이 났다.

​

본격 CSS 꾸미기

부트스트랩 컴포넌트 5.0 url

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

여기서 가져와서 적당히 조금씩 바꿔다가

사용하면 간-편

​

디스플레이 플랙스

: 내용물 정렬하는 코드

아래 4줄이 세트다.

​

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

​

예시)

<style>

.mytitle {

background-color: green;

color: white;

​

height: 250px;

​

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

</style>

​

내용물을 세로로 정렬해 줌

column 대신 row 쓰면 가로 정렬

​

---

이렇게 배운 것들을 토대로 만든 페이지는

깃허브(github)에 올리고 배포해서 언제든 볼 수 있다.

​

다음주도 더 열심히 코딩

모두들 새해 복많이 받으세요