본문 바로가기
Web Programming/Step3. HTML&CSS&JS 심화

#. POSITION 속성(2)

눈떠보니 월요일 2023. 3. 5. 23:52

목차

4. fixed와 before/after 그리고 트랜지션 심화

fixed

postion : absolute와 동일하나, 스크롤바를 따라다닌다.

div {
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100%;
    background-color:red;
}

 

before/after

  • 기본적으로 inline-block이다.
/* ::after => 새로운 막내자식을 추가한다. */
ul > li::after {
    content:"님";
}
/* ::after => 새로운 막내자식을 추가한다. */
ul > li::before {
    content:"위대하신 ";
}
/* block 처리 */
ul > li::after, ul > li::before {
    display:block;
}

 

transition을 활용하여 로딩바 만들기

div {
    width:0;
    height:10px;
    background-color:red;
    /* opacity => 투명도(0=완전투명,안보임/1=완전불투명,보임) */
    opacity:0;
    /* transition : 변환옵션을 준다. */
    /* width 1s => 너비를 변환하는데 duration(기간)을 4초 동안 천천히 진행하겠습니다. */
    transition: width 1s, opacity 4s;
}

body:hover > div {
    width:100%;
    opacity:1;
}

 

transition을 활용하여 4등분 박스 멋있게 나타나게

body {
  margin:0;
  /* 이렇게 하지 않으면, hover 이벤트가 안걸린다. */
  /* body의 높이를 화면의 높이와 같게 한다. */
  height:100vh;
}

.box-1 > div {
  position:absolute;
  width:50%;
  height:50%;
  transition:width .5s 0s, height .5s 0s;
}

.box-1 > div:nth-child(1) {
  top:0;
  left:0;
  background-color:red;
}

body:hover > .box-1 > div:nth-child(1) {
  transition:width 1s 0s, height 1s 0s;
}

.box-1 > div:nth-child(2) {
  top:0;
  right:0;
  background-color:green;
}

body:hover > .box-1 > div:nth-child(2) {
  transition:width 1s .4s, height 1s .4s;
}

.box-1 > div:nth-child(3) {
  bottom:0;
  left:0;
  background-color:blue;
}

body:hover > .box-1 > div:nth-child(3) {
  transition:width 1s .8s, height 1s .8s;
}

.box-1 > div:nth-child(4) {
  bottom:0;
  right:0;
  background-color:purple;
}

body:hover > .box-1 > div:nth-child(4) {
  transition:width 1s 1.2s, height 1s 1.2s;
}

.box-1 > div:nth-child(1), .box-1 > div:nth-child(4) {
  width:0;
}

.box-1 > div:nth-child(2), .box-1 > div:nth-child(3) {
  height:0;
}

body:hover > .box-1 > div {
  width:50%;
  height:50%;
}

 

사이드바 만들기 실습

https://sihyun1118.tistory.com/108

 

 

Java Script Warm-Up(jQuery - children)

console.clear();

$('.box-1 > nav').click(function() {
  let $this = $(this);
  let $box1 = $this.parent();
  let $box1Children = $box1.children('.active');
  // let $box1Children = $box1.children();
  
  // $box1.hide();
  $box1Children.removeClass('active');
  $this.addClass('active');
});

 

Java Script Warm-Up(jQuery - find)

console.clear();

$('.box-1 > nav').click(function() {
  let $this = $(this);
  let $box1 = $this.parent();
  let $box1Children = $box1.find(' > .active');
  // let $box1Children = $box1.children('.active');
  // let $box1Children = $box1.children();
  
  // $box1.hide();
  
  $box1Children.removeClass('active');
  $this.addClass('active');
});

 

5. 이미지 갤러리 사이트, 사이드바 만들기

아이콘 애니메이션

햄버거 아이콘

HTML

<div class="side-bar__status-ico">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

/* 사이드바 시작 */
.side-bar__status-ico {
  width:500px;
  height:500px;
  border:20px solid gold;
  position:relative;
}

.side-bar__status-ico > div {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:20%;
  background-color:black;
}

/* 사이드바 - 두번째 막대 */ 
.side-bar__status-ico > div:nth-child(2) {
  top:40%;
}

/* 사이드바 - 세번째 막대 */ 
.side-bar__status-ico > div:nth-child(3) {
  top:80%;
}
/* 사이드바 끝 */

가운데 막대 회전

body:hover .side-bar__status-ico > div:nth-child(2) {
  transform:rotate(45deg);
}

가운데 막대가 좌측 하단을 축으로 회전 (transform-origin 설정)

/* 사이드바 - 두번째 막대 */ 
.side-bar__status-ico > div:nth-child(2) {
  top:40%;
  transform-origin:bottom left; /*0% 0%로도 설정 가능(x축 y축)*/
}

가운데 막대의 너비 짧아짐

body:hover .side-bar__status-ico > div:nth-child(2) {
  transform:rotate(45deg);
  width:50%;
}

세번쨰 막대가 올라가고 너비 짧아짐

body:hover .side-bar__status-ico > div:nth-child(3) {
  top:40%;
  width:50%;
}

세번째 막대가 오른쪽으로 정렬

/* 사이드바 - 세번째 막대 */
.side-bar__status-ico > div:nth-child(3) {
  top:80%;
  left:auto;
  right:0;
}

세번쨰 막대 회전

body:hover .side-bar__status-ico > div:nth-child(3) {
  transform:rotate(-45deg);
  top:40%;
  width:50%;
  transition:all 1s, transform 1s 1s; /* 테스팅용 코드 */
}

세번째 막대가 우측 하단을 축으로 회전

/* 사이드바 - 세번째 막대 */
.side-bar__status-ico > div:nth-child(3) {
  top:80%;
  left:auto;
  right:0;
  transform-origin:bottom right;
}

body:hover .side-bar__status-ico > div:nth-child(3) {
  transform:rotate(-45deg);
  top:40%;
  width:50%;
}

첫번째 막대의 너비가 줄고 높이가 늘어남

body:hover .side-bar__status-ico > div:nth-child(1) {
  width:20%;
  height:100%;
}

첫번째 막대를 가운데 정렬 유지한 상태로, 너비 변경

/* 사이드바 - 첫번째 막대 */
.side-bar__status-ico > div:nth-child(1) {
  width:auto;
  left:0;
  right:0;
}

body:hover .side-bar__status-ico > div:nth-child(1) {
  left:40%;
  right:40%;
  height:100%;
}

각각의 2,3번쨰 막대의 길이를 더 증가

body:hover .side-bar__status-ico > div:nth-child(2) {
  transform:rotate(45deg);
  width:70.5%;
}
body:hover .side-bar__status-ico > div:nth-child(3) {
  transform:rotate(45deg);
  width:70.5%;
}

첫번째 막대의 너비를 먼저 변경

body:hover .side-bar__status-ico > div:nth-child(1) {
  left:40%;
  right:40%;
  height:100%;
  transition: all 1s, left .5s 0s, right .5s 0s, height .5s .5s;
}

돌아갈때는 첫번째 막대의 높이를 먼저 변경

/* 사이드바 - 첫번째 막대 */
.side-bar__status-ico > div:nth-child(1) {
  width:auto;
  left:0;
  right:0;
  transition: all 1s, left .5s .5s, right .5s .5s, height .5s 0s;
}

트래지션 튜레이션 변수화

/* 사이드바 시작 */
:root {
  --side-bar__status-ico__transition-duration:.4s;
}

크기 조절

.side-bar__status-ico {
  width:50px;
  height:50px;
  position:relative;
}

https://sihyun1118.tistory.com/108

 

실습. 사이드바 만들기

목차 1. 사이드바 만들기 2. 이미지 갤러리 사이트 만들기 1. 사이드바 만들기 HTML ▶ ▼ 1차 메뉴 아이템 1 1차 메뉴 아이템 2 2차 메뉴 아이템 1 2차 메뉴 아이템 2 2차 메뉴 아이템 3 2차 메뉴 아이템

sihyun1118.tistory.com

 

Java Script Warm-Up(jQuery - eq, index)

  • eq는 여러개 중에 하나를 필터 하는것
  • index : 형제의 번호를 반환해줌
console.clear();

$('button').click(function() {
  let $this = $(this);
  
  let index = $this.index();
  
  $('.box-1 > nav.active').removeClass('active');
  $('.box-1 > nav').eq(index).addClass('active');
});

 

Java Script Warm-Up(jQuery - attr)

  • 박스 안의 속성값에 접근할 수 있게 하는것.

HTML

<div class="box-1 flex flex-jc-c flex-ai-c height-100vh bg-red" data-sel-index="3">
  <nav></nav>
  <!--생략-->

CSS

.box-1::after {
  content:"";
  width:40px;
  height:40px;
  border-radius:50%;
  position:absolute;
  background-color:blue;
  top:calc(50% + 70px);
  left:0;
  transition:left 0.4s;
}

.box-1[data-sel-index="0"]::after {
  left:0;
}

.box-1[data-sel-index="1"]::after {
  left:10%;
}
/*생략*/

JS

console.clear();

$('.box-1 > nav').click(function() {
  let $this = $(this);
  let index = $this.index();
  
  let $box1 = $this.parent();
  
  $box1.attr('data-sel-index', index);
});

 

Java Script Warm-Up(jQuery - mouseenter, mouseleave)

console.clear();
//v1
$('.box-1 > nav').mouseenter(function() {
  let $this = $(this);
  let index = $this.index();
  
  let $box1 = $this.parent();
  
  $box1.attr('data-sel-index', index);
});

//v2
$('.box-1 > nav').mouseenter(function() {
  let $this = $(this);
  let index = $this.index();
  
  let $box1 = $this.parent();
  
  $box1.attr('data-sel-index', index);
});

$('.box-1 > nav').mouseleave(function() {
  let $this = $(this);
  let $box1 = $this.parent();
  
  $box1.attr('data-sel-index', '');
});

강의 : https://class101.net/ko/classes/5fb5d4c5c64f67000daa54de/lectures/5fbb0fec7902290013fb29b8

'Web Programming > Step3. HTML&CSS&JS 심화' 카테고리의 다른 글

실습. 팝업창 만들기 & 제이쿼리 적용  (0) 2023.03.06
#. JavaScript 기초와 활용  (0) 2023.03.06
실습. 사이드바 만들기  (0) 2023.03.05
#. POSITION 속성(1)  (0) 2023.03.05
실습. 2차, 3차 드롭 다운 메뉴 만들기  (0) 2023.03.05

'Web Programming/Step3. HTML&CSS&JS 심화' Related Articles

티스토리툴바