분류 전체보기 (69) 썸네일형 리스트형 Icon site fontawesome.com/icons?d=gallery Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com www.flaticon.com/ Flaticon, the largest database of free vector icons Download all icons in SVG, PSD, PNG, EPS format or as webfonts www.flaticon.com 무료 아이콘을 사용할 때 저작권을 표기해줘야 한다. [codepen] Image slider design codepen.io/tudorsuhan/pen/yJwvNo [이클립스] 폴더안에 파일 업로드 할 때 프로젝트 자동 새로고침되게 하는 방법 이미지 업로드 하는 로직을 구현하였다. MultipartRequest multi=new MultipartRequest(request, realpath, maxSize, encType, new DefaultFileRenamePolicy()); 그런데 폴더 상에는 이미지 생성이 잘되는데 이클립스 프로젝트에는 자동 업데이트가 되지 않는 경우가 발생했다. 이클립스에 업데이트가 될때도 있고 안될때도 있었다. refresh 바로바로 안됐다. 구글링하여 다음 방법을 사용하니 해결되었다. docu94.tistory.com/117 [Eclipse] 이클립스 파일 업로드나 이미지 업로드 후 새로고침(refresh)을 안해도 되는 방법 평소 개발할 때, 파일을 다운받아서 img 폴더에 넣거나 파일 업로드를 할 경우, 새로고.. 정렬 Tip 1. 수평 가운데 정렬 자신요소에 marign : auto; 를 사용하면 수평 가운데 정렬을 합니다. 2. 수직 가운데 정렬 부모 요소에 display: flex; align-items: center; 를 사용하면 수직 가운데 정렬을 합니다. 박스 모델 박스 모델(box model) 모든 HTML 요소는 박스모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 내용(content)으로 구분합니다. 1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. 3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다. 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. 사용 예 * Box Model * 테이블 속성 테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있습니다. 1. border 2. border-collapse 3. border-top, border-bottom, border-right, border-left 4. td의 width, height 5. text-align 6. vertical-align 1. border 속성 border 속성으로 테이블의 테두리(border)를 설정할 수 있습니다. 사과 바나나 딸기 수박 자두 체리 키위 오렌지 참외 2. border-collapse 속성 border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현됩니다. ...생략 3. border-top, border-bottom, border-right, borde.. 크기 CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있습니다. 가장 대표적으로 사용되는것이 아래 두가지 입니다. 1. width 2. height 가로와 세로비율을 조절해 원하는 크기로 설정할 수 있습니다. 크기 단위 : 퍼센트 백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다. 비율을 설정하지 않을때는 다음과 같습니다. 백분율은 상대적은 크기임으로 부모 요소가 크기를 갖고 있어야합니다. 가로도 적용해보겠습니다. background 속성 background 의 대표적인 속성 2개를 소개해보겠습니다. 1. background-color 속성 2. background-image 속성 1. background-color 속성 배경색을 의미하며, 값은 color 속성의 포맷을 사용합니다. background-color 2. background-image 속성 배경을 이미지로 지정하며, url에 경로를 입력해줍니다. background-color 이전 1 2 3 4 ··· 9 다음