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..

CONTENTS CSS Practice홈페이지 레이아웃 : section 부분(card, product, category) ------------------------------------------- CSS Practice 홈페이지 레이아웃 : section 부분(card, product, category) 예제1)Boxing Dom treehtmlbody>  section class="category">           div class="card_box">        div class="card_item">        img src="note.jpg" alt="notebook">      div>      div class="card_cotent">        h3>CATEGRYh3>    ..

CONTENTS CSS Practice홈페이지 레이아웃 : section 부분슬라이드 기능: 과 사용 --------------------------------------------------------------- CSS Practice 홈페이지 레이아웃 : section 부분 예제1) Boxing Dom tree htmlbody>  section>    div class="container">      div class="text">        h1 class="font_color1">Sale 20% Offh1>        h1 class="font_color2">On Everythingh1>        br>        p>Explicabo esse amet tempora quibusdam ..

CONTENTS CSS Practice중간 퀴즈홈페이지 레이아웃 : header, nav 부분 ----------------------------------------------------------- CSS Practice 중간 퀴즈문항1. 아이콘을 사용하기 위해 폰트어썸을 연결해야한다. 연결방법은? 2. HTML에서 큰 레이아웃 태그 6개는 무엇인가? 3. HTML에서 제목 태그는 무엇인가? 4. HTML에서 문단 태그는 무엇인가? 5. HTML에서 순서 없는 리스트 태그는 무엇이며, 리스트의 각 항목을 나타내는 태그는 무엇인가? 6. 의미는 없으나 주컨텐츠를 하나의 그룹으로 묶는 블록레벨의 대표적인 태그는 무엇인가? 7. 의미는 없으나 단순히 일부 글꼴 꾸미기 위해 사용하는 인라인레벨의 대표적인 태..