웹 퍼블리싱 정복반 - 4주차

본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.

탭 중첩 구조

 <a class="tab-link on" data-type="tab-1">첫번째 탭</a>
    <a class="tab-link" data-type="tab-2">두번째 탭</a>
    <a class="tab-link" data-type="tab-3">세법째 탭</a>

    <hr />

    <div id="tab-1" class="tab-content on">첫번째 탭 내용</div>
    <div id="tab-2" class="tab-content">두번째 탭 내용</div>
    <div id="tab-3" class="tab-content">
      세번째 탭 내용

      <div>
        <a class="tab-link-2 on" data-type="tab-3-1">3-1 탭</a>
        <a class="tab-link-2" data-type="tab-3-2">3-2 탭</a>
        <a class="tab-link-2" data-type="tab-3-3">3-3 탭</a>
      </div>
      <div id="tab-3-1" class="tab-content-2 on">첫번째 탭 내용</div>
      <div id="tab-3-2" class="tab-content-2">두번째 탭 내용</div>
      <div id="tab-3-3" class="tab-content-2">세번째 탭 내용</div>
    </div>

    <script>
      $('.tab-link').click(function () { //1번째 탭에 대한 코드
        var tab_id = $(this).attr('data-type');
        $('.tab-link').removeClass('on');
        $('.tab-content').removeClass('on');
        $(this).addClass('on');
        $('#' + tab_id).addClass('on');
      });

      $('.tab-link-2').click(function () { //2번째 탭에 대한 코드 
        var tab_id = $(this).attr('data-type');
        $('.tab-link-2').removeClass('on');
        $('.tab-content-2').removeClass('on');
        $(this).addClass('on');
        $('#' + tab_id).addClass('on');
      });
    </script>

☞ 이런식으로 중첩이 가능함 대신 tab id는 중복 할 수 없으니 유의해서 작성하고 외부 탭과 내부 탭이 개별로 움직여야하기 때문에 JS도 각 각 써야한다.

반응형 웹

1. 반응형 웹
   웹사이트 하나로 PC,태블릿, 스마트폰 등 다양한 디스플레이 사이즈에 맞게 웹 사이트 내의 요소가 자동 조정되는 것을 말한다.

2. 고정형 웹
   네이버 처럼 화면의 크기가 줄어도 그대로 고정되고, 모바일 페이지의 경우 각각의 html로 이루어져 있음.

오늘의 한줄평 : html css는 쉬운데 JS공부는 열심히 해야겠다고 느꼈다.