20250310 데브코스 프론트엔드 Day5

💡 인사이트

• color 값 넣을 때 그냥 black 사용하는 것은 좋지 않다. #000이나 rgb 사용해야 한다.
  
• 스타일 적용할 때 html태그를 사용해서 스타일 적용하는 것은 좋지 않은 방법이다. 클래스를 사용해서 스타일 적용해라.
  
  
• 아이콘 사용할 수 있는 사이트 : font-awesome, Google Fonts/icons
  
  
• 폰트 사이트 : Google Fonts

@import url()

html 파일에 로 css 파일 import하지 않고, css파일에서 @import url()로 다른 css파일 import하는 방식도 가능하다.

반응형 웹 css

@media all and (min-width:320px) and (max-width:1024px) {
  ...
}

햄버거 버튼에서 x버튼으로 만드는 법

먼저 span 태그를 사용해서 햄버거 버튼을 만든다.

.m_gnb_menu_btn a span{
    width: 20px;
    height: 3px;
    display: block;
    background-color: #005eaa;
    position: absolute;
}
.m_gnb_menu_btn a span:nth-last-of-type(1){ /* nth-last-of-type */
    top: 5px;
    left: 4px;
}
.m_gnb_menu_btn a span:nth-last-of-type(2){
    top: 12px;
    left: 4px;
}
.m_gnb_menu_btn a span:nth-last-of-type(3){
    top: 19px;
    left: 4px;
}

이후에 m_gnb_menu_btn에 on 클래스를 추가하고, on 클래스에 관해서 작대기를 회전시켜 x버튼으로 변경 될 수 있도록 한다.

  .m_gnb_menu_btn.on a span:nth-of-type(1){
      top: 12px;
      left: 3px;
      transform: rotate(45deg);
  }
  .m_gnb_menu_btn.on a span:nth-of-type(2){
      display: none;
  }
  .m_gnb_menu_btn.on a span:nth-of-type(3){
      top: 12px;
      left: 3px;
      transform: rotate(135deg);
  }

:nth-last-of-type()

끝 부터 계산한다.
:nth-last-of-type(1)하면 끝에서 첫번째 요소, 즉 마지막 요소에 스타일을 적용한다.

margin: 0 auto

margin: 0 auto는 width: 100%나 width값이 지정되어 있지 않으면 적용할 수 없다.
따라서 이럴때는 display: flex; justify-content: center;로 중앙 정렬해준다.
width: 1024px처럼 width값이 지정되어 있을 때 margin: 0 auto를 적용할 수 있다.

넘치는 텍스트 말줄임표로 표시하는 방법

{
  width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

---