- 오늘 할 일 -
- Codecademy 학습
: Boundaries and Space
: Building with Bootstrap
: Build, Deploy, and Host a Personal Portfolio with Namecheap
: Learn Navigation Design- 내 자기소개 페이지 구상
- 자기소개 페이지 생성
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. 내 자기소개 페이지 구상
[원하는 효과]
- 화면 상단에 Navigation bar 고정 - 하얀 배경
: 맨 왼쪽에 "JEANBAEK" bold, large
: 중간에 메뉴 2개 normal
: 오른쪽에 낮,밤 버튼 (화면 밝게 / 어둡게)
: 맨 오른쪽에 아이콘 - 벨로그, 인스타그램, 깃허브, 이메일
(: 이메일 아이콘 클릭 시, 사용자 컴퓨터의 메일 클라이언트 기능 사용해서 이메일 전송할 수 있도록)
: 메뉴, 아이콘 클릭시 글씨 색 변환
: bar 아래 그림 - 네이게이션바 제외하고, 사진 1개가 백그라운드 전체 커버, 사진 고정되어있음
: 메인 화면에서 중간부분에 "Hello, World! 나는 백은진이에요." 보이기
: 그 아래 "∨" 버튼에 a link 걸기(사진 소개 부분으로 넘어감) - 메인화면에서 스크롤을 올리면, 사진과 소개글이 나타남
: 화면 가로 픽셀에 따라 한 줄에 사진 1개 혹은 2개 나타나도록 - 맨 아래 wecode 사전 프로젝트인 점 나타내기
3. 자기소개 페이지 생성
가볍게 큰 형태만 구성해놓으려고 했는데,
이도저도 아닌 결과가 나오게 되었다.
생각한 것보다 내 머릿속 이미지를 구현하기가 어렵다.
그동안 생활코딩, codecademy에서 수업을 여러번 듣기만 했지,
스스로 프로젝트를 진행해본 적이 거의 없어서 그런 것 같다.
코딩도 인생과 비슷하게 홀로 고민하고 삽질하는 시간이 있어야
실력이 늘고 자유롭게 코드를 짤 수 있는 것 같다.
