Computer Science/Web
[Web] SNS형 게시판 만들기 프로젝트 (5) - JSP 사용하기
[Web] SNS형 게시판 만들기 프로젝트 (5) - JSP 사용하기
2020.05.28$ 개발환경은 Mac OS Catalina임을 알려드립니다. $ 이번에는 JSP사용과 톰캣9 설치 과정을 설명해드리겠습니다. 제가 사용하는 건 맥북이라 좀 까다로운 편이니 이해해주시길 바랍니다. 우선 JSP가 뭔지를 알아야 합니다. JSP란 Java Server Page의 약자로서 일반적인 HTML과 다르게 PHP처럼 동적인 웹 개발이 가능하게 만들어준 스크립트 언어입니다. 일반적으로 JSP를 사용하기 위해서 Apache Tomcat과 연동을 해서 사용하는 경우가 많습니다. 톰캣이 해주는 역할은 JSP코드를 Servelet Class로 변환해서 실행을 시켜주는 역할을 합니다. JSP의 동작원리는 일반적으로 Model2를 활용하게 됩니다. JSP가 실행이 되면 우선 Web container로 해당 파일이 ..
[Web] SNS형 게시판 만들기 프로젝트 (4) - Java Script 사용
[Web] SNS형 게시판 만들기 프로젝트 (4) - Java Script 사용
2020.05.17$ 개발 환경은 Mac OS Catalina임을 알려드립니다 $ 오랜만에 Web관련 포스팅을 합니다. CSS설정는 사실 내용적인 부분이 암기가 많습니다. 그래서 개발할 때는 W3school을 참조하는 게 좋습니다. 내용이 너무 방대하니까요. 이제 좀 더 코딩적인 요소에 가까운 JavaScript와 JSP에 대해서 알아봅시다. 이번주 과제는 JavaScript를 활용해서 게시글 업로드를 하고 사용자가 입력한 내용을 출력시켜서 보여주면 되는 것과 form에서 입력한 결과를 alert에서 보여주는 처리를 해주면 됩니다. 우선 좀 쉬운 2번 과제부터 진행해봅시다. form태그에 기록할 수 있는 대부분의 내용들을 입력을 받고 해당 내용을 alert로 출력해주면 됩니다. 우선 form태그 형식을 짜봅시다. inpu..
[Web] HTML / CSS /JavaScript 내용 정리
[Web] HTML / CSS /JavaScript 내용 정리
2020.05.03시험공부용 HTML / CSS3 / JavaScript 내용 정리본입니다. > HTML 태그 - 태그 내부에 아무리 많은 공백을 입력해도 무시함 -> 사용해서 공백 적용 - 태그 사용하면 적은 그대로 출력해줌. 공백, 줄 바꿈 모두 적용. - 숫자 클수록 작은 제목 적용 - 구분선 - 볼드체, 이텔릭체 - 태그(목록 태그) 하위에, 항목은 태그로 추가한다. 해당 목록들은 넘버링이 없음. 태그 내부에 태그 추가 가능함. - 태그(목록 태그)는 과 동등하게 사용하지만 넘버링이 붙는다. 넘버링 종류는 type=””으로 결정해주면 된다. Start값 설정해주면 해당 번호부터 시작한다. > value 사용해서 중간에 낚아채기도 가능. - 로 제목, 설명 가능 - 에서는 target값에 따라 링크 ..
[Web] SNS형 게시판 만들기 프로젝트 (3) - CSS 설정
[Web] SNS형 게시판 만들기 프로젝트 (3) - CSS 설정
2020.04.13지난 시간에는 큰 틀을 잡았습니다. 이번에는 단순 table로만 설정한 틀을 고치기위해서 CSS를 잡아줍시다. 테이블로 잡으면 코드를 보기가 너무 안좋습니다. 이번에는 section, aside 등을 활용하고 CSS로 디자인을 잡아줍시다. 오늘 핵심이 되는 것은 CSS의 활용과 페이지의 구획분활입니다. HTML5에는 마치 table과 div으로 나눠놓은 것처럼 구획이 나눠져 있습니다. 보통 아래와 같이 구분을 하게 됩니다. header는 웹에서 가장 맨 위부분을 차지하게 됩니다. 보통 웹의 정보를 담고 있는 부분입니다. nav는 navigation에서 파생된 것으로 특정 목적지로 이동할 수 있게 링크들을 모아둔 영역입니다. 보통 해당 웹페이지의 카테고리 영역이 위치하게 됩니다. section은 핵심적인 ..
[Web] SNS형 게시판 만들기 프로젝트 (2) - 기본 레이아웃
[Web] SNS형 게시판 만들기 프로젝트 (2) - 기본 레이아웃
2020.04.10전체적인 디자인을 구상했습니다. 2차 과제는 기본 게시판과 글 작성 페이지를 구현하는 것입니다. 기본적인 레이아웃을 잡으라는 과제이므로 table을 활용해서 기본 레이아웃을 잡읍시다. 저번에 작성한 스토리보드를 기반으로 만들어봅시다. CSS 활용은 우선 최소한으로 해보겠습니다. 대신 코드가 굉장히 더러워집니다;; 메인 게시판으로 이동하는 이미지 링크를 먼저 구현합니다. 제가 자주 쓰는 저작권 문제없는 이미지를 받는 사이트가 있습니다. https://icon-icons.com/ko/ 무료 아이콘 SVG, PNG, ICO 또는 ICNS icon-icons.com 여기서 적당한 집 아이콘을 다운로드하여서 사용해주겠습니다. 왼쪽 위 구석에 홈 이미지를 박아둘거기때문에 따로 위치 조정은 안 합니다. html로 코..
[Web] SNS형 게시판 만들기 프로젝트 (1) - 스토리보드 구성
[Web] SNS형 게시판 만들기 프로젝트 (1) - 스토리보드 구성
2020.04.09이번 학기에 웹 프로그래밍 강의를 듣습니다. 예전에 고등학교 시절에 웹 프로그래밍을 간단히 해본 기억이 있어서 부담감은 좀 적긴 한데요. HTML5, CSS3, JSP를 이번 수업에서 배우게 됩니다. 웹 프로그래밍 수업 최종 프로젝트가 수업을 하면서 진행을 하게 됩니다. 이번 주제는 'SNS형 게시판 만들기'입니다. 공부한 걸 복습할 겸 제 프로젝트 기록을 작성해 봅시다. 저희 학교는 웹 프로그래밍을 할 때 Java Server인 JSP를 쓰기로 했기 때문에 eclipse를 활용합니다. 사실 코딩의 전반적인 걸 이클립스로 해야 하지만 이클립스는 너무 버그도 많고 구리기 때문에.... 저는 서버가 필요한 상황 아니면 아톰(Atom) 에디터를 활용하겠습니다. 제가 사용하는 아톰 플러그인이 궁금하시면 제가 작..
[Web] 아톰(Atom) 에디터 사용 플러그인
[Web] 아톰(Atom) 에디터 사용 플러그인
2020.04.08사실 설치는 이전에 해놨는 데 이번 학기부터 본격적으로 잘 사용하는 아톰(Atom) 에디터입니다. 보통 웹페이지 개발과 깃허브 자료 관리용으로 많이 쓰고 있습니다. 제가 아톰에서 사용하고 편리하다고 느끼는 플러그인과 패키지를 소개해드리겠습니다. 테마 관련 사항입니다. 패키지나 플러그인이라기보단 좀 더 아톰을 예쁘게 해주는 것입니다. 사실 예쁜 것보단 작업 파일 구분이 확실하다는 장점이 돋보이는 것 같습니다. 1. seti-ui (UI Theme) seti-ui는 확장자명에 따라서 파일 아이콘을 보여줍니다. 예를 들면 아래처럼 볼 수 있습니다. 2. atom-material-syntax-dark (Syntax type) seti-ui가 전체적인 인터페이스 디자인이라면 atom-material-syntax-..