내 미적감각의 한계를 체험하는 과제 난... 더 못꾸며... 이것도 꾸민건 아니지만...

목표

• 코드 줄이기!
• 깃헙에 호스팅하고 컴퓨터랑 모바일로 확인해보기. (기존에 생각했던 사이즈대로 출력되는지 확인)

수정 사항

파일 이름 재설정

• 주소를 치는데 아무래도 영어이름인것이 좋은가 싶고, 메뉴 이름과 같은 이름으로 파일을 설정하는것이 좋을것 같아서 기존에 '자기소개.html'이었던 것을'Home.html'로 번경
  주소 치는데 대문자 소문자 구분 잘하기,,,,,,,

중복 제거

결과 : 약 170줄 -> 약 150줄로 줄임

• div tag 갯수 줄이기 ->아직 감각은 없지만 뭔가 이게 너무 많으면 별로 안좋을것 같음 ㅎ
  
  

• class 선택자 활용: 같은 효과가 들어가는 id 선택자는 class 선택자로 바꿔 한줄이라도 중복 줄이기!
  
  

• 'web page -> 검사' 항목 들어가서 제대로 구현 되지 않는 코드 확인하고 지우기.

보완

• screen 크기에 따라 맞춰 변하는 font-size tag 조사
  (SNS 아이콘 밑에 흐릿한 글씨 바꿔주기) (vw = view width)

font-size: #vw;

• 글씨체 설정 tag 조사 (전체에 적용하기 / 내가 선택한 폰트 = serif)

font-family: serif;

• middle3에서 위아래 선 종류 다르게 하기(위 점선, 아래 실선)

border-top: 2px dotted gray;
border-bottom: 2px solid gray;

• Yummy 페이지 생성 (그냥 링크 확인용으로 만듬)
  (곱창전골, 대방어 있어요ㅎㅎ)
  
  
  
  

핸드폰으로 출력

• mobile (내 핸드폰 기준 갤럭시 S10)의 해상도가 생각보다 큼,, max-width: 790px; 로 설정한게 작동하지 않음!
  (max-width: 1290px;은 작동함)
  
  
  -> 정확한 수치는 모르겠지만.. 일단 모든 반응형 항목들을 1290px;에서 되도록 했음!

정렬 재설정

• 큰 모니터로 틀어보니 가운데 정렬이 제대로 안이뤄져있었다...
  .middle1자체에 margin이 아닌 padding 값을 좌우로 주어서 그 안에있는 플랫베어와 웰컴 문구가 상대적으로 가운데에 모이도록 효과를 주었다.
  -> 글과 그림을 따로 입력했기에 이런 수고로움이 있는거 같다. 두개가 동시에 입력되어있으면 더 쉽겠지,,,,? 근데 일단 글자 한줄 한줄에 효과를 주고 싶었기 때문에 이런것 까지 다 고려해서 바꿔봐야 할것 같다! 현재로썬 여기까지!
  
  
• About me의 그림 3가지도 왼쪽에 모여있더라,,, 이것는 #About에서 marin값을 auto로 두고, grid 효과로 columns: 1fr 1fr 1fr; 지정, 그림이 너무 커지는걸 막기 위해 그림은 width: 60%로 지정!

Github hosting

주소 : 내github아이디.github.io/폴더이름/열 페이지 이름

Full screen ver.

width =< 1290px

해야할 것

• About me : 클릭하면 새 tap 이 열릴지.. 아니면 알림창? 만 뜰지 정하기 (근데 알림창 뜨게 하는법 아직 모름 !!)
  
  

• Hello! I'm Chae hyun. 이 한줄로 있을때 글이 screen 크기에 따라서 Chae 와 hyun이 따로 줄바꿈 됨.. 함께 이동하게 하는방법?!
  지금은 아예 Hello! 와 I'm Chae hyun.을 줄바꿈 해줘서 그렇게 이동되진 않음 (완전 우연)

스터디 후..

middle1 부분에서 좌 우의 여백을 위해 .frame 선택자를 좌, 우에 두고 3등분 하여 정렬했었는데... 다른 분은 이미지를

vertical-align: middle

로 지정하여 글 옆에 그림이 오도록 설정하셨다! (근데 화면이 줄어들면 글자 한 알파벳씩 떨어진다.)

grid효과로 section을 주어 repeat까지 하면 일정하게 반복되는 section을 만들 수 있다! 약간 같은그림찾기 카드의 뒷면처럼 일정한 간격, 일정한 구조로 만들수 있는것.

grid-template-column: repeat(5, 1fr);

5개의 section이 1씩의 비율로 병렬구조로 정렬

각각 활성화 주는 코드에는 {{ }}를 붙인다
-> 써봐야 이해할듯.

background 이미지에는 여러개를 둘 수 있으며 코드중 가장 아랫줄의 것이 화면의 제일 아래에 깔린다!

Navigation bar에서 페이지 이동을 할 경우 활성화 된 페이지에 해당되는 메뉴의 텍스트 색이 변하게 하기... active를 class에 주어.. 쓰읍.. 해보자!

font awesome 페이지 활용하기

display: flex;
수직이 수평으로 오게 하기 그 후
flex-direction: column 을 주면
카톡 대화창 같은 배열이 된다! (좌 우로 반복되는 세로 구조)

화면 비율에 따른 크기 조정
내 페이지의 경우 px을 %로 지정해서 화면 비율에 맞게 %로 조정되게 했는데.. rem 을 이용하면 같은 효과가 난다!
%를 사용하면 하나하나 바꿔야 하는데 rem을 쓰면 px로 쓰되 위 같은 효과를 낼 수 있는 건가??

같은 페이지 내에서 특정 클릭시 빠르게 위치 이동하게 하는 tag.. 쇼핑몰 창에서 밑~으로 내렸다가 위로 한번에 올릴때 클릭하는 top 키 같은 효과 주면 좋을듯!! i tag ??

유투브로 노마드코드 한번 보는것도 좋을 듯 하다 (초보자에게 딱 좋은 강의!)