wooweee

1. 선택자 개요 선택자 종류 선택자 형태 전체 선택자 * 태그 선택자 tag id 선택자 # class 선택자 . 후손 선택자 선택자 선택자 자손 선택자 선택자 > 선택자 property 선택자 선택자[property=value] 선택자[property~=value] 선택자[property|=value] 선택자[property^=value] 선택자[property$=value] 선택자[property*=value] 동위 선택자 선택자 + 선택자 선택자 ~ 선택자 구조 선택자 선택자:first-child 선택자:last-child 선택자:nth-child(수열) 선택자:nth-last-child(수열) 형태 구조 선택자 선택자: first-of-type 선택자: last-of-type 선택자: nth-o..

1. summary 기능 : 숨기기 출처 : web moden 자바 2. 적용 이미지 3. 코드 html lornasdfjlk asdlfjasdl;fjal;sdfjal;sdfjlasj1233efdsmvl css input[type="checkbox"]:checked + div { height: 0px; } div { overflow: hidden; /*height가 0일 될때 h1과 p가 빠져나오기 때문에 hidden 필요*/ width: 650px; height: 300px; transition-duration: 1s; /*transition 과 달리 모든 속성에 적용된다.*/ }

1. summary 기능 : 원하는 div만 애니메이션으로 커지기 div로 감싸져 있는 내부 div를 hover 할 시, hover 된 div만 transition 먹히게 한다. transition 적용시 해당 div의 크기 변화가 다른 내부 div에 영향을 끼치면 안된다. 영향을 받는 이유를 살펴본 결과 각 div간의 거리가 너무 좁을 때 어쩔수 없이 벌어지는거기 때문에 각 div 별 거리를 벌려주면 해결일 된다. 출처 : https://www.w3schools.com/howto/howto_css_zoom_hover.asp 2. 적용 이미지 ​ 3. 코드 html & css Zoom on Hover Hover over the div element.

1. @import 규칙 1.1. 개요 핵심 css 파일 내부에 css 파일을 추가가능하도록 해준다. 사용 경우 css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우 사용 css file을 제공하는 외부 css를 받아올 때 사용 외부 font 받아오는 경우 사용 방법 @import url(); 외부에서 호스팅되는 CSS 파일을 가져오는 방식 @import ""; 현재 파일과 같은 경로에 있는 CSS 파일을 가져오는 방식 1.2. 예시 css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우 /* 현재 code block은 style.css 내부*/ /* default value */ @import "reset.css"; @import "variable.css..

1. summary property float : tag 자체를 좌우로 이동 text-decoration: link 밑줄 없애줌 border : none; // button 테두리 없애기 button border: none; // 버튼의 테두리 제거 outline: none: // 버튼 클릭시 생기는 포커스 표시 제거 inherit: 조상의 attribute 값을 들고 옴 box-shadow: 해당 block 그림자 넣기 z-index: position이 absolute, relative, fixed 같은 경우 적용, 숫자가 클수록 위로 쌓임. 팝업, 드롭다운 메뉴 만들 때 사용 background: 배경 이미지, 색상, 위치 등을 설정하는데 사용 background-color: 요소의 배경 색상만을 설..

1. property outline: outline은 단지 테두리만 생기는 것 뿐 - border와 차이점 border: 은 두께만큼 박스의 전체 크기도 커진다. text-align: block 내부 글자 위치 선정 transition: property의 값의 변화가 생길 경우 부드럽게 변화 시켜준다. ::after : 가상요소, 선택한 요소의 일부에만 style 적용, html에 elelment를 적용한 것 처럼 동작 content : ::after ::before와 보통 같이 사용, 요소로 추가된다. overflow : 부모 영역 바깥으로 나가면 해당 부분 자르기 float : 좌우 이동 max-height: div 높이 설정 scrollHeight: 원글이 길어서 화면 바깥으로 빠져나간 부분을 포함..

1. summary 기능 transition : action이 일어나는 시간 translateY : 세로로 내려감 rotate : 중심점을 기준으로 회전 display : 형태(block, inline)를 설정 cursor : 해당 tag에 접근시 커서 변경 toggle : event 발생시, 기존 class 유지한 후 class 존재하면 제거, 없으면 생성 출처 : https://www.w3schools.com/howto/howto_css_menu_icon.asp 2. 적용 이미지 3. 코드 html css .container { /* display : block으로 할 것인지 inline으로 할 것인지 정해줌 */ display: flexbox; /* cursor : 해당 div에 접근시 커서 변경 ..

1. summary 기능 : 마우스 올리면 해당 link background color 변경 가능하도록 하기 출처 : https://www.w3schools.com/howto/howto_css_icon_bar.asp 2. 적용 이미지 가로 세로 3. 코드 html css /* 세로 모드 */ .icon-bar { width: 90px; background-color: #555; } /* 해당 class의 모든 a tag */ .icon-bar a { display: block; /* a : inline -> icon-bar div 내에서 위치 수정을 위해 block 처리 */ text-align: center; /*a : block -> 내부 img(inline) 요소 중간 정렬 */ padding: 1..