EverGiver

드롭다운 메뉴 드롭다운 메뉴 예제 과일종류 사과 딸기 포도 동물종류 사자 하마 기린 운동종류 축구 배구 농구 ​ opacity를 활용한 transition ​ 드롭다운 연습문제 시계 ​

z-index - html 태그들이 작성할 때 가지고 있는 고유의 z축 값 - html태그들은 우리들 눈에 보이지 않는 z축 값이라는 게 있다. 이 값은 html 태그를 나중에 적으면 적을수록 값이 올라가는 특징이 있는데 태그들을 겹쳐두는 상황이 발생했을 때 가장 마지막에 적은 태그가 가장 위에 있는 이유가 이것 때문이다. (포토샵 레이어 순서랑 동일한 개념) z-index는 css속성이기 때문에 내가 원하는 html태그에 사용해서 우선순위를 바꿀 수 있다. (z-index 사용 시 넣어주는 값은 원하는 값을 넣어주면 된다) z-index를 수동으로 넣어주면 z-index가 들어가 있지 않은 태그보다 무조건 상위에 위치하게 된다. 모든 position 속성은 사용하면 position 속성이 들어가 있지 ..

transition이란 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것 트랜지션은 마이크로소프트 엣지와 익스플로러 10 이상에서 지원되며, 대부분의 최신 브라우저에서는 모두 지원한다. ★ 주의점 : 동작구문에는 넣지 말 것! (무조건 transition은 태그에 넣어준다) 트랜지션과 속성 종류 설명 transition-property 트랜지션의 대상을 지정한다. transition-duration 트랜지션의 실행할 시간을 지정한다. transition-timing-function 트랜지션의 실행 형태를 지정한다. transition-delay 트랜지션의 지연 시간을 지정한다. transition tra..

구글 크롬이 설치가 되어 있어야 한다. 단축키 : F12 / ctrl + shift + i cf) 단축키를 눌러도 안 되는 경우 → 크롬 오른쪽 상단 : 버튼 눌러준 다음 도구 더보기에 마우스 올리고 개발자 도구 눌러주면 된다. 개발자 도구 웹사이트와 분리시켜주는 기능 1. 개발자 도구 실행해준 다음 다시 사이트 오른쪽 상단 톱니바퀴 모양 옆 : 버튼 클릭 2. DOCK SIDE 부분에서 제일 왼쪽 창이 2개가 겹쳐져 있는 버튼 눌러주기 개발자 도구 폰트 크기 조절하기 - CTRL + + - CTRL + - 우클릭 막힘 풀기 1. 원하는 사이트에서 개발자 도구 실행해준 다음 2. 오른쪽 상단 톱니바퀴 모양 클릭 3. Settings에 Preferences에서 Debugger 부분으로 와서 Disable ..

외부 폰트 구글 폰트 사용 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 사용법 - 사이트 가운데 Type something 부분에 원하는 내용을 타이핑해주면 웹사이트에 나열되어 있는 다양한 폰트에서 해당 내용을 작성했을 때 어떻게 보이는지 미리 보기 할 수 있다. - Type something 오른쪽 px이 적혀있는 막대 바 드래그해서 조절 시 폰트 사이즈 조절 미리 보기 가능하다. 원하는 폰트 적용방법 1. 구글 폰트 사이트 접속 후 원하는 폰트 선택 2. 폰트 페이지로 이동하면 폰트 옆 select this style 전..

웹 요소의 위치를 정하는 left, right, top, bottom 속성 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다. right 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다. top 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다. bottom 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다. 배치 방법을 지정하는 position 속성 postition 속성은 웹 문서 안의 요소를 자유자재로 배치해 준다. position 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다. 종류 설명 static 문서의 흐름에 맞춰 배치한다. (기본값) relative 위칫값을 지..