CSS
-
[css] css 애니메이션codeStates front-end/Css 2023. 3. 17. 13:19
HTML 삽입 미리보기할 수 없는 소스 📌 css 애니메이션 css 애니메이션은 여러 개의 css 스타일을 부드럽게 전화시켜준다. @keyfremes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. 📍 @keyframes @keyframes를 지정하는 방법 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값..
-
[css] 반응형 웹codeStates front-end/Css 2023. 3. 16. 20:08
HTML 삽입 미리보기할 수 없는 소스 📌 반응형 웹 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 📍 리플로우(Reflow)와 리페인트(Repaint 화면을 늘리거나 줄이는 등 크기를 조절하거나, 다른 사이트로 이동을 하는 등 화면에 있던 요소들의 크기가 바뀌게 되는데, 화면에 나타나는 모습을 바꾸기 위해 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려야 한다. 웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복 수행하는 것을 리페인트라 한다. 🔗 리플로우와 리페인트의 최적화 말 그대로 다시 필하고 다시 플로우를 정해야하는데, 이런 과정은 최소..
-
[JS] chapter12. 유효성 검사/ <실습> 회원가입 구현 / classList errorcodeStates front-end/Java Script 2023. 1. 6. 11:46
유효성 검사 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등) 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다. 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다. 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다. 이러한 것들을 유효성 검사라고 한다. ---------------------------------------------------------------------------------------------------------------------------------------------------------------- 유효성 검사를 통한 회원가입 구현 해보기 추가적으로 비밀번호 입력 UI를 HTML을..
-
[css] SelectorcodeStates front-end/Css 2023. 1. 4. 10:04
기본 셀렉터 * { } // 전체 셀렉터 h1 {} div {} section,h1 {} // 택스 셀렉터 (복수 선택 가능) #only {} // id 셀렉터 .widget {} .center {} // class 셀렉터 a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } // attribure 셀렉터 자식/후손/형제 셀렉터 자식 header > p { } 후손 header p {} 형제 section ~ p { } 인접 형제 section + p { } 기타 a:link { } /*사용자가 방문하지 않은 요소를 선택합..
-
[css] 박스 모델codeStates front-end/Css 2023. 1. 4. 10:00
모든 콘텐츠는 고유한 영역이 있다. 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 코드로 확인해보기 index.html Basic document flow I am a basic block level element. My adjacent block level elements sit on new lines below me. By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height. We are separated by our margins. Beca..
-
[css] 기본 개요codeStates front-end/Css 2023. 1. 4. 09:54
본 실습은 VS CODE로 작성했습니다. CSS는 독립적으로 사용하지 못한다. 그렇기에 기본 웹사이트를 세팅 후 CSS 알아보기 index.html This is the header. This is the navigation section. Home Mac iPhone iPad This is the main content. ... This is an aside section. ... 개인정보 처리방침 이용 약관 법적 고지 index.css body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-..
-
[JSP] 프로젝트로 배우는 자바 웹 프로그래밍 6장-1 개념,실습Languages/jsp 2021. 10. 26. 16:44
JSP 내장객체 개요 JSP 내장객체란? JSP 내에서 선언하지 않고 사용할 수 있는 객체 라는 의미에서 붙여진 이름 JSP 내장객체 request response pageContext session application out config page exception 1. request 기본 객체 클라이언트 관련 정보를 request 기본 객체에 저장 -request 기본 객체가 제공하는 기능 클라이언트 웹 브라우저와 관련된 정보 읽기 기능 서버와 관련된 정보 읽기 기능 클라이언트가 전송한 요청 파라미터 읽기 기능 클라이언트가 전송한 요청 헤더 읽기 기능 클라이언트가 전송한 쿠키 읽기 기능 속성 처리 기능 [실습] request 객체를 이용하여 requestform 만들기 request_form.jsp ..