PROGRAMMING/HTML, CSS
-
[ JSP ] 도서 검색(페이징 처리), 도서 상세정보(리뷰 조회)PROGRAMMING/HTML, CSS 2022. 6. 2. 22:05
하루입니다. 무엇을 만들어야 하는가 1. 페이징처리하기 2. 카트에 아이템 담기 3. 리뷰 조회하기 Book vo 만든다 BookDao 만들어서 책번호, 제목, 작가, 출판사, 가격, 할인가격 조회하는 메소드( ), 전체 행 갯수(= 책갯수) 반환하는 메소드( ), 한 페이지에 특정 갯수의 책만 나오게 하는(페이지 관련) 메소드 ( ) 만든다. ROW_NUMBER() OVER ( [PARTITION BY 컬럼명] ORDER BY 컬럼명 ASC|DESC ) ROW_NUMBER 사용함. 이 분석함수는 지정된 정렬기준으로 데이터를 정렬한 다음에 1번부터 시작하는 순번을 차례대로 붙인다. [PARTITION BY 컬럼명은 컬럼값이 같은 것끼리 1번부터 시작하는 순번을 붙이는 것이다. 생략 가능하다. 위의 식을 ..
-
[ CSS ] CSS 선택자 사용할 때 주의사항과 팁PROGRAMMING/HTML, CSS 2022. 5. 17. 21:42
하루입니다. CSS 선택자 사용할 때는 띄어쓰기를 잘 하자. 선택자1 :선택자2 선택자1의 하위 엘리먼트인 선택자2 중 첫번째 자식 엘리먼트를 찾는다. 선택자1:선택자2 선택자1 중 첫번째 자식 엘리먼트를 찾는다. w3school CSS selector 캡처화면 번역 선택자 작성 팁 1. 특정 엘리먼트 하나를 선택해야 할 때 document.querySelector("CSS선택자") : Element 객체가 반환된다. #아이디 선택자를 사용하자. :first-child, :last-child, :nth-child(n) 선택자를 사용하자. 속성선택자를 사용하자(폼입력요소의 입력필드가 선택대상일 때) 2. 엘리먼트를 여러 개 선택해야 할 때 document.querySelectorAll('CSS선택자') :..
-
[ CSS ] 정말 정말 중요한 CSS 선택자PROGRAMMING/HTML, CSS 2022. 5. 17. 21:18
하루입니다. 중요한 이유 : 자바스크립트를 사용할 때 값들을 선택하고 조작해야 한다. 조작하기 위해선 일단 선택할 수 있어야 하고 그게 selector 선택자다. 외워야 한다. 선택자란(Selector)? CSS에서 스타일을 적용할 HTML 요소를 선택하기 위해서 사용하는 것 기본 선택자 전체 선택자 * { color: red; } HTML 문서의 모든 엘리먼트(태그)를 선택한다. 사용목적 : 스타일 리셋에 사용한다. * { color: red; } 태그 선택자 태그명 { color: red; } HTML 문서에서 해당 태그를 모두 선택한다. p { color: red; } HTML 문서의 모든 p 엘리먼트를 선택한다. 아이디 선택자 #아이디속성값 { color: red; } HTML 문서에서 id속성값..
-
[ CSS ] float, clearPROGRAMMING/HTML, CSS 2022. 5. 16. 20:26
하루입니다. CSS의 float, clear, both. float 원래 용도 : HTML요소를 주변의 다른 HTML 요소와 자연스럽개 어울리도록 만들어주는 속성이다. 엘리먼트가 floating되면 다른 엘리먼트는 floating된 엘리먼트 아래로 들어오게 된다. floating된 엘리먼트 아래로 들어온 엘리먼트의 켄텐츠는 floating된 엘리먼트를 피해서 화면에 표시된다. 그런데 만약. 여기서 float의 영향을 받지 않게하고픈 엘리먼트가 있다면? 그럴 때 clear를 사용한다. 여기서 밑 줄을 사진 밑으로 내리고 싶다. 이 내용은 이미지와 아무 상관없는 내용입니다. float를 피해 밑으로 내려갔다! 만세! 하지만 float는 이런 것보다는 다른 부분에 더 사용된다. 그게 머냐? 레이아웃. main..
-
세상에서 가장 허접한 작은 홈페이지 만들기PROGRAMMING/HTML, CSS 2022. 5. 16. 01:16
하루입니다. 오늘은 저의 컴퓨터에서만 기능하는 아주 작고 소중하고 (바보같은) 페이지를 하나 만들었습니다. 이름은 하루 상점. 전자제품도 팔고 꽃도 팔고 회원가입 기능도 있어요. 회원가입을 꽃 단 토끼 밑으로 두고 싶었지만 ... 방법 미상. 아 생각해 보니까 노가다로 left 70% bottom 50% 이런 식으로 하면 됐겠네요 사용된 것 : img alt, button, link 여기서 회원가입을 누르면? 어디서 본 건 많아서 다 집어넣었음. 사용된 것 : input 태그들, link 바보 페이지인 이유 : 제출하면 회원가입 되는 게 아니라 처음 페이지로 링크되도록 했음 ㅎㅎ. 약간 로그인하면 첫페이지로 가는 그런 걸 구현하고 싶었다. 이번엔 물건을 보자. 전자제품을 판매한다. 사실 그냥 나열임. 사..
-
[ CSS ] CSS 우선순위, color, text style, 박스모델, 위치지정방식PROGRAMMING/HTML, CSS 2022. 5. 13. 23:45
하루입니다. 오늘은 첨으로 CSS 배운 날. CSS 우선순위, color, text style, 박스모델, 위치지정방식을 공부하자. CSS CSS는 html 문서의 디자인을 담당한다. 문법 : Selector(선택자) Declaration(CSS 선언) h1 {color:blue; font-size:12px;} 선택자 스타일을 적용할 대상 엘리먼트(태그)를 지정한다. CSS 선언 선택자에서 지정한 엘리먼트에 적용할 스타일을 선언한다. 각각의 CSS선언은 세미콜론; 으로 구분한다. 아이디는 #으로, 클래스는 .으로, 전체는 *으로 선택한다. CSS 적용하기 CSS 스타일은 inline, internal, external로 표현 가능하다. 인라인 CSS : 태그에 직접 스타일을 정의하는 것이다. 해당 라인에..
-
[ HTML ] 3 tier 구조PROGRAMMING/HTML, CSS 2022. 5. 13. 01:10
우리가 여태껏 만든 자바 프로그램은 키보드입력으로 값을 받았지만, 이제는 고객에게서 값을 받는다. 자바로 하는 일이 따로 있고, html로 하는 일이 있고(html css javascript는 세트), sql로 하는 일이 따로 있고 ... 클라이언트 / 서버 / db로 나뉘어 작업을 분할하기에 3계층 구조. 백엔드를 묶어 주는 게 spring이다. 아직 안 배웠지만 기대되네요. 말로만 들어보던 스프링. 프론트엔드 기술들도 기대된다. 이름 검색해서 코드 이미지들만 봤는데 약간 ... html과 자바를 섞은 느낌. 여기서도 객체 비스무리한 게 나오다니 ... 자바를 더 열심히 할 걸 그랬다. 자바 할 때 넘 힘들었음. 그렇지만 해야 하는 걸 ... 할 일을 하자. 우리가 할 일의 로드맵 같달까 ... 값을 ..
-
[ HTML] inline, block, div, span, id, classPROGRAMMING/HTML, CSS 2022. 5. 13. 00:58
하루입니다. 수많은 엘리먼트와 html과 태그들의 악수 요청 ... 블록 엘리먼트 항상 사용가능한 최대 너비를 차지한다. 항상 새로운 줄에서 시작한다. 블록 엘리먼트의 왼쪽이나 오른쪽에는 다른 엘리먼트가 위치할 수 없다. 엘리먼트의 너비(width)를 지정할 수 있다. 대표적인 태그 h1~h6, p, ol, ul, li, dl, dt, dd, table, form, div article, aside, section, nav, video, footer 인라인 엘리먼트 컨텐츠를 표시하는데 필요한 만큼의 너비만 가진다. 새로운 줄에서 시작하지 않을 수도 있다. 엘리먼트의 너비(width)를 지정해도 적용이 되지 않는다. 대표적인 태그 a, img, strong, em, small, del, b, i, br i..