Web Study

고정 너비가 있는 적응형 사이트 1. 처음 사이트 분석을 하면서 갑자기 혼동이 온 것 같다. 너비가 컨턴츠마다 제각각이다. 그래서 선생님 작업 영상을 보니 가장 대표적으로 많이 쓰인 너비를 기준으로 잡아주고 진행 하시는 걸 볼 수 있었다. 대표적으로 많이 쓰인 너비를 기준으로 잡고 본 컨텐츠 들어 갔을 때는 각각 너비를 재설정 해주는 형태일 듯 싶다. 2. 첫번째 혼동 했던 부분과 연장 선상에서의 문제 였는데, 본아이에프 최상단에 광고 배너가 있다. html을 쓰고 min-width를 잡고 width도 써주고 해야되는데, 어느곳에 각각 써줘야 하는지 잠시 헷갈렸던 부분이 있다. 근데 딱히 혼란스러워할 문제는 아니었던 것 같다. 그냥 top-bar를 감싸는 클래스 하나가 늘었을 뿐. 3. 주관적인 생각인데..

고정 너비가 없는 반응형 사이트 1. 탑바를 position:absolute + width:100% 했을 때, 좌우로 padding값을 주니 탑바가 잘려 버렸다. 그 부분을 확인 하는데 시간이 많이 걸렸던 것 같다. 문제가 메뉴 자체에 flex-grow를 줘서 영역을 다 먹어 버린 줄 알았다. 또는 도대체 어떤 쪽이 문제인지 테스트 해보고 고민을 많이 했던 것 같다. 탑바의 너비가 body를 이어 받아서 100%로 쫙쫙 늘어나게 되었는데 거기에 이물질이 꼈다고 가정하자. 그럼 당연히 넘치치 않겠는가. 탑바 밑에 자식들에게 padding값을 주거나 탑바에 box-sizing:border-box주면 해결 2. 메뉴 아이템에 밑줄 효과를 줄 때, 가운데서 뻗어나가야 하는데 자꾸만 왼쪽에서 뻗어 나가는 문제가 ..

뭔가 좀 우왕좌왕 하다가 시간만 잡아 먹은 것 같다. flex-grow를 부여해서 간격을 벌려야 하는 부분에서 살짝 헷갈렸던 것 같은데... flex-grow한 부분이 공간을 다 잡아먹기 때문에 뒤에 나오는 요소들은 각각의 너비가 필요하고 해당 적용할 때 기존처럼 div 클래스를 추가해서 넣어도 될 것 같고 추가 없이 메뉴바에 넣어서 해도 될 듯 하다. 그리고 아이콘 정렬하는데 뭔가 정상적으로 잘 안된 느낌이라서 다시 한 번 살펴보고 마지막으로 반응형, 적응형 최소너비 등을 부여하는것에 아직도 혼동하는 부분이 있다. 확실히 봐두도록 하자 See the Pen wvzXMGo by sunshine77 (@issue72y) on CodePen.

이노테크 탑바를 클론 코딩 하면서 마침 풀페이지 형태로 되어 있는걸 보고 fullpage.js를 써보기로 했다. html 구조는 이렇게 id 선택자로 되어 있어야 하며, 그 밑으로 section 클래스가 들어간다. section당 한 페이지라고 보면 되는데 여기서도 클래스 자체는 section이 아니여도 상관 없지만, section 클래스명은 무조건 써줘야 한다! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti natus facilis odio possimus repellat. Quidem, facere! Saepe nobis architecto asperiores excepturi velit possimus, error quasi ..

주요개념 transition(duration, delay), overflow(hidden), box-sizing(border-box), flex, position(absolute, fixed), jQuery(addClass, removeClass, scroll, scrollTop) 점점 줄어들다가 최소 너비에서 줄어들지 않는 적응형으로 구성 작업 방식은 3가지로 가능할 것 같다. 1. 탑바(로고, 메뉴, 언어박스) positon:absolute하고 +세부적으로 float 정렬해서 최대한 jquery를 쓰지 않는 방법 2. 탑바(로고, 메뉴, 언어박스) positon:absolute하고 +세부적으로 flex 정렬 3. flex로만 작업 이 중에서 나는 flex로만 작업을 했다. 선생님 예제는 float으로..