국비 지원 IT(웹앱개발) 취업반 강의 35일차 (HTML, CSS, JS)

어제 구현중이던 1차메뉴-2차메뉴는 이렇게 만들었다.

See the Pen 1차 2차 메뉴 만들기 by qBlackBirdp (@qBlackBirdp) on CodePen.

이건 어제 야매로 만든거고

강사님이 하시는 걸 보면서 같이 만든 것이 아래거다.

See the Pen 2차 메뉴 만들기. by qBlackBirdp (@qBlackBirdp) on CodePen.

css를 짤 때 필요에 의해서 자손을 선택해주는거지, 처음부터 자손선택자를 사용하면서 절대, "절대로" 그렇게 하면 안된다고 하셨다.

어제 만들 때 어려웠던 이유가 아마 나도 저렇게 접근해서 그랬던 것 같다.

아무튼 다음은 3차 메뉴까지 구현하는 것이다.

See the Pen 3차메뉴 by qBlackBirdp (@qBlackBirdp) on CodePen.

이렇게 했는데 마지막 3차 메뉴는 오른쪽이 아닌 왼쪽으로 나오게 해야됐다. 3차 메뉴를 만들고 오른쪽으로 나오게 하는건 생각보다 어렵지 않았다. 만들어둔 2차 메뉴에서 아래 코드만 추가 하면 됐으니까.

.menu-box-1 > ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

원래 있던 곳에서 자손선택자로 세번째 메뉴 박스를 고르고 위치만 조금 조절해주면 쉽게 끝났다. 근데 마지막 세번째에서 왼쪽으로 나오게 하는 것에서 뭘 선택해서 오른쪽으로 밀어야되는지에 대해서 시간을 꽤나 잡아 먹었다. 그냥 다 선택해서 다 해보다가 찾았다.

.menu-box-1 > ul > li:nth-child(3) ul ul {
  left: -100%;
}

첫번째 매뉴 아이템 3을 선택해주고 그 뒤의 후손을 지정해주면 되는거였다. html을 한참 들여다 봤다. 자바 처럼 선 같은걸로 좀 표기해주면 보기 편할텐데 코드펜엔 그런게 없어서 좀 애를 먹었다. 뭐 사실 핑계고 내가 구조 파악이 아직까지 잘 되지 않는 것이겠지. 또 처음부터 하라고 하면 아마 한참 걸리지 않을까. 이것도 그 때 article 연습했던 것 처럼 반복해서 연습해야될 것 같다.

암튼 이렇게 레이아웃을 짤 때 제일 중요한 것은 첫 모양을 잡고 하나씩 순차적으로 추가하고 해결해 나가는 것과 필요에 의할 때 후손 선택자를 활용하는 것이다.

다음으로는 다양하게 레이아웃들을 베웠다.

See the Pen Untitled by qBlackBirdp (@qBlackBirdp) on CodePen.

position: fixed;

화면을 따라다니는 유령이고, 스크롤해야되는 상황에서 레이아웃이 존재해야할 때 사용한다.

다음은 transition을 사용한 예제

See the Pen transition by qBlackBirdp (@qBlackBirdp) on CodePen.

.3으로 표기하면 소수점 시간초도 설정 가능하다. 코드를 잘 살펴보면 width가 0이라 선택할 수 있는 영역이 없어서 section 태그로 감싼다음 section으로 반응하게 만들었다. 이렇게 부모 자식 관계로 놓아서 반응하게 하는 방법도 있고 형제 관계로 엮어서 반응하게 하는 방법도 있다.

여태 배운것을 총집합해서

See the Pen 사이드바 만들기. by qBlackBirdp (@qBlackBirdp) on CodePen.

이런 것도 만들 수 있다.

float요소를 사용하면 그 부모에게 clearfix 클래스로 처리해야된다. 무조건. clearfix

See the Pen Untitled by woooyoung (@woooyoung) on CodePen.

여기 사용방법을 보면 이해가 쉬울 것이다.

이후에 flexbox-froggy,flexboxdefense 사이트에서 flex 기본 개념을 다지는 시간을 가지고 수업은 마쳤다.