개발나라 스용공주

이번 글은 로딩 버튼 애니메이션 만들기다.[ 실행 결과 ] [ 애니메이션 만들기 ]투명도 조절로 사라지는 효과를 주고 크기가 변화하면서 축소하며 사라지는 느낌의 애니메이션이다.@keyframes ani{ 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0.5); }}  [ 애니메이션 적용하기 ]animation: ani 1s linear infinite; [ 딜레이를 이용한 효과 ]애니메이션 딜레이 효과를 통해 번지듯이 사라진다.각각..

이번 글은 calc에 대한 사용 설명 글이다. [ calc 빼기 ]아래 예제와 같이 calc 적용 전 상자가 빨간 선을 넘어가는 것을 확인할 수 있다.기준이 되고 있는 빨간 border에서 상자의 크기만큼 빼준 뒤 실행해주면 빨간 border의 영역을 넘지 않는 것을 확인할 수 있다.calc 적용 전[ html ]  [ css ]body { display: flex; justify-content: center; align-items: center; height: 100vh;}.loading { border : 1px solid red; width: 30px; height : 30px; position : r..

이번 글은 position의 특징에 대한 정리글이다.  [ 특징 1 ]position은 부모 요소에 relative, 자식 요소에 absolute를 정확하게 작성해줘야한다. [ 특징 2 ]아래 사진과 같이 계층구조가 3단계인 코드가 있을 경우빨간 border에 position을 relative, 노란 border와 초록 border엔 absolute를 준다.이때 노란 border에 relative를 써주진 않았지만 초록 border와 부모-자식관계이므로 position : relative의 역할도 암묵적으로 가능하게 된다. [ 특징 3 ]position 속성 적용 무조건 해당 요소의 display가 inline으로 변경된다.따라서 크기를 다시 변경해줘야한다.(ex. width:100%로 크기 채워주기)

이번 글은 position을 통해 중앙정렬하는 방법에 대한 글이다. 아래 코드를 보면 position에 부모 부분에 relative와 자식 부분에 absolute를 알맞게 주고 top과 left를 통해 50%로 중앙에 놓일 수 있도록 해준 것을 확인할 수 있다.[ html ]  [ css ].green { width: 500px; height: 300px; background-color: green; position: relative;}.yellow { width: 200px; height: 200px; background-color: gold; position: absolute; top:50%; left: 5..

이번 글은 jQuery의 종류와 이론에 대한 설명글이다. [ 메서드 기능 ]메서드 종류메서드 기능이펙트 (effect)요소를 보거나 감추거나 등클래스 제어클래스를 넣거나 지우거나 등요소 탐색선택한 요소의 부모, 자식(자손) 등을 찾기  [ 메서드 종류 ]slideDown(), slideUp(), stop(), show(), hide(), fadeIn(), fadeOut(), addClass(), removeClass(), children(), siblings() 등 ..  [ 메서드 - 이펙트 ]이펙트 종류메서드 명설명보이기-감추기 효과show()요소를 나타내서 보여주는 효과hide()요소를 사라지게해서 없애주는 효과toggle()show() + hide() 의 반복페이드(fade) 효과* 괄호 안에는 ..

이번 글은 jQuery의 기본 구조에 대한 설명글이다. [ jQuery의 기본 구조 ] 1) js 파일 삽입 위치jQuery를 사용하기 위해서는 js파일을 html본문에 넣어줘야한다.아래 코드와 같이 의 맨 아래 넣어주면 된다. 가 끝나기 전 위에 넣어주고   2) 기본 형태기본 형태는 아래 이미지와 같다.항상 시작은 $로 하며 선택자의 경우 css, 태그, 아이디, 클래스, this 등이 위치할 수 있다.함수는 해당 선택자를 누를지 마우스를 올릴지 등에 대한 것으로 마우스의 대표적인 이벤트로는 click이 있다.function() 이하의 부분에는 위에서 설명한 함수 부분과 동일한 신호가 들어왔을 때 실행되어야할 실행 구문이 오게 된다.  실행구문은 $('선택요소').메서드();의 형..

이번 글은 클래스명을 따로 부여하지 않고 반복되는 태그를 구분할 수 있는가상클래스 nth-child()와 nth-of-type()에 대해 알아보고 이 둘의 차이점에 대한 글이다.  [ nth-child() ]nth-child()란 동일한 태그가 연속될 경우 클래스 부여 없이 각각의 태그들을 구별해 줄 수 있는 수단이다. [ nth-child() 예제 ][ html ]box 아래에 클래스가 지정되지 않은 태그가 4개 있다.  [ css ]클래스 box 아래에 있는 div는 nth-child()를 통해 ()안에 숫자를 넣어 div의 첫번째부터 네번째까지 구별해줄 수 있다..box div:nth-child(1)=> 클래스 box 아래 있는..

이번 글은 애니메이션이 들어간 버튼을 만드는 과정을 설명하는 글이다.   [ html ] 네이버 구글 [ css ]a { padding : 5px; width : 100px; height : 30px; border : 1px solid black; border-radius: 10px; text-align : center; display : inline-block; text-decoration : none; color : black; transition: 0.5s;}a:hover { color : white; background-color: black;} a:hover는 에 해당되는 부분에 마우스가 겹쳐지게 된다면 실행되는 코드다.