o-yoon

* 자식 결합자 * - 자식 결합자(Child Combinator)는 어떠한 부모 선택자에 대한 자식을 선택하기 위해 사용하는 결합자이다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "어떠한 부모 선택자" > "자식 선택자" { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } * 자손 결합자 * - 자손 결합자(Descendant Combinator)는 어떠한 부모 선택자에 대한 자손을 선택하기 위해 사용하는 결합자이다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "어떠한 부모 선택자" "자손 선택자" { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } * 일반 형제 결합자 * - 일반 형제 결합자(Gener..

* ID 선택자 * - ID 선택자(ID Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 아이디의 이름을 활용하되, 그 이름 앞에 샾(#)을 붙인다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "#아이디 이름" { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } - CSS 스타일을 주기 위해 ID를 부여하는 것은 추 후에 ID가 겹칠 가능성을 제공함으로 사용을 자제한다. * 클래스 선택자 * - 클래스 선택자(Class Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 클래스의 이름을 활용하되, 그 이름 앞에 마침표(.)를 붙인다. - 다음과..

* z-index 속성 * - 요소를 화면에 표시할 순서를 정한다. - 값은 0(기본값)이상의 자연수로 표시한다. - 값이 클수록 다른 요소에 의해 가려지지 않고 화면에 표시된다. - 용법 ... { z-index: [0~?]; } - 값이 같다면 보다 뒤에 만들어진 요소가 위로 올라오게 된다. - position 속성 값이 static 이라면 무시된다. * width 및 height 속성 * - width는 가로크기를, height는 세로크기를 지정하기 위해 사용한다. - 단, display가 inline인 요소(span, a 등)는 그 display 값을 다른 것으로 변경하기 전에는 width 및 height 속성이 적용되지 않는다. * transition-duration 속성 * - 어떠한 요소에 ..

* Not 의사 클래스 * - Not 의사 클래스(Pseudo Class)는 다른 의사 클래스를 부정하기 위해 사용한다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "선택자":not(:"다른 의사 클래스") { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } - 가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다. *:not(:last-child) { . . . } * Hover 의사 클래스 * - Hover 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소에 마우스가 올라가 있는 상태(Mouse Hover)일 때에 대한 선택자이다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "선택자":hover { "속성" :..

HTML - HTML(Hyper Text Markup Language) 는 마크업 언어 (Markup Laguage) 이고 자체적으로 연산이 불가능하다. - 마크업 언어는 태그(Tag) 등을 이용하여 문서나 데이터의 구조를 정의하는 언어이다. - 태그란 문서상에서 어떠한 구성요소의 존재나 시작과 끝을 알리기 위해 사용한다. ''가 여는 태그(Opening Tag) 이고, ''가 닫는 태그(Closing Tag) 이다. - 자동으로 닫는 태그(Self-Closed Tag)는 닫는 태그를 요구하지 않는다. - 태그 이름은 대소문자를 구분하지 않지만 전체 소문자로 작성하는 것이 표준이다. - 시멘틱(Sementic) : 검색 엔진(Search Engine) 이나 TTS(Text-To-Speech) 로 하여 어..

- S(Strike) 태그는 어떠한 자료나 문서가 수정되었거나 잘못되었음을 나타내기 위해 취소선을 긋는데 사용한다. >> 예를들면 이런 식 - SUB(Subscript) 태그는 아래 첨자를 나타내기 위해 사용한다. - 시멘틱(Sementic) : 없음 - sup(Superscript) 태그는 위첨자를 나타내기 위해 사용한다. - 시멘틱(Sementic) : 없음 - Del(Deleted) 태그는 어떠한 내용이 삭제되었음을 나타내기 위해 사용한다. - table 태그 혹은 표(Table) 태그는 표를 그릴 때 사용한다. - 사이트 레이아웃을 위해 표를 사용하지 않아야한다. 순수 데이터를 담는 용도로만 사용. ..

오늘은 리뷰페이징에 대해 기록 해보자 ! 지난번에 포스팅한 목록페이징 같은 경우엔, list.html 그 자체에서 상품을 가져올때 페이징처리 해주고 html 타임리프 사용해서 넣어주면 끝이였는데, 이번에 리뷰페이징은 컨트롤러에서 애초에 JSON타입으로 값을 보내주기도 했고, 상품 읽기 페이지 안에 자바스크립트로 반복문을 실행하면서 리뷰를 가져오는거라 페이징 처리에 접근하기가 조금 난감했는데, 강사님께 여쭤보니 javaScript xhr 로 페이징을 해야한다는 힌트를얻고 시작 ! : 페이징 처리하기위해 필요한 모델 패키지/컨트롤러 생성 후 변수 3개 받았을때 처리할 메서드 만들기 public PagingModel(int countPerPage, int totalCount, int requestPage) {..

비밀댓글 작성 구현 구상 (요청 보낼때) 1. javaScript로 isSecret 변수 선언 후 아이콘 클릭할때마다 변경값을 저장한다.(나는 boolean 타입으로 지정함) 2. 댓글 작성, 댓글 수정, 대댓글 작성, 대댓글 수정 ajax 요청 보낼때마다 isSecret 값도 같이 컨트롤러 값에 넣어준다. 3. Controller에서 받은 값을 comment.setIsSecret('넘겨받은 값'); 으로 처리하여 값을 저장해준 후 서비스 처리! 4. 각 상황에 맞는 서비스 로직 구현 1. javaScript로 isSecret 변수 선언 후 아이콘 클릭할때마다 변경값을 저장. let isSecret = false; // 공개여부 기본값을 공개로 설정 const secret = window.document..