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.
타임리프는 스프링 없이도 동작하지만, 스프링과 통합을 위한 다양한 기능을 편리하게 제공한다. 타임리프 메뉴얼 기본 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 스프링 통합 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 1. 스프링 통합 - 타임리프 추가기능 스프링 SpringEL 문법 ${@myBean} 스프링 빈 호출 지원 form 관리 추가 속성 th:object - 기능 강화, form command 객체 th:field, th:errors, th:errorclass form 컴포넌트 기능 - checkbox, radio button, list..
0. 이전 기본 문법 타임리프 사용 선언 th : PROPERTY = " @{} or ${} or | | or ( )" PROPERTY ex: name, class 같은거 의미 타임리프는 th:로 타임리프 문법이 시작된다. th에 적용할 property를 쓰고 " " 내부에 적용하고 싶은 문법을 적용한다. 어지간한 property는 다 th: property 종류 가능하다. th: property를 해도 그냥 property도 작성을 하는데 이는 렌더링 전에는 그냥 property가 적용되고 렌더링 후에는 th: property가 적용된다. @{} : url 경로 ${} : controller로 부터 받아온 model 객체의 key를 작성하면 value를 반환해줌 | | : 리터럴로 JS의 벡틱 같은 역..
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: 원글이 길어서 화면 바깥으로 빠져나간 부분을 포함..
