거북이처럼 천천히

1. 개요 css에는 가상 클래스(pseudo-class)와 가상 요소(pseudo-element)가 있다. 이를 활용하면 HTML내에서 별도의 class를 지정할 필요 없이 HTML element를 선택할 수 있다. 2. Pseudo-class Pseudo-class는 실제로 존재하는 HTML 요소에 클래스 추가 없이 해당 요소를 선택할 수 있다. 3. Pseudo-element Pseudo-element는 실제로 존재하지 않는 요소를 클래스 추가 없이 선택할 수 있다. 4. Pseudo-class와 Pseudo-element가 필요한가? Pseudo-class, Pseudo-element는 HTML 수정 없이 CSS만으로 특정 요소를 선택할 수 있으며, HTML에 불필요한 class를 지정하지 않음으..

1. 한 번에 생성 - link 작성 뒤, Tab를 누르면 한 번에 생성 가능 2. 안에 가 있는 태크를 한 번에 n개 생성 - (li>a)*n : 안에 가 있는 태크를 그룹화하여 n 개 생성 3. display : none 가 동작을 못할 경우 - display : none !important; 작성 4. 자연스럽게 side bar를 나오게 하는 방법 - 첫 번째 아이디어 : 초기 width를 0px으로 설정한 뒤, "active" class를 추가하면 width를 원하는 만큼 늘어나도록 설정 그리고, transition을 통해 자연스럽게 만들어 준다. - 두 번째 아이디어 : 해당 div의 position을 fixed시켜 고정시킨 뒤, 화면 밖에 위치시켰다가 toggle button 클릭하면 화면 안..

1. 가 active or focus 할 때, input의 테두리를 없애는 방법 - input{ outline:None; } 이용 2. Navigation basic structure - --> --> *(navi 버튼 갯수) --> --> 3. 빠르게 div을 만드는 방법 - ( tag 이름) . (class 이름) * (필요한 div의 갯수) - ' > ' 기호를 통해 div 내에 또 다른 div 생성 가능 - tag 이름 없을 경우 div로 생성 4. 특정 container를 다른 lay-out으로 옮기는 방법 - 'z-index' 속성을 이용 - z-index는 z 방향으로 해당 container가 몇 번째 layer에 있는지를 표현 - z-index : 0 가 default 이며, z-index..

1. Animation CSS 애니메이션은 아이콘을 비롯한 다양한 태그에 애니메이션 효과를 줄 수 있는 기능입니다. 이를 통해 크기를 조절하는 scale에서 부터 회전 효과를 주는 rotate 까지 다양한 효과를 줄 수 있습니다. 2. Animation 사용법 먼저 애니메이션이 언제 어떻게 움직일지에 대해서 정의할 필요가 있습니다. 예를 들어, '처음에는 아이콘이 가만히 있다가 점차 Y 방향으로 30px 이동한 뒤, 다시 원래 자리로 돌아온다.' 애니메이션의 움직임을 정의할 때 사용하는 것이 '@keyframe (name of animation) { }' 입니다. @keyframe의 괄호 안에 애니메이션이 언제 어떻게 움직일지를 작성함으로서 '(name of animation)은 언제 어떻게 움직이는 애..

form에는 두 개의 중요한 property가 있다. 1. action: form 데이터를 전송할 페이지 정보를 보유 2. method: 데이터를 전송할 방법 2-1. 1) POST: 서버(백엔드)로 데이터를 전송할때 사용하는 방식. -> 보안성이나 신뢰성을 요구하는 환경에서 사용 2) GET:전송할 데이터를 url에 포함시켜 전달하는 방식. -> 동작 과정이 빠르지만 보안에 취약하며 전송 가능한 데이터의 길이도 제한적 -> input 태그에 입력된 데이터들이 전송할 데이터를 url에 표시 3) 사용 방법 -

앱 및 웹 제작에서 많이 사용되는 요인 중 하나인 아이콘을 무료로 이용할 수 있는 사이트를 추천 드리고자 합니다. 바로 Font awesome (https://fontawesome.com/search?s=solid%2Cbrands) 입니다. 무료 버전과 유로 버전으로 나뉘지만, 무료 버전에서도 다양한 아이콘을 이용할 수 있습니다. 사용 방법) 1. 내에 마지막 부분에 아래 2. Fontawesome 홈페이지에서 아이콘 검색 (5.15.4 버전으로 검색) ​ 3) HTML으로 설정한 뒤, tag로 구성된 code 복사하여 붙어넣기