디케이

는 List, 배열 요소를 순서대로 반복해서 처리할 수 있는 태그 입니다. 1. 이름 목록을 가진 ArrayList를 출력하는 예제 입니다. // 리스트를 만들어서 모델에 넣습니다. List nameList = new ArrayList(Arrays.asList("홍길동", "김철수", "박영희")); model.addAttribute("nameList", nameList); ${status.count} : 실행결과: 1 : 홍길동 2 : 김철수 3 : 박영희 2. 객체가 들어 있는 리스트를 출력하는 방법 입니다. 위 코드는 boardVO 객체의 getTitle() 메소드를 호출한 결과를 출력합니다. 3. Map 이 들어있는 리스트를 출력하는 방법 입니다. 위 코드는 boardMap 의 get("title..

java script(jQuery) $(document).ready(function($) { $(".scroll_move").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); // 클래스가 scroll_move인 a 태그를 눌렀을때 발생되게 하는 이벤트 // $(this.hash) a태그에 있는 해쉬 값으로 스크롤링 되며 이동 // 500 은 스크롤 속도 html 소스 div1로 이동 div2로 이동 div3로 이동 div4로 이동 div1 div2 div3 div4

정의 및 특징 태그의 method 속성은 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다. method 속성은 속성값으로는 GET과 POST 두 가지 중 하나를 선택할 수 있습니다. GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식입니다. GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다. 또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다. 따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다. POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식입니다. POST 방식의 HTTP 요청은 브라우저에 의해..

텍스트를 드래그하여 블럭을 씌울 때 스타일을 변경하기 위한, CSS의 pseudo-element 중 ::selection 선택자에 대해 알아보자. 사용 심플하다. 직접 드래그해보자. See the Pen ::selection 연습 by d8040 (@d8040) on CodePen. 모질라 계열을 위해 ::-moz-selection 또한 사용하자. 속성 모든 속성을 사용해 스타일이 가능하진 않고, 아래의 속성들만 사용할 수 있다. color background-color cursor caret-color outline text-decoration 및 관련 속성 text-emphasis-color text-shadow 주의 단순한 미적 이유로 selected 텍스트를 스타일할 때 웹 접근성을 고려해야 한다..

고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다. 한 줄 단위로 글자 자르기 처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여 조건을 맞추는 일부터 시작된다. 출력될 너비 조정하기 CSS로 글자 자르기를 위해서는 글자가 출력될 너비가 필요하다. 기본적으로 CSS 박스 모델 (box model) #1 에서 살펴봤듯이 display 속성의 inline 값과 같이 요소의 너비를 가질 수 없는..

1. 화살표 간단한 화살표 만의 패턴에서 흔히 볼 수있는 border지정한 요소를 transform: rotate(-45deg);이지 회전시킨 것입니다 CSS를 다음과 같이 설명합니다. CSS a { padding-top: 60px; } a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; } 2. 화살표 × 서클 이곳은 방금 화살표..

전체적으로 메인페이지를 만들 때는 내비게이션 바를 만들 때보다 더 쉬웠던 것 같다. 적용하기에 어려운 부분은 애니메이션처럼 움직이는 부분이었고 나머지는 할만했다. ✌🏻 Background Image 🖼 배경 이미지에 적용하고 싶었던 효과는 크게 두 가지였다. ☝🏻, 스크롤을 해도 고정되어 있을 것. ✌🏻, 화면에 표시되는 폰트보다 뒤에 있는 느낌으로 조금 어두울 것. 배경 이미지 고정 📌 이 부분은 구글링으로 아주 쉽게 찾을 수 있었다. CSS .main_1 { background-image: url(images/main.jpg); height: 100vh; background-size: cover; background-attachment: fixed; } background-attachment: fix..

CSS는 상대적으로 배우기 쉽고 재미있습니다. 웹 개발 초심자에게는 이만큼 접근하기 좋은 게 없죠.CSS는 분명 쉽고 재밌지만, 작업이 고도화될수록 불편함도 같이 커집니다. 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 같이 커지죠. 하지만 웹에서는 표준 CSS만 동작할 수 있기 때문에 다른 선택권이 없습니다.그렇다면 우리는 앞으로 계속 CSS만 사용해야 할까요?CSS Preprocessor 란?HTML, CSS를 다루는 분이라면 한 번은 들어봤을 Sass, Less 등이 있습니다. 이 친구들은 CSS 전(예비)처리기 입니다. 보통 CSS Preprocessor 라고 부릅니다.CSS가 동작하기 전에 사용하는 기능으로,..

절대경로는 아시는 바와 같이 이미 지정되어 있어 변경할 수 없는 경로를 말합니다. 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결시킬 때 사용하는 경우입니다. 사이트바로가기 일반적으로 하나의 웹페이지 또는 사이트를 제작할 때, 제작의 효율성을 위해 파일의 형식이 같은 파일들을 하나의 폴더안에 저장합니다. ​ (1) 현재 파일을 기준으로 동일 위치로 연결되는 경우 아래의 그림과 같은 폴더 구조를 가진 웹사이트에서 index.html 파일에 favicon.png 를 연결시키는 코딩을 하려고 합니다. index.html 파일이 저장된 위치를 기준으로 favicon.png 파일은 동일한 위치에 저장되어 있기 때문에 파일명과 확장자를 함께 기재해주면 됩니다. -- index.html 파일 소스 중..

See the Pen 그래프 by d8040 (@d8040) on CodePen.