본문 바로가기

웹 프로그래밍 기초162

HTML Class , Id Html 속성 중 Class와 id는 무엇일까요? 고유한 값인 id와 중복 사용이 가능한 Class에 대해 공부합니다. ID 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다. 고유한 ID값이 있으면 하나하나에 특별한 제어를 할 수 있으며 CSS에서 활용할 수 있습니다. Class 하나의 HTML 문서 안에 중복해서 사용 가능합니다 Id와 차이점입니다. 하나의 태그에 여러 개의 다른 Class 이름을 공백 기준으로 나열할 수 있습니다. 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다. 다만 팀원과의 약속이나 회사에서 약속에 따라 id와 class를 같이 사용하거나 class만을 사용할 수 도 있습니다. CLASS , ID의 이름을 짓는 규칙은 없지만 변수.. 2020. 5. 6.
HTML Layout 태그 와 구조설계 레이아웃이란 배치를 뜻하는 단어이며, HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리 잡을지를 결정하는 것을 말합니다. 기본적으로 상단의 , 하단의 그리고 가 운데 본문 영역이 존재합니다. 레이아웃을 위한 태그 모든 HTML 태그는 그 의미에 맞춰서 사용합니다. header section nav footer aside html태그는 레이아웃을 할 때에도 그 의미에 맞는 것을 찾아 사용해야 검색도 잘되며, 가독성 있는 코드를 만들 수 있게 됩니다. PC 웹 사이트에서 브라우저 버전에 따른 호환성 이슈로 인해 div태그의 클래스명으로 레이아웃을 정의한다. ex) 모바일에서는 호환되는 브라우저 버전이 많기 때문에 직접적으로 Layout태그들을 사용합니다. 구조설계 웹페이지를 만드는 것.. 2020. 5. 5.
웹 서버 와 WAS 웹 브라우저를 실행한 후 주소창에 URL을 입력하면 그 주소에 해당되는 결과물이 화면에 보입니다. 웹 브라우저는 URL 주소에 해당하는 웹서버에 연결하고 해당 주소에서 볼 수 있는 내용을 읽어 들여 보여주게 됩니다. 웹 서버 소프트웨어 웹 서버는 소프트웨어를 보통 말하지만, 웹 서버 소프트웨어가 동작하는 컴퓨터를 말한다. 웹 서버의 가장 중요한 기능은 클라이언트가 요청하는 html문서나 각종 리소스를 전달하는 것입니다. 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장되어 있는 정적인 데이 터거나 동적인 결과가 될 수 있습니다. 정적인 데이터란 보통 이미지, HTML 파일, CSS파일, JavaScript파일과 같이 컴퓨터에 저장되어 있는 파일을 의미합니다. 동적인 결과란 웹 서버에 의해 실행되.. 2020. 5. 5.
Browser의 동작 웹을 통해서 전달되는 데이터는 어딘가에서는 해석되어야 합니다. 서버에서 전송한 데이터가 클라이언트에 도착해야 할 곳은 바로 browser입니다. browser는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링 엔진이 포함되어있습니다. 이런 작업의 대부분은 브라우저 내부에서 이뤄지기 때문에 자세히 알 필요는 없지만 난해 난 문제나, 최적화된 웹 개발을 위해 공부합니다. Browser components. User Interface 화면에 보이는 버튼 같은 것들 내비게이션... 등등 Browser engine html 소스코드를 실행해서 화면에 보여줄 수 있는 엔진 Rendering engine 화면에 직접 위치를 잡고 색칠을 해주는 엔진 그래서 픽셀 단위로 그려져 눈으로 볼 수 있다. Data.. 2020. 5. 5.
웹 FE 웹 BE 웹은 프런트엔드(FE)와 백엔드(BE)로 나눠집니다. 우리는 브라우저를 프론트엔드 또는 클라이언트라 하며 웹 백엔드는 서버를 말합니다. 웹 프런트 엔드 사용자에게 웹을 통해 다양한 콘텐츠(문서 , 동영상, 이미지)등을 제공합니다. 또한 사용자의 요청에 반응해서 동작한다. 역할 웹 콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다. (HTML) 적절한 배치와 일관된 디자인 등을 제공해야 합니다. (CSS) 사용자 요청을 잘 반영해야 합니다. (JavaScript) 이 세 가지가 웹 프런트의 역할 달성시켜주는 역할을 하게 됩니다. 웹 백엔드 백 엔드(Back-End)란? backend는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할을 합니다. 만약 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문.. 2020. 5. 5.
HTTP 프로토콜의 이해 사람과 사람이 대화를 하기 위해서도 몇 가지 규약이 필요합니다. 이와 마찬가지로 웹브라우저와 웹 서버 간에도 서로 통신하기 위해서는 규약이 필요합니다. 이때 사용되는 규약이 HTTP입니다. 인터넷의 이해 인터넷 기반의 대표 서비스 중 하나입니다. 물리적인 하나의 컴퓨터에는 여러 개의 서버가 동작할 수 있습니다. 각각의 서버들은 포트라는 값으로 구분되어 동작됩니다. 이름 프로토콜 포트 기능 WWW HTTP 80 웹서비스 Email SMTP/POP3/MAP 25/110/114 이메일 서비스 FTP FRP 21 파일 전송 서비스 DNS TCP/UDP 53 네임 서비스 NEWS NNTP 119 인터넷 뉴스 서비스 인터넷은 수많은 네트워크의 결합체입니다. 이러한 인터넷은 보통 TCP/IP라는 약속으로 연결되어있습.. 2020. 5. 5.
웹 프로그래밍을 위한 프로그램 언어 1. 저급 언어 저급 언어는 기계가 직접적으로 알아들을 수 있는 말로 프로그램 코드를 작성한다 라고 할 수 있습니다. 컴퓨터는 전기로 동작합니다 전기신호는 on /off 2가지 상태 값으로 동작하는데 보통 숫자로 표현하면 on 은 1, off는 0을 의미합니다. 0과 1로 표현되는 숫자를 2진수라고 우리는 말합니다. 2진수로 이뤄진 값으로 프로그래밍 언어를 기계어(Machine Language)라고 말합니다. 숫자로만 되어 있기에 유지보수 또한 굉장히 어렵습니다. 그래서 이 숫자로 된 문장과 1:1 대응하는 기호를 만들고, 그 기호로 프로그래밍을 하게 되었습니다. 하지만 기호로 작성된 프로그램은 기계가 바로 알아들 수 없기에 기호로 작성된 문장을 원래의 숫자로 변환하는 도구가 필요했습니다. 그 도구를 컴.. 2020. 5. 5.
자바기반의 웹&앱 응용 SW개발자 양성과정 50일차 -79 공개 설정 이용하기. checked라는 속성을 조건 처리해 공개된 공지사항을 표시해주기 ${n.id} ${n.title}>${n.cmtCount} ${n.writerId} ${n.hit} 사용자도 공개 설정된 공지사항만 볼 수 있도록 하기. 사용자 notice/list 쿼리문에 Pub 값이 =1 인 공지글만 보도록 쿼리문을 설정한다. String sql = "SELECT * FROM(" + " SELCT ROWNUM NUM, N.* " + " FROM (SELECT * FROM NOTICE_VIEW WHERE "+field+" LIKE ? ORDER BY REGDATE DESC) N" + ")" + "WHERE PUB = 1 AND NUM BETWEEN ? AND ? "; 공지사항 일괄 공개하기 공개하기.. 2020. 5. 5.
자바기반의 웹&앱 응용 SW개발자 양성과정 49일차 -78 파일 저장을 위한 물리 경로 얻기 파일을 file이라는 키값으로 서버에게 보냈다. request.getPart('file') 메서드를 사용 · HttpServletRequest에 getParts() 메서드를 사용하여 multipart/form-data 방식으로 가져오는 모든 데이터를 가져올 수 있다. · getPart(String partName)을 통해 필요한 내용만을 가져올 수도 있다. 스트림을 통해 전달받은 파일을 저장해야하는 경로를 절대 경로로 저장해주어야 한다. 실행 중에 동적으로 경로를 알기 위해 request.getServletContext(). getRealPath("/upload");로 사용해주면 물리 경로를 알려주게 됩니다. package com.newlec.web.controller... 2020. 5. 5.
자바기반의 웹&앱 응용 SW개발자 양성과정 49일차 -77 공지사항 자세한 페이지 추가 detail.jsp 헤더 메인메뉴 학습가이드 강좌선택 AnswerIs 강좌검색 폼 과정검색필드 과정검색 회원메뉴 HOME 회원가입 고객메뉴 ADMIN PAGE 마이페이지 관리자홈 선생님페이지 수강생페이지 알림관리 공지사항 공지사항 breadlet home 고객센터 공지사항 공지사항 내용 제목 {n.title} 작성일 ${n.regdate} 작성자 {n.writerId} 조회수 {n.hit} 첨부파일 ${fn:toUpperCase(fileName)} / {n.content} 목록 수정 삭제 다음글 다음글이 없습니다. 이전글 스프링 DI 예제 코드 주소: 서울특별시 관리자메일: admin@newlecture.com 사업자 등록번호: 111-11-11111 통신 판매업: 신고제 1.. 2020. 5. 4.

티스토리툴바