문제가 많이 발생됐던 어려운 예제 였던 것 같다. 어떤 효과를 주는 것은 제외하고 구조적인 부분은 순탄하게 됐던 것 같은데... 작업을 하면 할 수록 문제가 생가더니 거의 기존 탑바 클론 코딩 작업 시간 보다 두배정도? 소요된 것 같다. 일단 처음에 사이트만 보고 작업을 하였는데, 그 부분도 시간 지연에 영향이 컸던 것 같다.(덕분에 공부는 정말 많이 된 것 같다) 원래 사이트에서 현재는 탑배너 광고를 꺼두었는데 개발자 도구로 뒤늦게 확인한 부분도 있고...그래서 사이트와는 다른 방향으로 작업하게 됐던 것 같다. 사이트에서는 탑바와 마우스 오버 했을 때, 서브 메뉴의 배경을 한 번에 덮어주는 방식으로 했고 나는 탑바의 주메뉴와 서브 메뉴를 따로 따로 분리해서 작업하는 방식으로 하였다. 내 작업물은 탑바의..
오늘 작업에서는 크게 느낀점은 없는데, 잘 진행되다가 탑바의 밑줄을 긋는 작업을 하다가 시간을 엄청 잡아 먹었다. 밑줄이 있고 그 밑에 작은 높이의 여백이 있는 상태 였는데, 탑바의 크기는 밑줄까지만 포함되고 있었다. 암튼 그래서 이 선을 마우스로 갖다 댔을 때 서브 메뉴 호버가 풀리는 현상이 있는데, 선이 완전 바텀 부분이 아닌 중간에 오니 무슨짓을 해도 이 현상을 해결할 수 없었다. 근데 그 여백의 크기가 알고 보니 백그라운드 이미지 였던것..! 정말 쓸데없는걸로 시간을 많이 낭비 한 것 같다. 개발자 도구를 좀 더 면밀히 봤어야 했었나.. 나름 집중하고 있었던 것 같은데. " target="_blank" rel="noopener">codepen.io/issue72y/pen/xxEQrRx"> See ..
고정 너비가 있는 적응형 사이트 1. 처음 사이트 분석을 하면서 갑자기 혼동이 온 것 같다. 너비가 컨턴츠마다 제각각이다. 그래서 선생님 작업 영상을 보니 가장 대표적으로 많이 쓰인 너비를 기준으로 잡아주고 진행 하시는 걸 볼 수 있었다. 대표적으로 많이 쓰인 너비를 기준으로 잡고 본 컨텐츠 들어 갔을 때는 각각 너비를 재설정 해주는 형태일 듯 싶다. 2. 첫번째 혼동 했던 부분과 연장 선상에서의 문제 였는데, 본아이에프 최상단에 광고 배너가 있다. html을 쓰고 min-width를 잡고 width도 써주고 해야되는데, 어느곳에 각각 써줘야 하는지 잠시 헷갈렸던 부분이 있다. 근데 딱히 혼란스러워할 문제는 아니었던 것 같다. 그냥 top-bar를 감싸는 클래스 하나가 늘었을 뿐. 3. 주관적인 생각인데..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ecBotZ/btqTkh8QdDd/5XEcdgCLM4z38vGwWpDuAK/img.gif)
line-height > 인라인 박스의 높이를 조정한다 Value normal : 브라우저는 해당 요소의 글꼴 크기를 기준으로 인라인박스의 높이를 계산하는데 그 값이 1.0에서 1.2사이가 될것으로 추측한다 실수 : 단위를 포함하지 않는 실수를 지정한다. 음수값은 사용할 수 없다 길이 : 인라인박스의 높이를 고정값으로 지정한다. 음수값은 사용할 수 없다 백분율 : 글꼴 크기에 대한 퍼센테이지로 지정한다. 음수값은 사용할 수 없다 출처 : opentutorials.org/course/718/3902(생활코딩)
- Total
- Today
- Yesterday
- 피그마
- 플렉스 반응형 그리드
- UI디자인
- 플렉스 박스(flex box)
- 플렉스 박스(flex-box)
- 플렉스 반응형
- 플렉서블 박스(flexible-box)
- 프로토타입
- 피그마(figma)
- 웹
- 피그마(figma) 로컬 폰트 적용
- 디자인툴
- 피그마(figma) 폰트 적용
- figma
- 레이아웃 정렬
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |