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. 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..
