TIL 25 (2020.08.10)

백은진·2020년 8월 11일
0

TIL (Today I Learned)

목록 보기
25/106

- 오늘 할 일 -

  1. Codecademy 학습
    : Boundaries and Space
    : Building with Bootstrap
    : Build, Deploy, and Host a Personal Portfolio with Namecheap
    : Learn Navigation Design
  2. 내 자기소개 페이지 구상
  3. 자기소개 페이지 생성

1. Codecademy 학습

Codecademy에서 어제 공부하던 웹사이트 구조 만들기의 나머지 부분을 학습했다.

: Boundaries and Space

margin, padding 등 contents(글, 이미지, 동영상 등)를 둘러싼 Boundaries를 조절하는 방법에 대해 배웠다.
Boundaries의 사이즈를 조정해 사이트를 보기 좋게 만들 수 있는 중요한 부분이다.
무엇보다 버튼을 클릭할 때 별도로 padding-size 등을 설정할 수 있어서, 꼭 실제로 버튼을 누르는 것과 같은 효과를 입힐 수 있어 재미있었다.

: Building with Bootstrap

Bootstrap은 웹사이트를 편리하게 만들 수 있게 해주는 프레임워크이다. 이를 이용하면 간단한 코드를 통해 보기 좋게 grid가 나뉘어지는 등 여러가지 효과를 볼 수 있다.

: Build, Deploy, and Host a Personal Portfolio with Namecheap

Namecheap이라는 호스트 사이트를 통해 내가 만든 사이트를 어느 시간이나, 어느 컴퓨터에서나 접속할 수 있도록 할 수 있다.
나는 이전에 생활코딩에서 깃허브를 통해 이 작업을 하는 방법을 배웠고, 현재 네임칩보다 깃허브 호스트를 사용하는 사람이 더 많으므로 나도 깃허브 호스팅 방식을 이용하려고 한다.

: Learn Navigation Design

위코드의 사전 프로젝트 1주차 미션은 Navigation Bar를 만드는 것이다.
그 작업에 도움이 될까 해서 시작한 강의인데, 막상 시작하니 Breadcrumbs에 중점을 둔 수업이었다.

Breadcrumbs Navigation: 
쇼핑몰 사이트처럼 각 페이지의 계층 구조가 명확히 나눠져 있을 때 브레드크럼 네비게이션을 사용하면, 
사용자가 어느 위치에 있는지 확실히 알고 다른 페이지로 쉽고 빠르게 이동할 수 있도록 할 수 있다. 

2. 내 자기소개 페이지 구상

[원하는 효과]

  1. 화면 상단에 Navigation bar 고정 - 하얀 배경
    : 맨 왼쪽에 "JEANBAEK" bold, large
    : 중간에 메뉴 2개 normal
    : 오른쪽에 낮,밤 버튼 (화면 밝게 / 어둡게)
    : 맨 오른쪽에 아이콘 - 벨로그, 인스타그램, 깃허브, 이메일
    (: 이메일 아이콘 클릭 시, 사용자 컴퓨터의 메일 클라이언트 기능 사용해서 이메일 전송할 수 있도록)
    : 메뉴, 아이콘 클릭시 글씨 색 변환
    : bar 아래 그림
  2. 네이게이션바 제외하고, 사진 1개가 백그라운드 전체 커버, 사진 고정되어있음
    : 메인 화면에서 중간부분에 "Hello, World! 나는 백은진이에요." 보이기
    : 그 아래 "∨" 버튼에 a link 걸기(사진 소개 부분으로 넘어감)
  3. 메인화면에서 스크롤을 올리면, 사진과 소개글이 나타남
    : 화면 가로 픽셀에 따라 한 줄에 사진 1개 혹은 2개 나타나도록
  4. 맨 아래 wecode 사전 프로젝트인 점 나타내기

3. 자기소개 페이지 생성

가볍게 큰 형태만 구성해놓으려고 했는데,
이도저도 아닌 결과가 나오게 되었다.
생각한 것보다 내 머릿속 이미지를 구현하기가 어렵다.

그동안 생활코딩, codecademy에서 수업을 여러번 듣기만 했지,
스스로 프로젝트를 진행해본 적이 거의 없어서 그런 것 같다.

코딩도 인생과 비슷하게 홀로 고민하고 삽질하는 시간이 있어야
실력이 늘고 자유롭게 코드를 짤 수 있는 것 같다.

profile
💡 Software Engineer - F.E

0개의 댓글