23.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가 아닌곳에 넣어줘야 마우스 오버와 마우스 빠질 때 모두 적용cssa{ 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; } 제이쿼리 링크하기<body>안에 <script>링크$('.open-modal').click(function(){}) $('.open-modal').click(function(){})<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:noneopacity 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%);마우스를 올렸을 때 보이도록 숨겨놓는 설정하는 방법visibility : hiddenvisibility : hidden;자리 값은 유지하되, 존재 값은 사라지게 함따라서 마우스를 올려둬도 나타나지 않음마우스 올라왔을 때 나타나게 하려면.icon:hover span{ opacity:1; visibility : visivble; } 2. display : nonedisplay: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; }
