[웹개발 입문 강의] [HTML, CSS] 정적페이지를 만들어 웹에 배포해보기

스파르타 코딩클럽 웹개발 종합반 인강 - 공부 기록

 

수강 시작 ~ 

2023. 06. 06 ~ 

 

https://github.com/hotdog7778/sparta

---

뭐부터 해야할지 모르겠어서 우선 따라할 수 있는 강의를 골라서 듣기 시작.

강의를 들으면서 실습했던 내용들을 github에 올리면서 익숙해지기 도전 중.

 

해당 강의를 따라하면

간단한 프론트엔드, 백엔드, DB 를 구축해서 시스템을 만들어 볼 수 있는것 같다.

개념은 정말 간단히 넘어가고 아래 내용들을 실습하면서 경험해 볼 수 있는것 같음.

- HTML, CSS

- JavaScript

- Phyton

- MongoDB

- Flask

목차만 보고 추린거라 정확하진 않음.

 

 

1. 웹 브라우저의 원리

강의에서도 알려주지만, 예전에 구글링을 하다가 좋은 글을 봐서 링크를 적어뒀다.

https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/ 

 

2. 필수 프로그램 설치

• VS Code
• Live Server (vscode 플러그인)

 

3. HTML과 CSS

sparta/frontend 디렉토리를 생성 하면서 시작

html은 뼈대, css는 꾸미기, javascript는 움직이기

 

4. tags.html 작성 실습

• vscode에 live Server 익스텐션을 사용하면 html을 작성하면서 브라우저에서 바로 확인 가능
• html은 head와 body로 구성
  • body는 눈에 보이는 부분
  • haed는 정보들을 담고 있다. 검색엔진이 내 사이트를 퍼갈수 있는 장치같은것도 헤드에 넣는다. css나 자바스크립트도 head에 들어간다.
• <div> 태그는 구역
• <h1> 문서의 제목 태그
• 태그들을 외울 필요는 없다.
• 주석 단축키 : 커맨드 + /

 

5. 간단한 로그인 페이지 만들어 보기

tags.html에 있는 태그들을 활용해서, login.html 파일을 채워 간단한 로그인 페이지를 만든다.

코드를 계속 업데이트 해서 이때 html 코드는 없다.

 

6.  CSS는 꾸미기

 - 뼈대를 꾸미는 CSS, 꾸미기 위해선 뭔가를 지정할 수 있어야 한다.

 - 부를수 있는 대상이 있어야 한다.

 - 대상에 명찰이 있어야 한다.

 - 태그에 명찰이 있어야 한다.

 - <h1> ~~~ </h1> 태그에 명찰을 단다

 - <h1 class="mytitle"> 로그인 페이지 </h1>

 - h1 태그에 mytitle이란 명찰을 달았고,

 - head 부분에 style 태그를 넣고 그사이에 mytitle이 어떤 속성을 가지고 있는지 작성해 준다.

 - 자주쓰이는 CSS

    - 박스는 <div>

    - margin : 바깥쪽 여백

    - padding : 안쪽 여백

 - tip) shift + option + f : 자동정렬 (vscode)

 

 

7. 박스를 사용해서 로그인 페이지를 꾸며보기

login.html 에 작성

tip) 구역을 꾸밀때는 백그라운드 컬러를 먼저주는게 편하다.

- 외부 이미지 사용하는 법.

- 여백 넣는것

 

 

8. 폰트, 주석, 파일분리

폰트

구글 웹 폰트를 사용.

https://fonts.google.com/?subset=korean

위 페이지에서 폰트를 고르고 이미지 처럼 임포트를 누르고,

아래 내용을 복사해서 html에서 style 시작 부분에 붙여넣기!

구글 웹 폰트 사용

CSS rules to specify families 도 복사해서

import 해준것 아래에 붙여넣기.

형식은 * { 붙여넣기 }

    <style>
        /* 구글 폰트 이용 */
        @import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Pen+Script&display=swap');
        * {font-family: 'Jua', sans-serif;
           font-family: 'Nanum Pen Script', cursive;
        }
    </style>

폰트가 적용된 페이지

주석

command + /

css와 html의 주석은 다르다. 단축키를 외우는게 편함

파일분리

style 태그안의 css 코드들을 따로 다른 파일에 저장한 후에 link 태그를 써서 사용 할 수 있다. (디렉토리 안에 파일을 이용할 수 있다.)

하지만 누군가가 써놓은 외부 라이브러리를 사용할 수 도 있다.

 

 

9. 부트스트랩 (CSS 꾸러미)

외부 사이트에서 부트스트랩을 퍼다가 쓸 수 있다.

완제품 가져다 쓰는 느낌.

 

부트스트랩 사이트

https://getbootstrap.com/docs/5.0/components/buttons/

 

index.html 파일을 만들고 시작한다.

버튼 코드를 하나 복사해서 index.html에 사용

 

 

10. 영화 기록 페이지 만들기 (부트스트랩 활용)

index.html 파일에 작성한다.

 

내용물을 정렬시키는 방법 (4줄 세트)

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

 

영화 기록 페이지

 - 부트스트랩 페이지에서 버튼 가져옴

 - 폰트 적용

 - 외부 이미지 가져옴

 - 내용물들 정렬시킴

 

이제 아래쪽 여백에 부트 스트랩을 활용해서 영화의 포스터를 Card형태로 넣어보자.

 - 부트스트랩 사이트에서 Card 코드를 찾아 카피한다.

 - 코드를 index.html에 붙여넣고 작업한다.

 - 완성된 페이지

영화 포스터를 Card 형식으로 넣어봄

 - 완성된 페이지에 포스팅 박스를 추가해보자.

이것도 부트스트랩에서 가져와서 작업

 

 

11. 내가만든 영화기록 페이지를 웹에 배포해보기

깃허브를 이용

repository를 만들고 root 경로에 작성한 index.html을 위치시킨다.

세팅→pages→ 브런치를 main으로 변경 save

배포가 완료되면 아래 주소로 내가만든 페이지를 확인할 수 있다.

https://hotdog7778.github.io/sparta/

 

 

12. 배포한 페이지를 수정 / 적용 해보기

영화기록 페이지에 별점을 주는 박스를 추가해서 페이지를 업데이트하고 적용 시켜보자.

부트스트랩 사이트에서 별점 적당한 박스를 찾아서 index.html 에 작성하고 깃헙에 배포한다.

 

별점 박스 추가