본문 바로가기
728x90
반응형

Programming101

[HTML] <button>사용하기 태그 안에서 을 사용할때 type정의가 되어있지 않으면 자동으로 submit 동작을 하게된다. 스크립트 동작으로 사용하고 싶을경우엔 이라고 정의해주면 된다. 2021. 1. 7.
[Javascript] 선택자 document.getElementById(); - 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환, - 대소문자를 구분해서 사용해야하고, 문서 내에 주어진 id가 없으면 null을 반환. document.getElementsByClassName(); document.getElementsByTagName(); 2021. 1. 5.
[HTML] input태그 readonly 와 disabled 속성 비교 readonly와 disabled는 모두 사용자의 직접 입력을 막는 속성이다. -readonly 사용법 -disabled 사용법 하지만 form안에서 사용 할 경우 두 속성은 아주 큰 차이가 있다. readonly - form 전송 가능, disabled - form 전송시 값 전달 불가능. 2021. 1. 4.
[Web] redirect 와 forward 현재 작업중인 페이지에서 다른페이지로 이동하기 위한 2가지 방법. 1. Redirect Redirect는 웹컨테이너로 명령이 들어오면, 웹 브라우저에게 다른 페이지로 이동하라고 명령한다. 웹 브라우저는 URL을 지시된 주소로 바꾸고 해당주소로 이동한다. 다른 웹 컨테이너에 있는 주소로 이동하고 새 페이지에서 Request와 Response객체가 새롭게 생성된다. -시스템에 변화가 생기는 요청(회원가입, 글쓰기 등)에 사용하기 적합하다. 2. Forward Forward는 웹컨테이너 차원에서 페이지의 이동만 존재한다. 실제로 웹 브라우저는 다른 페이지로 이동했음을 알 수 없다. 웹 브라우저에는 최초에 호출한 URL이 표시되고, 이동한 페이지의 URL 정보는 확인할 수 없다. 또, 현재 실행중인 페이지와 F.. 2021. 1. 1.
[Spring] DTO 와 VO DTO(Data Transfer Object) DTO(Data Transfer Object)는 데이터 전송(이동) 객체라는 의미를 가진다. DTO는 주로 비동기 처리를 할 때 사용한다. 계층간 데이터 교환을 위한 객체(Java Beans)이다. DB의 데이터를 Service나 Controller 등으로 보낼 때 사용하는 객체를 말한다. 즉, DB의 데이터가 Presentation Logic Tier로 넘어올때는 DTO로 변환되어 오고가는 것이다. 로직을 갖고 있지 않는 순수한 데이터 객체이며, getter/setter 메서드만을 갖는다. 또한 Controller Layer에서 Response DTO 형태로 Client에 전달한다. VO(Value Object) VO(Value Object)는 말 그대로 .. 2020. 12. 30.
[CSS] 선택자 선택자는 html 파일을 만들고 태그에 스타일을 줄 때 사용한다. 선택자의 종류 전체 선택자 * { margin: auto; } - 모든 태그에 대하여 적용. 하지만 이 방법은 테스트 용도로만 사용하길 권장한다고 함. 태그 선택자 h1 { color: green; } - h1 태그에 대하여 적용. 클래스 선택자 .className { width: 50px; } - .클래스이름 으로 사용. 아이디 선택자 #idName { position: fixed; } - #아이디이름 으로 사용. 복합 선택자 하위선택자 section ul { text-shadow: none; } - 선택자 사이를 공백으로 나타내며 앞 요소의 자손인 뒷 요소를 선택. 자식선택자 section > ul { text-shadow: none;.. 2020. 12. 28.
[Javascript] Ajax Ajax(Asynchronos Javascript And XML) - 자바스크립트를 통해서 서버에 데이터를 요청하는 것 - 새로고침을 할 필요없이 부분 부분만 로딩되므로 속도가 빠름 -비동기식 동기식 / 비동기식 차이 동기식은 대표적인 예로 우리가 웹사이트 로그인을 할 때 아이디와 패스워드를 입력하여 서버로 전송하고 서버로 부터 응답을 받은 후 로그인 성공, 실패 웹페이지로 이동하는 것, 서버로 데이터를 요청하고 응답이 오는 시간동안 작업을 멈추고 기다리는 것을 뜻함. 비동기식은 서버로 데이터를 요청하고 응답이 오는 시간동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후에 작업을 하기때문에, 사용자의 입장에서는 화면 갱신이 없어 편리하고 빠르게 작업을 처리하는 것처럼 느껴짐 GET / POST 차.. 2020. 12. 27.
[CSS] Flex 1 2 3 div.container 부모요소/flex container/ flex의 영향을 받는 전체 공간. div.item 자식요소/flex item/설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것. flex container에 display: flex를 적용하는게 시작. 아이템들은 기본적으로 위 그림같이 배치가 된다. (가로방향으로) 그리고 자신이 가진 내용물의 width만큼만 차지하게 된다 (inline요소와 비슷) flex-direction (배치 방향 설정)- 아이템들이 배치되는 축의 방향을 결정하는 속성 row; (기본값) 가로 방향으로 배치 column; 역순으로 가로 배치 row-reverse; 세로 방향으로 배치 column-reverse; 역순으로 세로 배치 flex-wr.. 2020. 12. 26.
[CSS] 크리스마스 트리 만들기 수정 며칠전에 css 공부하다 만든 크리스마스 트리.. 캡쳐해놓고 보면 그럴싸하지만.. 창 크기를 조절하면 지멋대로.. 기존 작성한 코드 ○ ★ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 기존 코드에서 container의 width를 지정해주지 않아서 발생한 문제였다. width: 900px; 만 추가해주니 이제 창크기에 따라서 지멋대로 움직이지 않는다!!! .container { display: flex; flex-wrap: wrap; text-align: center; width: 900px; } 2020. 12. 26.
728x90
반응형