wkun 님의 블로그

CONTENTS CSS 기능 실습1. 고정 라벨 슬라이더2. 탭 --------------------------------------------------------- CSS 기능 실습 1. 고정 라벨 슬라이더 htmlbody>  header id="header_top" class="container">    div class="logo">      Feane    div>    nav>      ul>        li>a href="#">Homea>li>        li>a href="#">Menua>li>        li>a href="#">Abouta>li>        li>a href="#">Book Tablea>li>      ul>    nav>    div>      i class="..

CONTENTS CSS 기능 실습1. 고정 라벨 슬라이더2. 탭3. 학습(slider, tab) ----------------------------------------------- CSS 기능 실습  1. 고정 라벨 슬라이더 예제) htmlbody>  section id="main" class="contanier">    input type="radio" name="slide" id="slide01" checked>    input type="radio" name="slide" id="slide02">    input type="radio" name="slide" id="slide03">    div class="slidebox">      div class="slides">               ..

CONTENTS CSS 기능1. 고정 라벨 슬라이더2. 탭3. 탭 제작 순서4. 실습5. 학습(dropdown)  ----------------------------------- CSS 기능 1. 고정 라벨 슬라이더-콘텐츠를 전환해도 라벨은 고정된 자리에 위치한 슬라이더 ◎기존 슬라이더-콘텐트를 감싼 상자(div/li)를 기준으로 왼쪽/오른쪽 라벨을 각 콘텐츠별로 배치함  ◎ 고정 라벨 슬라이더-콘텐츠를 감싼 상자(div/li)의 기준이 아닌 콘텐츠를 보여주는 화면 즉, 슬라이드 박스 기준으로 왼쪽/오른쪽 라벨을 배치함그렇게 되면 콘텐츠별 라벨이 같은 위치에 겹쳐짐그렇게 되면 라벨에 의한 기능이 제대로 동작하지 않음(라벨들이 겹쳐져 있어서 정확히 어떤 라벨이 눌러졌는지 확인이 어려움) ◎고정 라벨 슬라이..

CONTENTS CSS 기능 실습slidertab --------------------------------------------------------------- CSS 기능 실습 slider  예제) boxing htmlbody>  section id="main">    input type="radio" name="slide" id="slide01">    input type="radio" name="slide" id="slide02">    input type="radio" name="slide" id="slide03">    div class="slidebox">      div class="slides">        div class="slide">          label for="slid..

CONTENTS CSS 기능1. display2. label3. slider4. slide 실습  ------------------------------ CSS 기능 1. display ◎ display:flex; 작성-정렬하려는 자식 요소들의 직계 부모 요소 선택 ◎특징-자식 요소들이 부모 요소보다 클 경우 1)자식 요소들이 짜부러지거나 2) flex-wrap 속성값 변경하여 줄바꿈이 됨-해당 특징은 슬라이더에서 불편함, 추가 작업 필요  htmlbody>  div class="slidebox">    div class="slides">      div class="slide">1div>      div class="slide">2div>      div class="slide">3div>    div..

CONTENTS CSS 기능1. css 작업순서2. 드롭다운 메뉴3. position: absolute; ------------------------------ CSS 기능 1. css 작업순서   1. 부모가 자식 정렬: display: flex;       하위 flex, align, justify 관련 속성들   2. 자기자신 정렬         position       transform:translate()         margin, padding     3. 크기: width, height (px, %)  htmlbody>  header class="container">    div class="img_box">      img src="./img/famms_logo.png" alt="log..

CONTENTS CSS 기능1. dropdown2. 제작순서 1) dropdown 2) slider  --------------------------------------------------------------- CSS 기능 1. dropdown 예제1) Boxing Dom tree htmlbody>  header class="container">        div class="logo">      img src="logo.png" alt="logo">    div>        nav>      ul class="menu1">        li>a href="#">HOMEa>li>         li class="drop">a href="#">PAGESi class="fa-solid fa-sort..