오늘은 별로 수정한 게 없다. 앱 이름, 설명, 다운로드 버튼이다. 그리고 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 폰트의 너비값을 부..