이번에는 css 플롯에 대해서 알아 봅시다. 플롯 float 는 띄우다 라는 뜻을 가지고 있습니다. float 는 보통 이미지 or 텍스트 를 정렬하기 위해서 사용합니다. 예를 들어서, 왼쪽으로 정렬하거나 오른쪽으로 정렬할 때 사용하는데, 띄워서 정렬 합니다. 즉. 블럭요소 or 인라인요소 를 같은 줄에 배치할 수 있도록 합니다. 박스를 10개 만들어 봅시다. 이렇게 세로로 쌓여진, 박스를 float 를 사용하면 아래처럼 됩니다. 그런데, 부모요소 인 boxList 를 16.6666% 로 나누면 6 입니다. 즉 박스가 6개씩 정렬되어야 하는데 5개만 쌓였죠? 그 이유는, border 도 박스의 크기에 포함이 되기 때문 입니다. 이를 해결하기 위해서, 부모요소에는 overflow : hidden 속성을, ..

이번에는 css의 background 에 대해서 알아 봅시다. background background 는 뒷 배경 이라고 생각을 하시면 되겠습니다. background-color -> 뒷 배경에 색 넣기 background-image -> 뒷 배경에 이미지 넣기 ※ border : 1px solid #777; 을 적용하고 있습니다. background-repeat -> 이미지 반복 여부 repeat : 반복 ( 기본값 ) no repeat : 반복x repeat-x : x축 반복 repeat-y : y축 반복 background-position -> 뒷배경 시작위치 ( 왼쪽, 위 ) %를 사용해서 위치를 지정할 수도 있습니다. background-size -> 뒷배경 사이즈 조절 auto : 이미지의 원..

이번에는 css의 폰트, 문단, 디스플레이에 대해서 알아 봅시다. 폰트 폰트는 글자의 글꼴 등을 말합니다. 웹폰트 먼저 웹폰트 를 사용하는 방법에 대해서 알아 봅시다. 웹폰트는 외부 웹의 폰트를 가져와서 사용하는 방법인데요 유료도 있고 무료도 있으니까 잘 알아보고 사용하셔야 합니다 ㅎㅎ; 구글폰트를 검색해 주세요 ( 무료 ) 구글폰트에 들어가면 여러가지 폰트들이 나오는데, 그 중에 원하는 걸 선택합니다. 원하는 걸 선택했다면, 그 중에서 또 원하는 것을 선택합니다. 그러면 오른쪽에 아래 그림과 같은 창이 생성이 되는데, 여기서 link 방식으로 사용할건지, import 방식으로 사용할 건지 정하신 후에, 복사해서 붙여 넣으면 됩니다. link 로 사용하기. import로 사용하기. 사용하기 편한대로 사용..

이번에는 css의 선택자에 대해서 알아 봅시다. 선택자 선택자는 어디에 css를 적용할 것인지 선택하는 것을 말합니다. 전역선택자 파일의 모든 곳을 선택하는 방법입니다. * 를 사용 합니다. ex) * { margin : 0; font-size : 15; } 태그선택자 태그를 선택하는 방법입니다. 선택자가 들어가는 자리에 태그 이름을 사용 합니다. ex) p { color: red; } 다중선택자 여러가지 선택자를 선택하는 방법입니다. , 를 사용 합니다. ex) p , div { color: blue; } 하위선택자 위의 그림과 같이 있을 때, 태그는 의 하위에 있다고 생각하시면 됩니다. 공백(스페이스바) 로 사용 합니다. ex) div p { color: red; } 자식선택자 위의 그림과 같이 있을..

이번에는 css의 기본을 배워 봅시다. ※ visual studio code 에서는, .html 파일을 만든 후 "html:5" 를 입력 후 Tab 키를 누르면 기본적인 html 코드가 빠르게 작성이 됩니다. css css는 html로 만들어진 파일에 외형을 꾸며줄 때 사용하는 건데요, css에 본격적으로 들어가기 전에, 기본적으로 알고가야 하는 개념이 있습니다. 바로 블럭 요소 와 인라인 요소 입니다. 블럭 요소 1. 블럭요소는 화면에서 블럭(공간)의 크기를 갖는다. 자동 줄바꿈 2. 블럭요소 안에는 블럭요소와 인라인요소를 가질 수 있습니다. 블럭 요소에는 div , h1 ~ h6 , p , ul , ol , li , section , header , aside , article , footer 등이 ..

이번에는 JSP 환경에서 MVC2 모델 방식으로 게시판을 만들어 봅시다. 게시판 만들기 게시판의 배경 및 form 등등은 선생님이 미리 만들어 주셨고, 컨트롤러를 같이 만들었습니다 ~ 먼저, 게시판의 목록 화면이 있고, 글 작성을 누를 수 있습니다. 글을 작성하는 페이지로 이동한 후, 목록을 누르면, 다시 게시판 목록으로 이동되고, 작성 완료를 누르면 글이 작성 됩니다. 게시판 목록으로 이동될 때, 데이터베이스에 연결해서 테이블의 정보를 읽어 옵니다. 게시판의 제목은 링크를 걸어서 클릭하면 글 상세보기 화면으로 이동 합니다. 글 상세보기 화면에서는, 목록을 누르면 다시 게시판 목록으로 , 수정을 누르면 글 수정화면으로, 삭제를 누르면 글이 삭제가 됩니다. 파일명 : board_list.jsp ( 게시판 ..