가카리의 공부방

25. 다단(multi column) 다단(multi column)은 아래 신문처럼 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미합니다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공합니다. 먼저 column-count 속성을 2로 주게되면? multi-column.html .column text-align: justify; column-count:2; /* column-width: 200px;*/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eius nostrum adipisci in ad sed vel, illo quibus-dam quas perspiciatis aliquam magnam consectetu..

21 Float Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다. 1) Float효과란? Float가 어떤 효과인지 확인하기 위해서 다음 예제를 봅시다. float.html img width:300px; float:left; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptas possimus enim fuga nostrum as-sumenda cum sunt, iste quibusdam maxime, sequi, recusandae aut quisquam ab nisi nobis! Est voluptatem cum-que, n..

20.Media Query 1) 소개 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다. media-query.html @media (min-width:601px) body background-color: blue; @media (max-width:600px) body background-color: green; @media (max-width:500px) body background-color: red; 500px 이하 : red 501~600px : green 601px 이상 : blue 실행화면 다음과 같이 넓이에 따라 배경색이 바뀌게 됩니다. 여기서 유의할 것은 캐스케이드 룰 때..

22.flex CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다. 이 기술을 현재 사용해도 좋을지는 아래 페이지를 참고하셔요. http://caniuse.com/#search=flex 1) flex의 기본 flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다. flex-basic1.html (doct..

18．포지션 엘리먼트의 위치를 지정하는 4가지 방법이 있습니다. - static : 기본값으로 위치정보를 임의로 설정해줄 수 없습니다.. - relative : 상대위치로, static 위치 사용 시 있던 위치를 기준으로 이동합니다. - absolute : 절대위치로, 문서 최좌측 상단을 기준으로 위치 정보를 설정하며 스크롤시 이동합니다. - fixed : 위치 고정으로 스크롤과 상관없이 항상 문서 최좌측 상단을 기준으로 좌표가 설정됩니다. 이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다. 엘리먼트의 위치를 정하는 속성 position 속성 값 4가지 1. static(기본값) : 움직이지 않고 정적인 상태 2. relative : 부모 엘리먼트를 기준으로 상대..

POST 방식으로 데이터를 넘기는 간단 예제이다. 다음과 같이 3개의 파일을 수정해야한다. BBSInput.html DOCTYPE html> Insert title here 글쓰기 이름: 제목: BBSPostServlet.java package com.exam.jsp; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.ht..

AdderInput.html에서 값을 받고 AdderServlet.java에서 값을 처리한 후 합을 띄운다. AdderInput.html DOCTYPE html> Insert title here 첫번째 수 : 두번째 수 : AdderServlet.java package com.exam.jsp; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import ja..

질문"http://jquerymobile.com/demos/1.2.1/docs/buttons/buttons-icons.html"처럼 data-icon을 시도해보려고 했는데 안되요.제 코드는 다음과 같구요. Button 헬프좀요 ㅠㅠ 답변맨앞에 아래와 같이 다셔야됩니다.그리고 jQuery Mobile 코드는 다음과 같이 해야되요 Button 출처 : http://stackoverflow.com/questions/16940980/data-icons-not-displaying

* 각 스타일에 대한 예제이다. border-style:dotted border-style:solid border-style:double border-style:groove border-style:ridge border-style:inset border-style:outset * 보더의 넓이에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다. border-style:solid;border-width:5px border-style:solid;border-width:thin border-style:solid;border-width:memium border-style:solid;border-width:thick * 보더의 색에 대한 예제이다. border-style과 같이 쓰지 ..

▶ name (1) document.폼객체명.폼원소명.value (2) document.getElementsByName("name") name은 page 안에서 중복되어 사용이 가능하며 action에 해당하는 페이지로 전달하는 파라미터로 사용된다. GET/POST 방식으로 값을 전달하고 싶은 TAG에 사용. Form 객체들(input , radio box ,checkbox )에서 전송되어지는 Parameter의 Key값으로 사용이 됩니다. 서버단에서는 request.getParameter(parameterName) 이런 식으로 값을 가져오죠. ▶ id (1) document.all.id.value (2) id.value (3) document.getElementById("폼 id").value id는 p..