[카테캠 선택강의] 애플 반응형 웹사이트 헤더

폰트 적용 순서

우선적으로 Roboto 가 적용된다. 하지만 Roboto 는 한글폰트는 없기 때문에 한글에는 2순위인 Noto Sans KR 이 적용된다.

1순위, 2순위도 존재하지 않는 경우 내장되어있는 글꼴 계열인 sans-serif 가 적용된다.

  font-family: "Roboto", "Noto Sans KR", sans-serif;

 

 

단어 단위 줄바꿈

단어 단위의 줄바꿈을 변경하는 CSS 속성은 word-break 이다.

word-break 의 디폴트는 normal 인데, 이는 영어 단어에는 잘 적용된다.

 

 

하지만 한글에는 적용되지 않는 것을 볼 수 있다.

 

 

따라서 한중일(CJK) 텍스트 에도 줄바꿈이 적용되게 하려면 word-break: keep-all 속성값을 주면된다.

 

 

 

Flex  align-items 활용

flex 의 align-items 의 디폴트 값은 stretch 이므로 container 의 높이 만큼 늘어나는 성질을 가진다.

 

아래 코드를 보면 초록색 영역을 붉은색 영역 높이 만큼 늘어나게 하고 싶다. 이 경우 align-items 의 stretch 를 사용하는 방법이 있다.

 

초록색 영역의 컨테이너인 붉은색 영역에 flex 속성을 주면 자동으로 초록색 영역이 늘어나게 되는 것이다.

 

 

 

갑자기 든 생각인데, 퍼블리싱 작업할 때 

아래처럼 border 에 색깔주고 작업하면 요소가 시각적으로 보여서 작업하기 편할듯. 이거 히트 일지도?

 

 

 

 

헤더 기본 구성

흠~ 비슷했는데.. 디테일이 부족했다.

flex 로 부모 height 사용하는거 잘 기억해보자.

 

 

 

인라인 요소

인라인 요소는 패딩은 상하좌우 다 적용되고 마진은 좌우만 적용된다.

 

 

 

text-indent : -9999

텍스트가 있는 요소에 background-image 를 적용하면 다음 처럼 이미지가 적용된다.

이럴때 스크린 리더가 읽을 수 있는 텍스트를 남기고 background-image 모두 사용할 수 있는 방법이 없을까?

 

 

바로 text-indent 를 사용하여 요소내부의 텍스트를 안보이는 영역으로 보내버리면 된다.

흔히 text-indent: -9999px은 내부의 텍스트가 스크린 리더에 읽히는 대체 텍스트를 의미한다.

이를 통해 스크린 리더에는 읽히지만 텍스트는 보이지 않는 UI를 만들 수 있다.

 

 

 

 

top: 100%

아래 코드펜을 보면서 top:0 과 top:100% 을 잊지말자.

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 디테일한 UI 만들기

아래처럼 뾰족한 UI 를 한번 만들어보자.

 

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

 

 

 

 

 

 

 

 

 

나는 배운 코드를 안보고 구현하니 위처럼 되었는데, 원래는 overflow hidden 을 사용했다. 또한 transform 의 기준점을 변경해야한다면 transform-origin 을 사용하기도 한다.

 

아래 붉은색 영역에 overflow hidden 을 적용하면 파란영역의 절반 아래 부분이 보이지 않게 되어 뾰족한 UI 가 구현되게 된다.

 

 

 

이벤트 버블링

 

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

 

 

 

 

 

 

 

 

stopPropagation

이벤트 버블링을 막는 메소드이다.

child 요소에서 stopPropagation 을 사용하였으므로 Parent 로 이벤트가 버블링 되지않는다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 복잡한 로직을 간단한 함수이름으로 추상화하기

basketEl.classList.add('show') 라는 코드를 보았을때 협업하는 개발자가 어떤 코드지~ 하고 어떤 css 가 적용되는지 확인해야한다.

그들을 돕기위해 함수명으로 showBasket( ) 처럼 장바구니를 보여준다. 라고 함수이름 자체를 주석처럼 사용하면 같이 협업하는 개발자가 의 노고를 덜 수 있다. 

 

 

 

 margin 에 음수값을 주는 방법

margin 에 왜 양수값만 줘야한다고 생각했던걸까?

 

텍스트를 왼쪽으로 옮기고 싶다. 

padding 값을 조정하는 방법도 있지만, margin 에 음수값을 줘서 옮길 수 있다.

 

잘보면 패딩 영역이 왼쪽으로 margin 에 준 음수값만큼 이동한 것을 확인할 수 있다.

 

 

 

 

익명 함수

searchCloserEl.addEventListener('click', function() {
  hideSearch()
})

function showSearch() {
  headerEl.classList.add('searching')
}

 

click 이벤트는 익명함수를 사용한다. 익명함수의 내부에 hideSearch 함수를 호출하는 코드 한줄밖에 없기때문에 위 코드는 아래 코드로 바꿀 수 있다. 

searchShadowEl.addEventListener('click', hideSearch)

function showSearch() {
  headerEl.classList.add('searching')
}

 

호출할 함수의 이름을 넘겨준다~ 정도로 이해하면 되겠다.

 

 

 

스크롤 못하게 하기

다음 영상을 보면 검색창이 떴을 때 스크롤이 동작한다.

 

이러한 스크롤이 동작하지 않게 하고 싶다면?

html 요소에 검색창이 켜졌을 때 해당 클래스를 토글되게 해주면 된다.

html.fixed {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
}

 

 

왜 전개 연산자를 사용했을까?

 

읽어보고 정리하기

 

 

 

 

헤더 카테고리 순차적으로 애니메이션 적용하기

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

 

 

 

 

 

 

 

아래 코드를 보면 li 요소에 opacity 에 대해 transition 을 적용하고 싶기 때문에 li 요소에 transition 을 명시해줘야한다.

.container {
  display: flex;
}

.container > li {
  padding: 30px;
  font-size: 30px;
  opacity: 0.99;
  transition: all 3s;
}

.container.hide > li {
  opacity: 0;
}

 

 

 

토글시 첫 클릭은 transition 이 적용되게 두번째 클릭이 적용되지 않게 하는 방법

아래 코드에서는 transition 을 .box 에 부여하지 않고 .box.hide 에 부여함으로써 원하는 동작이 발생하도록 하였다. 

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

 

 

 

 

 

click 이벤트 안되는 경우

click 이벤트가 제대로 동작하지 않는 상황은 수많은 상황이 있겠지만 공부하다 만난 버그상황을 기록한다.

 

 

CSS에 z-index 값은 사용하지 않았다. 따라서 HTML 코드만 보았을 때 .search-wrap 을 가지는 요소가 click 이벤트를 발생시켜야하는 .search-starter 보다 뒤에 있기 때문에 더 위에 쌓인다.
따라서 해당 영역을 클릭했을 때 .search-wrap 이 클릭되어버리는 버그가 발생한다.

<header>
      <div class="inner">
        <ul class="menu">
          ...
          <li class="search-starter"><a>검색</a></li>
          ...
        </ul>

        <div class="search-wrap">
        </div>
</header>

따라서 클릭이 발생하기 위해서는 .search-starter 를 display: none 을 사용하여 없애주는 과정이 필요하다.
또한 visibility: hidden 을 줘도 클릭이 가능해진다.

 

 

transition 이 걸려있는 input 에 focus 주는 경우 유의할 점

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

 

위 코드에서 클릭을 눌러보면 js 코드에 Focus가 있음에도 제대로 동작하지 않는다 그 이유는 무엇일까?

그 이유는 transition 으로 인해 1초 뒤에 input 에 show 클래스가 추가 되면서 요소가 visible 되는데 그전에 focus 를 실행하기 때문에 버그가 발생하는 것이다.

 

그러면 이를 어떻게 해결해야할까?

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

위 코드처럼 setTimeout 을 적용해 1초 후에 foucs 가 실행되도록 해주면 된다.