내 맛대로 바꾸고 있다. 어제 버그는 왜인지는 모르겠는데 지금은 잘 된다. 이제 포스트 부분도 바꿨다. 원래는 폰트도 이게 아니였고 주변에 장식도 없었는데 저렇게 하니까 약간 깔끔하고 좋다. 그리고 위에는 포스트를 얼마나 읽었는지, 스크롤 프로그래스 바도 만들었다. 자바스크립트로 했다. 나머지 부분도 오늘 바꿔야겠다.
웹디자인
오늘은 별로 수정한 게 없다. 앱 이름, 설명, 다운로드 버튼이다. 그리고 About Me 창을 새로 만들었다. CSS에서는 자체적으로 그라데이션 기능이 있어서 linear-gradient 하면 된다. 색 네 개를 섞어서 했다. ericanorhee/ienlab_microsite Contribute to ericanorhee/ienlab_microsite development by creating an account on GitHub. github.com
블로그 플래너 등 각종 앱들의 페이지를 만들고 있다. 하나만 해 놓으면 다른 건 그냥 복사해서 쓰면 되니까. 예전부터 이런 효과를 주고 싶었다 (블로그에서도). 스크롤하면 전체 글의 진행 상태만큼 프로그래스 바가 보이는 것. 드디어 사이트에도 달게 되었다. 그리고 헤더도 숨겨지게 했는데, 다시 위로 올리면 헤더 보인다. 그리고 헤더랑 붙어 있는 앱 관련 작은 헤더는 항상 보이도록(최상단) 해 두었다. 이걸 내가 했다니. 예전에 수행평가때 (처음으로 HTML CSS 만졌을 때) 해 보고 싶었는데 JS를 써야 된대서 손서리치면서 안 했는데 해 보니까 그럭저럭하다. 물론 내가 한 게 아니고 구글신의 도움이지만. 오늘은 이만 끝. 본가 왔다. ericanorhee/ienlab_microsite Contribut..
이제 영상은 YouTube 링크로 올려야겠다. 다음 영상은 계속 광고가 뜬다. 어쨌든 메인 페이지 대충 완성했다. 어제랑 달라진 부분은 왼쪽 헤더 밑의 드롭다운 메뉴의 위치가 정상적으로 변경되었고, 스크롤 인디케이터 부분은 크기만 커지는 게 아니라 컬러를 입히고 뒤에 배경 흰 원을 덧댔다(별개의 파일). 이제 메인 페이지는 이만하면 됐고 Brand Identity나 앱 페이지를 만들어봐야겠다. 200901_ienlab_microsite#2 · ericanorhee/ienlab_microsite@b407a69 상단 왼쪽 메뉴 드롭다운 위치 수정, 스크롤 인디케이터 수정. 메인 페이지 끝 github.com
왼쪽 상단 메뉴를 추가했다. 위에 마우스 올리면 메뉴가 뜨도록 했는데 About Me에는 바로 밑에 안 뜨고 Apps 밑에 뜨는 버그가 있다. 나중에 수정해야겠다. 그리고 transition이 너무 좋다. 흐히 SVG 파일은 inline으로 코드를 넣지 않으면 색 지정이 힘들다. 때문에 그냥 색 있는 거랑 흰색인 파일 둘 다 만들어서 파일에 넣었다. 그리고 내일은 개강날. 수업 틈틈이 스크롤 인디케이터 저 부분을 상상한 대로 만들어야겠다. 흰 배경에 컬러 아이콘으로 바뀌도록. 200901_ienlab_microsite · ericanorhee/ienlab_microsite@af9521f 상단 왼쪽 메뉴 (Apps Design About) 추가 github.com
이렇게만 보면 거의 이미지다. 그런데 글자는 글자고(...) 로고는 svg 파일이고 휴대폰이랑 스크린샷은 분리되어 있는 사진이다. 어제 생활코딩에도 올리면서 정말 찾기 힘들었던 슬라이드형 스크롤 방식은 fullpage.js라는 라이브러리를 통해 해결했다. 점점 웹사이트의 모습을 갖추고 있다. 다른 페이지도 만들어야 한다. 메인에 너무 큰 시간을 쓰고 있다. 왼쪽에 스크롤 인디케이터..? 저 부분을 약간만 더 손보고 (뒤에 원, 해당 아이콘은 채색) 왼쪽 상단이 비었다. 그 부분은 이제 다른 페이지로 이동하는 아이콘이나 텍스트를 넣어둘 예정이다. 이 정도면 뭐 나쁘진 않겠지. 그리고 2017년 고등학교 2학년 때 수행평가 한다고 HTML CSS 맛보기로 공부해서 만들어 놓은 사이트가 있었다. 당시에는 나름..
rem em : 현재의 font-size. 그러니까 현재 설정된 것의 1.2배의 font-size를 하게 하려면 1.2em이 된다. 그런데 rem은 최상위 (root em)이다. 겹쳐서 em 하면 계속 커지니까 불편해지므로 rem을 쓴다. vh, vw vh는 브라우저 높이값의 1/100이고, vw는 브라우저 너비값의 1/100이다. %랑 많이 다른가? vmin, vmax 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있음. 브라우저 크기가 1000px 너비 800px 높이라면 1vmin : 8px, 1vmax : 10px. 이런 식. 화면에 넘치지 않는 정사각형을 만들 수 있음. ex, ch 폰트 사이즈에 의존하는 건 같은데, ch는 '0'의 너비값의 고급 척도. monospace 폰트의 너비값을 부..
오늘은 왼쪽 인디케이터를 만들었다. 저거 누르면 각각 페이지를 스무스하게 스크롤이 된다. 영상 참고. 그런데 문제는 이제 아이콘 오른쪽에 바가 페이지에 따라 딱딱 이동하길 바라는데 생각보다 어렵다. js를 동원해서 구현하고 있는데 생각보다 별로다. 그리고 오늘은 페이지 스크롤 시에 0~100퍼센트 width로 채워지는 걸 알아냈다. 다음에 티스토리 스킨에 끼워 놓아도 될 것 같다. 이거 역시 js로 처리해야 함. 200829_ienlab_microsite · ericanorhee/ienlab_microsite@49c658b 스크롤 추가. 왼쪽 인디케이터와 페이지 스무스 이동 추가 github.com
