목록분류 전체보기 (108)
Keep going
10-1 연결 선택자 연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. 선택자를 둘 이상 조합하므로 조합 선택자라고도 하고 콤비네이션 선택자, 콤비네이션 셀렉터 등으로 부른다. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 현재 요소를 기준으로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. 하위 선택자 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { /* section 요소의 모든 ..
9-1 배경색과 배경 범위 지정하기 배경색을 지정하는 background-color 속성 배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 사용한다. background-color는 앞에서 설명한 16진수나 rgb 값 또는 색상 이름을 사용해서 지정한다. background-color : #008000; background-color : rgb(0,128,0); background-color : green; cs 글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문제 전체에 상속된다. 따라서 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용되었다. 하지만 예외로 background-color 값은 상속되지 않는다. 기본적으로 모든 웹..
8-1 CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 블록 레벨 요소를 만드는 대표적인 태그로 ,,등이 있다. 블록 레벨과 인라인 레벨 body * { border: 1px solid blue; } .accent { color: red; font-weight: bold; } 시간이란... 내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라. Colored by Color Scr..
11.1 목록 페이지 작업과 includes 스프링 MVC 의 JSP 를 처리하는 설정은 servlet-context.xmll에 아래와 같이 작성되어 있다. Servlet-context의 일부 Colored by Color Scripter cs 스프링 MVC의 설정에서 화면 설정은 ViewResolver라는 객체를 통해 이루어지는데, 위의 설정을 보면 /WEB-INF/views 폴더를 이용하는 것을 볼 수 있다. /WEB-INF 경로는 브라우저에서 직접 접근할 수 없는 경로이므로 반드시 Controller를 이용하는 모델 2방식에서는 기본적으로 사용하는 방식이다. 게시물 리스트의 URL은 /board/list 이므로 최종적인 /WEB-INF/views/board/list.jsp가 된다. 11.1.1 SB..
7-1 글꼴 관련 스타일 글꼴을 지정하는 font-family 속성 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 이 속성은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다. font-family : | [, ] 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시된다. 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다. 따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각한다. 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다. body { font - family ..
6-1 웹 문서에 디자인 입히기 웹 문서에서 스타일 이란 HTML 문서에서 자주 사용하는 글꼴이나 색상,정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정지는 것을 가리킨다. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. HTML로는 웹 사이트의 내용을 나열하고 CSS 로는 웹 문서의 디자인을 구성한다는 아이디어가 웹 표준의 시작이다. 이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리하다. 또한 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 완전히 다른 느낌이 나게 할 수 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. CSS를 이용하면 HTML 로 작성한 내용은 그대로 두고 대상 기기에 맞게 ..
영속 계층, 비즈니스 계층의 구현까지 모든 테스트가 진행되었다면 프레젠테이션 계층인 웹의 구현을 해야 한다. 10.1 Controller의 작성 스프링 MVC의 Controller는 하나의 클래스 내에서 여러 메서드를 작성하고, @RequestMapping 등을 이용해서 URL을 분기하는 구조로 작성할 수 있기 때문에, 하나의 클래스에서 필요한 만큼 메서드의 분기를 이용하는 구조로 작성한다. 과거에는 이 단계에서 Tomcat(WAS)을 실행하고 웹 화면을 만들어서 결과를 확인하는 방식의 코드를 작성했다. 이 방식은 시간도 올래 걸리고 테스트를 자동화 하기에 어려움이 있다. 따라서 WAS를 실행하지 않고 Controller를 테스트할 수 있는 방법을 실습해보겠다. 10.1.1 BoardController의..
비즈니스 계층은 고객의 요구사항을 반영하는 계층으로 프레젠테이션 계층과 영속 계층의 중간다리 역할을 한다. 영속 계층 - 데이터베이스를 기준으로 설계 비즈니스 계층 - 로직을 기준으로 처리 예시) 쇼핑몰에서 상품을 구매한다. 해당 쇼핑몰의 로직이 '물건을 구매한 회원에게는 포인트를 올려준다' 고 하면 영속 계층의 설계는 상품과 회원으로 나누어 설계한다. 반면, 비즈니스 계층은 상품 영역과 회원 영역을 동시에 사용해서 하나의 로직을 처리하게 된다. 일반적으로 비즈니스 영역에 있는 객체들은 '서비스'라는 용어를 많이 사용한다. 9.1 비즈니스 계층의 설정 비즈니스 계층을 위해서 프로젝트 내 org.zerock.service라는 패키지를 작성한다. 설계를 할 때 각 계층 간의 연결은 인터페이스를 이용해서 느슨..