[카테캠 선택강의] 헤더와 드롭다운 메뉴

img baseline

img {
  /* img(인라인 요소) 하단에 Baseline 공백을 제거 */
  display: block;
}

중앙 정렬

정렬을 할때는 보통 flex 를 사용하는데 강의를 보니 내가 잘 사용하지 않지만 많이 쓰이는 방법을 설명해주셔서 기록한다.

만약 위와 같은 레이아웃을 잡아야한다면 어떻게 했을까?

다음과 같이 flex 를 사용했을 것이다.

HTML
<body>
    <div class="outer">
      <div class="inner"></div>
    </div>
</body>

CSS
.outer {
  display: flex;
  align-items: center;

  width: 400px;
  height: 250px;

  background-color: royalblue;
}

.inner {
  width: 100px;
  height: 100px;

  background-color: orange;
}

솔직히 뭐가 좋다의 영역보다는 코딩 스타일의 영역이라고 생각한다.

또한 여러사람의 코드를 읽어낼 수 있는 능력을 갖춰야하기 때문에 같은 기능을 구현하더라도 여러방법을 아는 것이 중요하다고 생각한다.

배운 코드는 다음과 같다.

.outer {
  position: relative;

  width: 400px;
  height: 250px;

  background-color: royalblue;
}

.inner {
  position: absolute;
  top: 0;
  bottom: 0;

  width: 100px;
  height: 100px;

  margin: auto 0;

  background-color: orange;
}

바깥 영역의 레이아웃을 position: relative 로 두고 inner 에 position: absolute 을 준다.

그 후 top:0 과 bottom:0 을 주는 이유는 다음과 같다.

부모 레이아웃의 top 과 bttom 시작 지점을 알기에 브라우저가 margin: auto 를 계산하여 가운데로 자식 요소를 보낼 수 있다.

또한 이러한 브라우저의 계산을 위해 자식 요소의 height 를 꼭 알려주어야한다.

만약 가운데 정렬을 하고 싶다면 어떻게 해야할까? 코드는 다음과 같을 것이다.

.outer {
  position: relative;

  width: 400px;
  height: 250px;

  background-color: royalblue;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100px;
  height: 100px;

  margin: auto;

  background-color: orange;
}

또한 left, right , text-align 을 사용해서 가운데 정렬을 할 수도있다.

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

만약 셋 중에 하나를 고르라고 한다면 flex 를 사용하는 방법이 코드 길이로 봤을 때 더 간단하고 협업하는 개발자도 쉽게 생각할 수 있을 거라 판단하여 flex 를 사용할 것 같다.

href = "#" 의 의미

코드를 종종 보다보면 다음처럼 href="#" 을 쓴 코드를 보게된다.

 <a href="#">My Starbucks</a>

그래서 나 자신에게 저 코드가 뭐하는거야? 라고 물었을 때 '어어' 하게 되는 걸로 보아 나는 저 코드의 의미를 잘 모른다.

설명할 수 있도록 알아보자.

a 태그가 아무기능도 안한다는 관례

분명히 HTML 을 작성하다보면 해당 요소를 클릭하면 다른 페이지로 이동하게 될 터인데, 아직 그 페이지가 정해지지 않는 경우에 사용하는 코드가 2가지가 있다.

1. <a href="#">My Starbucks</a>

2. <a href="javascript:void(0)">Customer Service & Ideas</a>

이때 사용되는 것이 href="#" 이다. 다만 href="#" 를 클릭하면 화면 최상단으로 이동하게 된다.

2번 코드는 a 태그를 선택했을 때 정말 아무 동작도 하지 않는다.

다른 기능

#none 을 사용하면 최상단으로 이동하는 것을 없앨 수 있다.

<a href="#none">My Starbucks</a>

#logo 라는 값을 주었을 때는 같은 페이지내의 name="logo" 라는 속성을 가진 a 링크의 위치로 이동한다.

다른 태그는 안되는 것 같다. a 태그 만 가능하다.

<a name="logo" href="/" class="logo">
  <img src="./images/starbucks_logo.png" alt="STARBUCKS" />
</a>

<a href="#logo">My Starbucks</a>

사용자 UX

링크를 만들때에는 사용자가 어떤 UX 를 가질지 고려를 하고 만들어야한다.

간단한 a 링크 태그 하나를 만들때도 그렇다.

다음처럼 padding 을 주어 근처 영역어 커서를 놓더라도 클릭을 할 수 있으면 더 좋은 UX 를 가질 수 있을 것이다.

이런 것들이 하나씩 모여 좋은 어플리케이션이 되지 않을까?

그리고 해당 요소의 css 를 살펴보면 다음과 같다.

header .sub-menu ul.menu li a {
  padding: 11px 16px;
  display: block;
  font-size: 13px;
  color: #656565;
}

왜 display:block 으로 선언 되어 있을까?

해당 CSS 가 적용이 되어있지 않은 요소를 보자.

a 태그는 인라인 태그이기 때문에 baseline 공백이 존재해 원하는 위치보다 위에 요소가 존재한다.

이와 같은 문제를 해결하기위해 display:block 을 선언한 것이다.

그리고 position 을 통한 중앙정렬을 배웠는데, 이러한 UI 를 구현할 때는 flex 보다 훨씬 편리했다.

흰색 세로선은 li 태그의 :: before 가상 요소 이다. 이 요소들을 가운데 정렬하기위해 다음과 같은 CSS 가 사용되었다.

header .sub-menu ul.menu li {
  position: relative;
}
header .sub-menu ul.menu li::before {
  content: '';
  width: 1px;
  height: 12px;
  background-color: #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

그리고 before 가상 요소를 사용하면 Sign In 앞에도 흰 줄이 생기는데 해당 요소는 다음 CSS 를 통해 제거한다.

header .sub-menu ul.menu li:first-child::before {
  display: none;
}

hover

이것을 기록하는 이유는 선택자 지정시에 .item:hover .item__name 처럼 hover 를 사용할 경우도 지정이 가능하것을 다시 봤을 때 상기하고 싶어서다.

<ul class="main-menu">
  <li class="item">
    <div class="item__name">COFFEE</div>
    <div class="item__contents"></div>
  </li>
</ul>

header .main-menu .item .item__name {
  padding: 10px 20px 34px 20px;
  font-family: Arial, sans-serif;
  font-size: 13px;
}
header .main-menu .item:hover .item__name {
  background-color: #2c2a29;
  color: #669900;
  border-radius: 6px 6px 0 0;
}

Position 을 사용할 때 Left 만 존재 한다면

fixed 는 뷰포를 기준으로 배치하는 CSS 이다. 이때 top 과 left 와 같은 위치가 정해지지 않았으므로 다음과 같은 이상한 배치가 된다.

header .main-menu .item .item__contents {
  width: 100%;
  position: fixed;
  display: none;
}

만약 left 값 (top, bottom 없이) 만 주게 된다면 수직위치는 요소의 원래 위치를 기준으로 합니다.

header .main-menu .item .item__contents {
  width: 100%;
  position: fixed;
  left: 0;
  display: none;
}

Common CSS

CSS 보면 공통으로 쓰이는 부분은 Common 으로 분리하고 , 각 요소마다 달리 적용되야하는 부분은 > 자식 선택자를 사용해서 적용하는 코드이다.

근데 코딩하다보면 코드가 지저분해져서 분리하기가 어려운 것 같다. 아마 이러한게 잘하는 프론트 개발자와 아닌사람을 구분하는 차이인가..

/*COMMON*/
...

.inner {
  width: 1100px;
  margin: 0 auto;
  position: relative;
}

/*HEADER*/
header > .inner {
  height: 120px;
}

BEM(Block Element Modifier)

아래 이미지의 왼쪽 코드에 .container .name 에 CSS 를 적용하면 여러 요소에 CSS 가 적용된다. 이러한 중첩현상은 굉장히 개발시에 불편함을 느끼게한다. 따라서 BEM 을 사용하여 어떤 요소의 일부분인지 표현을 해줌으로 의도치않은 CSS 가 적용되는 것을 방지한다.

absolute 는 꼭 relative 와 함께 쓰이지 않아도 된다.

fixed 랑도 같이 쓸 수 있다.

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

심지어 absolute 가 부모인 경우에도 자식이 absolute 를 사용하면 absolute 를 가진 부모를 기준으로 배치된다.완전히 잘못이해하고 있었다.

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

image border-radius 처리

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

저작자표시

'카카오 테크 캠퍼스 > HTML CSS JS Advanced' 카테고리의 다른 글

[카테캠 선택강의] 섹션과 푸터 만들기 (2)	2023.05.16
[카테캠 선택강의] IntersectionObserver (2)	2023.05.15
[카테캠 선택강의] 콘텐츠 구성 (0)	2023.05.13
[카테캠 선택 강의] 내비게이션 사용기술 정리 (2)	2023.05.12
[카테캠 선택강의] 애플 반응형 웹사이트 헤더 (0)	2023.05.12

img baseline

중앙 정렬

href = "#" 의 의미

코드를 종종 보다보면 다음처럼 href="#" 을 쓴 코드를 보게된다.

a 태그가 아무기능도 안한다는 관례

다른 기능

사용자 UX

hover

Position 을 사용할 때 Left 만 존재 한다면

Common CSS

BEM(Block Element Modifier)

absolute 는 꼭 relative 와 함께 쓰이지 않아도 된다.

image border-radius 처리

'카카오 테크 캠퍼스 > HTML CSS JS Advanced' 카테고리의 다른 글

티스토리툴바