전체 글32 Spring 프로젝트의 jsp에서 <c:forEach >문 사용 jsp상에서 DB로부터 가져온 데이터를 표시해야하고 싶은 페이지가 있다. db상에서 가져온 데이터를 표시하려면 우선 컨트롤러 상에 원하는 페이지가 포워딩된 메서드를 작업해야한다. 이때 Model인터페이스가 쓰인다. Model이란 MVC(model-view-controller)에서의 model이다. Model인터페이스의 addAttribute(attributeName, attributeValue) 메서드를 사용한다. BoardController.java의 일부 @GetMapping("/main") public String main(Model model) { model.addAttribute("project", service.getList()); return "board/main"; } 원하는 페이지가 포워.. 2021. 11. 19. 케스케이딩과 스타일 우선 순위 css에서 c는 케스케이딩으로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다. html문서에 스타일을 적용할 때 적용되는 스타일 간에 충돌이 발생할 수 있다. 이때 어느 스타일을 따라야하는지에 대한 규칙이 '스타일 우선순위'와 '스타일 상속'이다. 스타일 우선순위 스타일 우선순위는 다음과 같다. 1. 사용자 중요 스타일 2. 제작자 중요 스타일 3. 제작자 일반 스타일 4. 기본적인 브라우저 스타일 사용자 스타일 시트란 시스템에서 설정한 스타일을 뜻한다. 예를들어 윈도우즈 운영체제에서는 고대비 설정을 줄 수 있는데 이렇게 적용된 스타일이 사용자 스타일 시트이다. 제작자가 만든 스타일 시트는 사이트를 제작하면서 만든 스타일 시트를 말한다. 이때 !important가 붙은 스타일이 중요 스타일이다. 이 중.. 2021. 11. 19. CSS3 선택자 - 속성 선택자 [속성] - 지정한 속성에 스타일을 적용한다. 이 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용한다. '[ ]' 사이에 찾으려는 속성을 지정하면 된다. 아래의 예시는 a태그 중 href속성을 가진 요소에 배경색을 지정하는 것이다. a[href] { background: yellow; } [속성 = 값] - 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용할 수 있다. 아래 예시는 스타일을 target속성과 target속성값이 blank인 모든 태그에 적용시킨다. [target="blank"] { } [속성 ~= 값] - 여러 값 중 특정 값이 포함된 속성에 스타일을 적용한다. 아래의 선택자는 class속성에서 button을 포함한 태그에 스타일을 적용한다. 예를 들어 class="button.. 2021. 11. 19. CSS3 선택자 - 연결 선택자 하위 선택자 - 상위요소에 있는 하위 요소에 css를 적용한다. 상위요소와 하위요소는 공백으로 구분한다. section p { color: blue; } 자식 선택자 - 부모 요소안에 포함된 자식 요소중 해당 요소에만 css를 적용한다. 부모 요소와 자식요소는 >로 구분한다. section > p { clolr: blue; } 인접 형제 선택자 - 부모요소를 가지는 요소들을 형제요소라고 하는데, 먼저 오는 요소를 '형 요소' 다음에 오는 요소를 '동생 요소'라고 한다. 인접 형제 선택자는 첫 번째 동생요소에만 스타일을 적용한다. h1 + p { text-decoration: underline; } 형제 선택자 - 인접 형제 선택자와 달리 모든 형제 요소에 적용한다. 요소 사이에 '~'로 구분한다. h1 .. 2021. 11. 19. 이전 1 2 3 4 5 6 7 8 다음