23.05.26 학습일기

23.05.26 학습일기

박경선 2023.05.26

CSS 포지션 속성 완벽하게 이해하기(3편)

✅ CSS 포지션(3)

부모 요소 밖에서 원하는 위치로 보내기!

부모 요소의 크기만큼 위치 100%로 설정하여 부모 요소 바로 옆에 딱 붙을 수 있도록!

html구성

<body>
    <div class="parent">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
</body>

css구성

 /* 부모요소 position:relative */
 /* 자식요소 position:absolute */
.parent{
    position:relative;
    border:3px solid #000;
    width:600px; /* 부모요소 크기지정 */
    height:300px;/* 부모요소 크기지정 */
}
.child1{
    position:absolute; 
    background-color: rgba(122, 122, 160, 0.476);
    width:150px; /* 자식요소 크기지정 */
    height:100px; /* 자식요소 크기지정 */
    /* default -> top:0; left:0; */
    top:100%;
    /* text 가운데 정렬 */
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}
.child2{
    position:absolute; 
    background-color: rgba(122, 122, 160, 0.476);
    width:150px; /* 자식요소 크기지정 */
    height:100px; /* 자식요소 크기지정 */
    /* default -> top:0; left:0; */
    left:100%;
    /* text 가운데 정렬 */
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    
    
}
.child3{
    position:absolute; 
    background-color: rgba(122, 122, 160, 0.476);
    width:150px; /* 자식요소 크기지정 */
    height:100px; /* 자식요소 크기지정 */
    /* default -> top:0; left:0; */
    left:100%;
    top:100%;
    /* text 가운데 정렬 */
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    
}

 

핵심은 position지정

자식요소에 left :100%를 하면 부모요소를 넘어가 바로 옆에 위치

CSS 필수 가상클래스

✅ 마우스 오버 효과(hover, transition)

마우스가 올라가면 링크를 볼 수 있도록 제작

a태그는 바디태그의 칼라를 따르지 않음⭐

text-decoration이 underline로 기본적으로 되어있음

 transtion속성은 :hover가 아닌곳에 넣어줘야 마우스 오버와 마우스 빠질 때 모두 적용

css

a{
    color:#333;
    text-decoration: none;
    transition: 0.5;
}
a:hover{
    color:dodgerblue;
    text-decoration: underline;
}

html

<body>
    
    <a href="#none">법적고지</a>
    <a href="#none">개인정보취급방침</a>
    <a href="#none">개인정보처리방침</a>
</body>

마우스가 올라가면 css가 변하는

가상클래스 :hover와 애니메이션 효과를 주는 transition를 학습

✅ 순서를 만드는 CSS가상클래스(nth-child, nth-of-type)

용도 & 목적 : 클래스 이름을 정하지 않고 순서를 정하는 가상 크래스 ->내가 원하는 요소를 선택하는 것

: nth-child() 가상클래스

순서 가상 클래스를 사용하는 목적 : 클래스 이름을 주지않고 요소 선택

display: inline-block로 변경했는데 margin:auto를 설정하면 절대 변하지 않아 왜? margin:auto는 block요소에만 적용하므로

.box div:nth-child(1){} /*첫번째 div 선택*/

[정리] 클래스 이름을 주지 않고 요소 선택

<body>
    
    <div class ="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

.box라는 div아래 div만 4개가 있음

:nth-child() 라는 가상클래스를 이용해 css 다르게 설정가능

- 자식요소가 출연하는 순서에 따라 정해짐

()안에 숫자삽입

.box div:nth-child(1){
    background-color: dodgerblue;
}
.box div:nth-child(2){
    background-color: red;
}
.box div:nth-child(3){
    background-color: #fff;
}
.box div:nth-child(4){
    background-color: gold;
}

 nth-child는 요소를 구분하지 않음

: 순서가 밀려 변동가능성이 있음

.box div:nth-child(1){
    background-color: dodgerblue;
}
.box div:nth-child(2){
    background-color: red;
}
.box div:nth-child(3){
    background-color: #fff;
}
.box div:nth-child(4){
    background-color: gold;
}

nth-of-type은 태그를 체크

: 새로운 태그가 들어왔을 때 변동없이 지정된 태그의 순서를 유지해줌

.box div:nth-of-type(1){
    background-color: dodgerblue;
}
.box div:nth-of-type(2){
    background-color: red;
}
.box div:nth-of-type(3){
    background-color: #fff;
}
.box div:nth-of-type(4){
    background-color: gold;
}

 

✅ 순서를 만드는 가상클래스 (first-child, last-child)

first-child : 가장 먼저 나오는 요소

last-child : 가장 나중에 나오는 요소

[정리]

:nth-child()는 괄호가 있으나

:first-child는 괄호가 없다

:last-child는 괄호가 없다

사용예시

<div class="btn">
    <span>공지사항</span>
    <span>갤러리</span>
</div>
.btn span{
    background-color: #ddd;
    width:120px;
    display:inline-block;
    text-align: center;
    padding:5px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    border: 1px solid #000;
    margin-right: 7px;
}
.btn span:first-child{
    background-color: #fff;
}
.btn span:last-child{
    color:red;
}

 

제이쿼리 링크하기

  1. <body>안에 <script>링크

    $('.open-modal').click(function(){})
$('.open-modal').click(function(){})

  2. <head>안에 <script>링크

    $(function(){
  $('.open-modal').click(function(){})
  $('.open-modal').click(function(){})
})

 2번에서는 $(function(){})를 작성해줘야 함

 jquery파일은 반드시 우리가 만든 custom.js파일보다 먼저나와야함

제이쿼리 기본구문

$('.show-btn').click(function(){});

선택자 .show-btn을 클릭시 function()을 실행해라

$('선택자').함수(funciton(){
  $('선택자').메서드();
});

 

제이쿼리(jQuery) 필수 핵심이론(함수)

요소의 정중앙에 오도록 하는 방법

수평 : text-align:center;

수직 : line-height : __px;

line-height를 요소가 가진 높이값 만큼 주면 됨

 

click / mouseenter / mouseleave

 <body>
  <a class="show-btn" href="#none" >보이기</a>
  <a class="hide-btn" href="#none" >감추기</a>
  <a class="btn" href="#none" >보이기/감추기</a>
  <div>BOX</div>
  <script src="script/jquery-1.12.4.js"></script>
  <script src="script/custom.js"></script>
</body>

레이어팝업(모달창) 띄울 때 : click

$('.show-btn').click(function(){
  $('div').show();
});
$('.hide-btn').click(function(){
  $('div').hide();
});

네비게이션 만들 때 : mouseenter, mouseleave

$('.btn').mouseenter(function(){
  $('div').show();
});
$('.btn').mouseleave(function(){
  $('div').hide();
});

제이쿼리(jQuery) 필수 핵심이론(메서드)

('선택자').함수(function(){

$('선택요소').메서드();

})

메서드종류

  • 메서드(이펙트)

  • 메서드(클래스 제어)

  • 메서드(요소 탐색)

 

✅ 메서드(이펙트)

✔ .show()

✔ .hide()

✔ .slideDown()

✔ .slideUp()

✔ .fadeIn()

✔ .fadeOut()

✔ .stop()

✅ 메서드(클래스제어)

✔ .addClass()

✔ .removeClass()

✔ .toggleClass()

 

✅ 메서드(요소탐색)

✔ .children() : 바로 아래 자손

✔ .parent()

✔ .siblings() : 형제

✔ .find() : 자손전체

✔ .next() : 선택요소 바로다음

✔ .prev() : 선택요소 바로전

 

효과 메서드

show() : 선택요소 보이기

hide() : 선택요소 숨기기

toggle() : 선택요소 보이고/감추고 (두가지기능)

$('.show-btn').click(function(){
  $('.container div').show();
});
$('.hide-btn').click(function(){
  $('.container div').hide();
});
// 하나의 버튼이 두가지 기능을 가짐 : 토글
$('.toggle-btn').click(function(){
  $('.container div').toggle();
});

.slideDown() : 선택요소 서서히 보이기

.slideUp() : 선택요소 서서히 감추기

.slideToggle() : 선택요소 서서히 보이기/감추기

$('.show-btn').click(function(){
  $('.container div').slideDown();
});
$('.hide-btn').click(function(){
  $('.container div').slideUp();
});
// 하나의 버튼이 두가지 기능을 가짐 : 토글
$('.toggle-btn').click(function(){
  $('.container div').slideToggle();
});

fadeIn() : 선택요소 페이드로 나타나게 하는 효과

fadeOut() : 선택요소 페이드로 사라지게 하는 효과

fadeToggle() : 선택요소 페이드로 사라지고 나타나게 하는 토글

$('.show-btn').click(function(){
  $('.container div').fadeIn();
});
$('.hide-btn').click(function(){
  $('.container div').fadeOut();
});
// 하나의 버튼이 두가지 기능을 가짐 : 토글
$('.toggle-btn').click(function(){
  $('.container div').fadeToggle();
});

 ( 괄호 )안에는 무엇을 넣을까요?

fadeIn(지속시간), fadeOut(지속시간)

  • 단어로 넣을 땐 반드시 ' ' 작성

fadeIn('fast'), fadeOut('slow')

  • 숫자로 넣을 땐 숫자만

fadeIn(500), fadeOut(2000)

*1000이 1초임

클래스 제어 메서드

일반적으로 클래스를 넣고 뺄 때 사용하는 클래스명으로 active를 사용함

주의할점

<div class="container">
    <a class="add-btn" href="#none">넣기</a>
    <a class="remove-btn" href="#none">빼기</a>
    <a class="toggle-btn" href="#none">토글</a>
    <div class="active">BOX</div>
  </div>

CSS적용하기

.container div{
      background-color: dodgerblue; //요거
      height:300px;
      width:250px;
      margin-top: 10px;
      color: #fff;
      text-align: center;
      line-height: 300px;
      /* display: none; */ 
    }
.active {
      background-color: red; //요거
    }

위와 같이 작성하면 제대로 작동하지 않음

왜?

div에 class이름이 없으면 .container div{}에 작성된 디자인을 불러옴

이미 background-color이 선언되어있고

.active에서 background-color이 선언되어 있으므로

충돌~~

따라서 아래와 같이 작성

.container div.active{
      background-color: red;
    }

나중에 선언된 속성값이 덮어쓸 수 있도록

[주의할점]

클래스 제어 메서드 3가지의 괄호 안에 . 과함께 클래스명을 쓰면 안됨

$('.add-btn').click(function(){
  $('.container div').addClass('active'); //active만 작성

});
$('.remove-btn').click(function(){
  $('.container div').removeClass('active');
});
// 하나의 버튼이 두가지 기능을 가짐 : 토글
$('.toggle-btn').click(function(){
  $('.container div').toggleClass('active');
});

요소탐색 메서드

children() : 선택 요소의 바로 아래 단계인 자식요소만

siblings() : 선택요소의 형제요소 선택

<body>

  <ul class="menu">
    <li>
      <a href="">MENU-1</a>
      <div class="sub-menu">
        <a href="#none">SUB-MENU-1</a>
        <a href="#none">SUB-MENU-2</a>
        <a href="#none">SUB-MENU-3</a>
        <a href="#none">SUB-MENU-4</a>
      </div>
    </li>
    <li>
      <a href="">MENU-2</a>
      <div class="sub-menu">
        <a href="#none">SUB-MENU-1</a>
        <a href="#none">SUB-MENU-2</a>
        <a href="#none">SUB-MENU-3</a>
        <a href="#none">SUB-MENU-4</a>
      </div>
    </li>
  </ul>

</body>

.menu li에 마우스를 올리면 서브메뉴가 내려오도록 만든다 이때 .menu li는 li위치이므로

아래와 같이 작성하면 모든 서브메뉴가 동일한 동작을 함

$('.menu li').mouseenter(function(){
  $('.sub-menu').slideDown()
})

[ 해결방법 ]

그 자식이 보이도록 하기 위해 children()적용

현재 마우스의 위치를 나타내는 this 적용

$('.menu li').mouseenter(function(){
  $(this).children().slideDown()
})

this는 현재 마우스가 올라간 특정 위치선택 -> 사용자가 어떤 메뉴에 마우스를 올릴지 모르기 때문에 this로 받음

주의!! children만 작성하면 안됨 전체가 다 사라짐

$('.menu li').mouseenter(function(){
  $(this).children('.sub-menu').slideDown()
})
$('.menu li').mouseleave(function(){
  $(this).children('.sub-menu').slideUp()
})

계속 메뉴에 마우스를 올렸다 뺐다 하면 버그가 난것처럼 작동

해결 : stop()사용

$('.menu li').mouseenter(function(){
  $(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
  $(this).children('.sub-menu').stop().slideUp()
})

[미션]

공지사항을 클릭하면 배경색이 바뀌고

갤러리를 클릭하면 공지사항의 배경색은 원래대로, 갤러리의 배경색은 변경

addClass() : 같은 속성이 있다면 대체, 없다면 추가

클릭했던 css속성을 원래대로 복구하기 위해

removeClass()

$('.btn span').click(function(){ //.btn span이 2개가 있는데 둘중 무얼 클릭할 지 모르기 때문에 this로 받음
  $(this).addClass('active')
  // 현재 형제요소는 1개밖에 없으므로 ()안에 숫자 적지 않아도됨
  $(this).siblings().removeClass('active')
})

부모요소의 width를 상속

width:inherit

기본형 드롭다운 네비게이션

마우스 올렸을 때 드롭다운 네비게이션만들기

  • 부모요소 & 자식요소로 구성

  • 부모요소에 마우스가 올라간다면 자식요소에 어떤효과를 적용할지 지정(css에서)

  • 부모 요소의 width값을 받아올 때 inherit속성 사용

오버하면 상세설명 나타나는 상품목록

show, hide를 사용하기 위해 보여지지 않도록 하는 방법

  • display:none

  • opacity 0 , 1

요기선 트랜지션을 주기위해 opacity 사용

모든 요소는 position:absolute;를 주는 순간

인라인요소, 블록요소 상관없이 인라인블록으로 변경

따라서 컨텐츠의 양만큼 크기가 줄어듦

부모요소의 크기 변경없이 수평수직정렬

->

position:absolute;
top : -100%;
left : 50%;
transform : translateX(-50%);

가상클래스 before, after은 무조건 content로 시작

.icon span:after{
  content : '';
  position : absolute;
}

absolute를 사용하려면 부모에 relative를 줘야하지만

.icon span은 이미 position: absolute이므로

relative가 있다고 판단

transform속성을 두번 사용할 수 없음

transform : rotate(45deg);

transform :translateX(-50%);

해결방법

하나로 뭉치기

transform : rotate(45deg) translateX(-50%);

마우스를 올렸을 때 보이도록 숨겨놓는 설정하는 방법

  1. visibility : hidden

visibility : hidden;

자리 값은 유지하되, 존재 값은 사라지게 함

따라서 마우스를 올려둬도 나타나지 않음

마우스 올라왔을 때 나타나게 하려면

.icon:hover span{
  opacity:1;
  visibility : visivble;
}

 2. display : none

display:none;

위의 속성은 아예 사라지게 함

.icon:hover span{
  opacity:1;
  visibility : visivble;
}

대신

.icon span{
  pointer-events:none;
}

도 사용가능

오버한 메뉴 외 나머지 흐려지는 네비게이션


수직 정렬시

position : absolute;
top : 50%;
transform : translateY(-50%);

.gnb에 마우스를 올리게 되면 a에 적용

.gnb:hover a{
  opacity : 0.3;
}

올라간 a태그의 opacity를 바꿔줌

.gnb a:hover{
 opacity:1;
}

아래 두개의 속성 순서는 바뀌면 안됨~!!!!

.gnb:hover a{
  opacity : 0.3;
}
.gnb a:hover{
 opacity:1;
}

아래와 같이 작성하면 모든 요소에 >가 보임

opacity:0;적용

.gnb a:before{ content : '\f105'; font-family:fontawesome; opacity:0; }

마우스가 올라갔을때만 표시하도록 하기 위해

.gnb a:hover:before{ opacity:1; }

댓글을 작성해보세요.

채널톡 아이콘