[TIL] 내일배움캠프 React 과정 2022.11.15

Today I Learned

웹 퍼블리싱 강의 2주차, 3주차 수강

웹 퍼블리싱 2주차 강의 내용

padding 값으로 텍스트 정렬하기

.api_atcmp_wrap .atcmp_fixer .atcmp_header {
  position: relative;
  padding: 8px 18px 0;
}

/* 전체삭제 텍스트 */
.api_atcmp_wrap .atcmp_fixer .atcmp_header .option {
  position: absolute;
  top: 9px;
  right: 18px;
}

최근 검색어와 전체삭제를 양 끝에 위치하기 위해 padding 값을 이용해서 정렬을 해주었다. 좌측의 최근 검색어는 따로 위치를 설정할 것은 없고 우측의 전체 삭제 텍스트는 추가적으로 right: 18px;을 넣어준다.

display: inline과 inline-block의 차이점

두 속성의 차이점 위주로 설명하자면 display: inline은 텍스트의 길이(영역)만큼 블록이 만들어진다. (height와 width 설정 불가) 반면에 display: inline-block은 따로 height와 width 속성을 설정해 줄 수 있다.

<i class="ico_naver"><span class="blind">네이버</span></i>로그인

아이콘(NAVER)과 텍스트가 함께 들어가는 경우에 display: inline-block 속성을 이용하면 각 요소가 자신의 사이즈 만큼만 자리를 차지해서 정렬이 가능하다.(텍스트 가운데 정렬도 가능)

더욱 자세한 내용은 링크 참고

https://www.daleseo.com/css-display-inline-block/

https://seungwoohong.tistory.com/23

CSS box-sizing 속성

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성.

content-box : 콘텐트 영역을 기준으로 크기를 정한다. (width, height에 margin, padding 값 포함X)

border-box : 테두리를 기준으로 크기를 정한다. (width, height에 margin, padding 값 포함O)

참고 (이미지로 설명 잘 되어 있음)

https://www.codingfactory.net/10630

a 태그 호버 넣기

a {
   color: inherit;
   text-decoration: none;
 }
   
a:hover {
   text-decoration: underline;
}

굉장히 간단하지만 나중에 쓰기 좋을 거 같아서 기록해두기. 텍스트에 a 태그를 넣었을 때 텍스트에 밑줄이 뜨도록 설정할 수 있다.

웹 퍼블리싱 3주차 강의 내용

CSS에서 클래스 사이에 +가 들어가는 경우

.sc_login .sub_area .link_look+.link_look:before {
  background-color: #d7dce0;
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  content: '';
}

키워드를 뭐라고 검색해야 될지 모르겠어서 검색 결과는 찾지 못했지만 CSS에서 class명 적는 부분에 .link_look + .link_look과 같이 같은 class명을 적고 그 사이에 +가 들어가는 경우가 있었다. 혼자 생각해 본 결과 gif 파일 예시와 같이 텍스트 아이디와 비밀번호찾기의 class명을 동일하게 설정한 경우에 그 사이에 요소를 넣거나 margin값을 설정하는 경우에 사용하는 거 같다. 예시의 경우에는 아이디와 비밀번호 찾기 사이에 before 가상 요소를 사용해서 회색의 작은 동그라미를 넣어 주었다.

swiper-slide 간단하게 구현하기

<script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
</script>

swiper autoplay에 loop 값 넣기

강의에서 알려주신 사이트인데 너무 편하고 좋다ㅋㅋ

https://swiperjs.com/demos

해결하는 경험

창을 새로고침 할 때마다 검색창 하단에 최근 검색어 박스가 기본으로 나타난다. 나는 이게 거슬려서 새로고침 했을 때 하단 박스가 나타나지 않도록 설정해주고 싶었다. 그래서 나름의 시도를 해봤지만 모두 실패했다.😅

시도했던 방법 01

// 새로고침 후 창 뜨지 않도록
const notShow = () => {
     $api_atcmp_wrap.hide();
}

// load 완료 시 검색창에 foucs 이동
$(function () {
     $input.focus();
     notShow();
});

javascript로 notShow라는 함수를 만들어서 설정을 해줬는데 창이 안 뜨기는 하지만 자꾸 빛 났다가 사라지는 하단 창이 너무 거슬린다.. 무엇보다도 가장 큰 문제는 하단 창을 .hide로 아예 숨겨 버렸더니 화살표 버튼을 눌러도 밑에 아무것도 뜨지 않는다.

시도했던 방법02

header(최근검색어...)와 footer(도움말...)에 인라인으로 style="display: none;" 값 넣어보기. 근데 이러면 검색창 하단에 빅 박스가 생겨버린다.

시도했던 방법03

$(function () {
     $input.focus();
     $autoFrame.toggle();
     $nautocomplete.toggleClass('fold');
});

toggle과 toggleClass 메서드를 이용해봤다.1번 방법과 같이 하단 창이 아주 잠깐 나타났다 사라지기는 하지만 화살표 버튼을 클릭했을 때 하단 창의 토글 되는 기능은 정상적으로 구현된다. 지금까지 방법 중에는 제일 낫다.

결국 튜터님께 도움 요청해서 문제 해결!🙋🏻‍♀️

문제의 이유는 내가 공부할 때 autoFrmae 부분에 display: none; 속성을 주석 처리해 놓았다는 것이었다. 이 부분을 주석 해제했더니 문제가 해결됐다. 결국 내가 문제였던 것...

$nautocomplete.toggleClass('fold');

<a href="#" id="nautocomplete" class="btn_arw _btn_arw">

그리고 질문하면서 javascript에서 .toggleClass로 class 값을 넣어줄 때 초기값을 무엇으로 설정할지는 html에서 설정할 수 있다는 것을 알게 됐다. 원래 html 파일에서 class="btn_arw _btn_arw fold"였는데 여기서 내가 원하는 대로 하기 위해서 fold를 빼주었다.

느낀 점

웹 퍼블리싱 강의에서 css 공부할 땐 옆에 크롬 창 켜 두고 일단 전체 주석 처리한 다음에 중괄호 단위로 주석 해제하면서 어떤 클래스에 무슨 속성을 설정했을 때 어떻게 변하는지 보면서 공부했다. 이해가 잘 되지 않을 때는 속성 값을 조금씩 수정해 가면서(코드를 주석 처리하거나 background-color를 넣어보는 방법으로) 결과물에 어떻게 영향을 미치는지 알 수 있었다. 웹 퍼블리싱 강의를 들으면서 웹페이지의 전체적인 구조, 레이아웃을 많이 배우는 거 같다. 문제가 발생할 땐 크롬 개발자 도구에서 어떤 영역이 문제인지 파악해서 해결하는 방법도 배우고 있다.

저작자표시