![]()
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
![]()
오른쪽에 instagram, fb, github, behance 아이콘을 추가했고, 로고와 앱 아이콘을 추가했다. 저 친구들은 스크롤 인디케이터 역할을 할 것이며 세로 정렬이 필요하다. 스크롤 중에는 저 중간 위치에 고정이 되어 있어야 한다. 200828_ienlab_microsite · ericanorhee/ienlab_microsite@aaa249e 메인 웹사이트 개발 시작 첫화면 github.com
![]()
대충 얕은 지식 가지고 웹사이트 개발을 시작했다. 모르는 건 그때그때 검색하면서 공부하면 될 것 같음 예전에 공부했던 게 조금씩 생각나기 시작했다. transition이 CSS3의 AtoZ인건 팩트 같은데.. 너무 부드럽다. 그리고 Font Awesome 이제 된다. all.css인가 그걸 import해야 되더라. 예전이랑 좀 바뀐 것 같다. 여튼 아이콘 import했고 다음에는 아이엔랩 로고 옆에 배치를 해야 한다. 200825_ienlab_microsite · ericanorhee/ienlab_microsite@f9274c3 메인 웹사이트 개발 시작 첫화면 github.com
![]()
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 핵심인가, 너무 이쁘다.
![]()
200823_ienlab_microsite · ericanorhee/ienlab_microsite@030c4fe 11 edu.goorm.io/learn/lecture/16942/웹퍼블리싱-실습-반응형-사이트-만들기/lesson/813681/11-헤더-타이틀 github.com 헤더 타이틀을 CSS로. 이번엔 shadow와 transition 사용했음.
![]()
이건 보고 그대로 했다. 10개 -> 8개 -> 9개가 되는데 nth-child로 숨기거나 보이거나 이렇게 했다. display:none 이건 앞의 내용을 바탕으로, 미리 보기? 샘플 사진만으로 그거 보고 미디어 쿼리와 CSS, HTML로 구현한 것이다. 보고 한 건 이거고, 생각보다 수월하게 작업할 수 있었다. 이건 헤더를 구현한 것인데, 이거 역시 너비를 조절하면 횡스크롤바가 생기는 것을 방지하고, 답답함을 줄이기 위해 빈칸을 넣게 되었다. https://github.com/ericanorhee/ienlab_microsite/commit/92881ee38a37966d15bf7d372a26e135d93892ce 200822_ienlab_microsite · ericanorhee/ienlab_micros..
![]()
이번에는 보지 않고 사진만 보고 구현하는 것을 목표로 하고 있다. 완성. 코드는 깃허브에! 재밌다. 언제까지나 미디어 쿼리만 잡고 있긴 그렇지만 차근차근! https://github.com/ericanorhee/ienlab_microsite/commit/9070c85c8955bb1d5bc6c973c48be0bf3182e973 200820_ienlab_microsite · ericanorhee/ienlab_microsite@9070c85 05 edu.goorm.io/learn/lecture/16942/웹퍼블리싱-실습-반응형-사이트-만들기/lesson/813675/05-반응형-레이아웃-유형-3 github.com
