본문 바로가기

전체 글801

200830 아이엔랩 웹사이트 개발 일지 이렇게만 보면 거의 이미지다. 그런데 글자는 글자고(...) 로고는 svg 파일이고 휴대폰이랑 스크린샷은 분리되어 있는 사진이다. 어제 생활코딩에도 올리면서 정말 찾기 힘들었던 슬라이드형 스크롤 방식은 fullpage.js라는 라이브러리를 통해 해결했다. 점점 웹사이트의 모습을 갖추고 있다. 다른 페이지도 만들어야 한다. 메인에 너무 큰 시간을 쓰고 있다. 왼쪽에 스크롤 인디케이터..? 저 부분을 약간만 더 손보고 (뒤에 원, 해당 아이콘은 채색) 왼쪽 상단이 비었다. 그 부분은 이제 다른 페이지로 이동하는 아이콘이나 텍스트를 넣어둘 예정이다. 이 정도면 뭐 나쁘진 않겠지. 그리고 2017년 고등학교 2학년 때 수행평가 한다고 HTML CSS 맛보기로 공부해서 만들어 놓은 사이트가 있었다. 당시에는 나름.. 2020. 8. 30.
200829 아이엔랩 웹페이지 개발 일지 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 폰트의 너비값을 부.. 2020. 8. 29.
200828 아이엔랩 웹사이트 개발 일지 오늘은 왼쪽 인디케이터를 만들었다. 저거 누르면 각각 페이지를 스무스하게 스크롤이 된다. 영상 참고. 그런데 문제는 이제 아이콘 오른쪽에 바가 페이지에 따라 딱딱 이동하길 바라는데 생각보다 어렵다. js를 동원해서 구현하고 있는데 생각보다 별로다. 그리고 오늘은 페이지 스크롤 시에 0~100퍼센트 width로 채워지는 걸 알아냈다. 다음에 티스토리 스킨에 끼워 놓아도 될 것 같다. 이거 역시 js로 처리해야 함. 200829_ienlab_microsite · ericanorhee/ienlab_microsite@49c658b 스크롤 추가. 왼쪽 인디케이터와 페이지 스무스 이동 추가 github.com 2020. 8. 28.
200827 아이엔랩 사이트 개발 일지 오른쪽에 instagram, fb, github, behance 아이콘을 추가했고, 로고와 앱 아이콘을 추가했다. 저 친구들은 스크롤 인디케이터 역할을 할 것이며 세로 정렬이 필요하다. 스크롤 중에는 저 중간 위치에 고정이 되어 있어야 한다. 200828_ienlab_microsite · ericanorhee/ienlab_microsite@aaa249e 메인 웹사이트 개발 시작 첫화면 github.com 2020. 8. 27.
200826 아이엔랩 웹사이트 개발 일지 대충 얕은 지식 가지고 웹사이트 개발을 시작했다. 모르는 건 그때그때 검색하면서 공부하면 될 것 같음 예전에 공부했던 게 조금씩 생각나기 시작했다. transition이 CSS3의 AtoZ인건 팩트 같은데.. 너무 부드럽다. 그리고 Font Awesome 이제 된다. all.css인가 그걸 import해야 되더라. 예전이랑 좀 바뀐 것 같다. 여튼 아이콘 import했고 다음에는 아이엔랩 로고 옆에 배치를 해야 한다. 200825_ienlab_microsite · ericanorhee/ienlab_microsite@f9274c3 메인 웹사이트 개발 시작 첫화면 github.com 2020. 8. 26.
12 헤더 아이콘 근데 웹 폰트가 다 깨져버린 https://github.com/ericanorhee/ienlab_microsite/commit/3e2747ce8daa16e4b75f239b57198ca1b66153e8 200825_ienlab_microsite · ericanorhee/ienlab_microsite@3e2747c 12 edu.goorm.io/learn/lecture/16942/웹퍼블리싱-실습-반응형-사이트-만들기/lesson/813682/12-헤더-아이콘 github.com 웹 폰트를 import해서 하는 거 같은데 다 깨졌다. 사실 이번에는 그리 중요치 않으니까 그냥 넘어가야지. transition이 CSS3 핵심인가, 너무 이쁘다. 2020. 8. 25.

티스토리툴바