2021-04-29 (17일차) 너비,높이 없이 absolute 가운데 정렬방법, 선택자 튜토리얼, white-space : nowrap, over-flow : scroll, hidden, ellipsis, 2차 풀다운 메뉴 만드는 방법

80강~89강

 

 

#문제. 화면 중앙 박스에 자식 4명을 2 * 2 등분, absolute사용, width, heigth 금지

 

- 1 : top, left, right, bottom, 포지셔닝 픽셀 이용 → 고정된 너비가 있어서 개체의 너비가 늘어나는 단점

- 2 : top, left, right, bottom, 포지셔닝 퍼센트 이용 → 고정된 너비가 있어서 개체의 너비가 늘어나는 단점

- 3 : 패딩을 이용 → 개체 모양 유지 성공!

      포지셔닝값을 안 주면 최소한으로 줄어드는 absolute의 속성이 있지만.

      (내부를 빵빵하게 채워넣는 속성값) padding을 주면 해결완료! 너비도 바뀌지 않음

 

#문제. 멀티 메뉴를 위한, 선택자 튜토리얼 10단계

 

#문제. 선택자 검색대상의 각각 개수 찾기

 

 

- white-space : nowrap;

  : 절대 줄바꿈 금지 → 텍스트가 태그 밖으로 넘치게 됨

 

- overflow-x : auto; 

  : 필요에 따라 가로 스크롤바 생성

  (white-space : nowrap 값을 준 상태에서 활성화됨)

  → 태그 밖으로 넘친 텍스트를 다시 태그 안으로 넣고, 보이지 않는 텍스트를 스크롤바로 확인 가능

  

- overflow-x : scroll;

  : 글씨가 넘치지 않는 상황이여도 가로 스크롤바 무조건 생성

 

- overflow-x : hidden;

  : 넘치는 텍스트를 숨겨줌

  (white-space : nowrap 값을 준 상태에서 활성화됨)

 

- text-overflow : ellipsis;
  : 넘친 텍스트 '...'으로 처리해줌

  (white-space : nowrap 과 overflow-x : hidden 값을 준 상태에서 활성화됨)

 

#시험문제 (2021-04-30-금) 대비

  - 2차 풀다운 메뉴 만들기

    작업 1, 1차 메뉴 마크업

    작업 2, 노말라이즈

    작업 3, 1차 메뉴 완성

    작업 4, 2차 메뉴 마크업

    작업 5, 2차 메뉴를 평소에 숨기기

    작업 6, 2차 hover하면 메뉴 나타나기 

    작업 7, 2차 메뉴를 유령화

    작업 8, 1차 메뉴 아이템을 유령의 집화

    작업 9, 2차 메뉴 아이템 텍스트도 꾸미기

    작업 10, 2차 메뉴에 배경색

    작업 11, 모든 메뉴에 배경색을 한방에 넣기