TIL 26 (2020.08.11)

- 오늘 할 일 -

1. 자기소개 페이지 코드 짜기

1. 자기소개 페이지 코드 짜기

[원하는 효과]

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

1. 화면 상단에 Navigation bar 고정 - 하얀 배경

navbar 클래스를 사용해서 네비게이션 바를 만들었다.
css를 통해 여러가지 디자인 요소를 입히고 있다.

h1 태그는 margin이 0px이고, 그 외 li 태그는 margin-top이 25px로 해서 보기 좋게 만들고 싶다.

그런데 그렇게 코드를 입력해도 결국 h1 태그가 li 태그에 속해있어서인지 모두 margin-top 25px이 적용되어버린다.

맨 왼쪽에 "JEANBAEK"이라는 글자에 main.html 링크를 걸고, 글자크기를 bold, large로 설정했다.

낮밤 버튼은 사용성이 없을 것 같아 제외하려고 한다.

아이콘은 font awesome이라는 사이트에서 불러오는 작업을 통해 만들었는데, 화면에 출력이 되지 않는다. 조금 더 알아보고 진행할 예정이다.

메뉴에 커서를 갖다 대면 올리브색 shadow가 생기도록 했다.

background cover 코드를 통해 네비게이션 바를 제외하고 전체적으로 사진이 배경이 되도록 했다.

메인 화면에서 중간부분에 "Hello, World! 나는 백은진이에요." 를 출력했다.

맨 아래 위코드에서 진행한 첫번째 프로젝트라는 점을 나타냈다.

한 화면에 모든 정보가 있고, 네비게이션 바의 메뉴를 클릭하면 지정된 페이지로 스크롤이 내려가도록 하고 싶다.

그런데 방법을 모르겠어서, 우선 파일을 여러 개 만들어서 각각 화면을 구축해놓았다.

위코드 커뮤니티 사이트를 보니 다른 분도 같은 내용으로 고민하고 있있었다. 그 질문에 달린 답변을 참고해서 다시 한 번 시도해봐야겠다.