css구조

1. 수직, 수평정렬

1-1 position을 이용

<div class="container">
  <div class="item"></div>
</div>

.container {
  position: relative;
  width: 400px;
  height: 250px;
  background-color: royalblue;
}

수직 중앙배치

1. position: absolute(부모요소 position: relative설정)을 통해 부모요소를 기준으로
2. width값을 설정해 넓이 값 지정
3. top:0, bottom:0으로 수직의 양 끝점을 잡기
4. margin top과 margin bottom을 auto로 설정

   .item {
     width: 100px;
     height: 100px;
     background-color: orange;
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto 0;
   }

   
   

수평 중앙배치

1. position: absolute(부모요소 position: relative설정)을 통해 부모요소를 기준으로
2. height값을 설정해 넓이 값 지정
3. left:0, right:0으로 수평의 양 끝점을 잡기
4. margin right과 margin left을 auto로 설정

  .item {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

.inner

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

2. 링크영역

a태그를 만들 때 사용자가 충분히 클릭할 수 있는 영역을 만들어주는 것이 중요합니다.

2-1 padding

링크 영역을 넓히는 방법 중 하나가 padding값을 통해 영역을 넓혀주는 것입니다. 단, a태그는 inline요소이기 때문에 mragin과 padding의 값을 가질 수 없기에 display속성을 통해 블록요소로 바꿔줘야합니다.

2-2 :hover

• 링크영역에 마우스를 가져다댔을 때 효과(색상 바꾸기 등)를 주어 링크영역을 명확하게 할 수 있습니다.

<ul>
  <li><a href="#">Sign In</a></li>
  <li><a href="#">My Starbucks</a></li>
  <li><a href="#">Customer Service & Ideas</a></li>
  <li><a href="#">Find a Store</a></li>
</ul>

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

ul.menu li a:hover {
  color: #000;
}

3.before을 통한 구분선 그리기

• before요소 사용 시 content를 반드시 작성해줘야합니다.
• bofore의 경우 기본적으로 inline요소이기 때문에 display:block을 통해 block요소로 변환해줘야합니다.
• 단, position: absolute 또는 position: fixed의 경우 자동으로 block요소로 변하기 때문에 display:block가 생략 가능합니다.

  <ul class="menu">
    <li><a href="#">Sign In</a></li>
    <li><a href="#">My Starbucks</a></li>
    <li><a href="#">Customer Service & Ideas</a></li>
    <li><a href="#">Find a Store</a></li>
  </ul>

  content: '';
  position: absolute;
  width: 1px;
  height: 12px;
  background-color: #000;
  top: 0;
  bottom: 0;
  margin: auto;

• Sign In
• My Starbucks
• Customer Service & Ideas
• Find a Store

4. 검색창 제어

5. 드롭다운메뉴

• itme__name에 hover를 했을 때 itme__name의 스타일링을 하고 item__content가 드롭다운 형식으로 나타나게 하기 위해서는 hover를 item전체에 줘야합니다.
  .main-menu .item:hover .item__name {}

<ul class="main-menu">
  <li class="item">
    <div class="item__name"></div>
    <div class="item__contents">
      //드롭다운 리스트
    </div>
  </li>
</ul>

header .main-menu .item .item__name {
  padding: 10px 20px 34px 20px;
  font-size: 13px;
  font-family: Arial, sans-serif;
}

header .main-menu .item:hover .item__name {
  background-color: #2C2A29;
  color: #669900;
  border-radius: 10px 10px 0 0;
}

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

header .main-menu .item:hover .item__contents {
  display: block;
}

6. position: fixed, position: absolute

• top, bottom 속성을 사용하지 않아 수직 위치 값이 없다면 요소의 원래 크기를 그대로 사용한다. 만약, position:relative; 를 사용했다면 (위치상)부모요소를 기준으로 함으로 좌우 끝까지 차지할 수 없다. (가로 너비를 최소한으로 사용하려고 한다. 따라서 width: 100%를 사용)

<div class="container" >
  <div class="items"></div>
</div>

<style>
.container {
  background-color: orange;
  position: fixed;
}
.items {
  width: 1100px;
  height: 120px;
  margin: 0 auto;
}
</style>

7. scroll event

window.addEventListener('scroll', _.throttle(function() {
  console.log(window.scrollY)
  if(window.scrollY > 500){
    badgeEl.style.display = 'none'
  } else {
    badgeEl.style.display = 'block'
  }
}), 300);

const badgeEl = get('header .badges');

window.addEventListener('scroll', _.throttle(function() {
  console.log(window.scrollY)
  if(window.scrollY > 500){
    // gsap.to(요소, 지속시간, 옵션);
    gsap.to(badgeEl, .6, {
      opacity: 0,
      display: 'none',
    })
  } else {
    gsap.to(badgeEl, .6, {
      opacity: 1,
      display: 'block',
    })
  }
}), 300);