Web Study

고정 너비가 없는 반응형 사이트 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 ..

사용전 자바스크립트를 불러오고 + fullpage스크립트를 불러온다 html의 구조는 다음과 같이 id 선택자 형태로 되어 있는걸 볼 수 있다 Some section Some section Some section Some section 첫번째 구역이나 구역의 첫번째 슬라이드 이외에 다른 곳을 출발점으로 정의하고 싶다면 처음 불러오시려는 구역과 슬라이드에 active 클래스를 추가 Some section 슬라이드를 추가하고 싶을 때 다음과 같이 html을 쓸 수 있다 Slide 1 Slide 2 Slide 3 Slide 4 초기 설정 > 자바스크립트 > 제이쿼리 셋팅 $(document).ready(function() { $('#fullpage').fullpage({ //options here autoSc..

주요개념 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으로..