728x90 Web15 [JSP] JSP란 JSP란? JSP는 Java Server Page 의 줄임말로, 동적 웹페이지를 개발하기 위한 웹 프로그래밍 기술이다. 이름에서 알 수 있듯이 JAVA를 사용하여 Server 측에서 Web Page를 동적으로 생성하여 웹 브라우저로 전송해준다. 또한, JSP 는 기업용 자바 기술의 집합체인 Java EE(Java Platform Enterprise Edition)의 핵심 요소로, 정부나 공기업 주도의 사업 등 대규모 기업용 시스템 구축에 주로 사용된다. 정적 VS 동적 웹 페이지 JSP는 동적 웹 페이지를 생성하기 위한 기술이다. 그렇기 때문에 JSP를 더 잘 이해하기 위해서는 정적 웹페이지와 동적 웹페이지의 차이를 알아야 한다. 정적 웹페이지 동적 웹페이지 웹 서버에 저장되어 있는 파일 그대로 웹 브라.. 2024. 1. 16. [HTML] Semantic Tag 시맨틱 태그 (Semantic Tag) 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사이다. 즉, 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하면 이해가 편하다. 예를 들어, 태그는 와 동작은 똑같이 하지만, header 부분에서 사용되며 이 영역은 상단 영역이라는 것을 나타낸다.이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되는 것이다. 시맨틱 태그를 사용 이유 시맨틱 태그는 사용하지 않더라도 div 태그를 활용하여 웹 문서를 똑같이 만들 수 있다. 그렇다면 왜 시맨틱 태그를 사용해야 할까? 그 이유로는 아래의 3가지가 있다. HTML 문서의 가독성과 유지보수가 쉬워진다. 예를 들어, 모든 .. 2023. 10. 30. [HTML] Form Form HTML은 웹 서버로 데이터를 보내기 위한 태그로 form 태그를 지원하고 있다. 사용자의 정보 또는 필요한 정보를 입력 받아 form 태그를 통해 웹 서버에 보내고, 전송 받은 데이터를 웹 서버가 처리하고, 결과로 또 다른 웹 페이지를 보여주게 되는 것이다. 이번 포스팅에서는 form 태그를 어떻게 사용하는 지에 대해서 알아보겠다. Form 태그 속성 폼 태그는 데이터를 전송하기 위한 태그이기 때문에 그와 관련된 여러가지 속성을 가지고 있다. 속성 설명 action 폼을 전송할 서버 또는 페이지 url name 폼을 식별하기 위한 이름을 지정 accept-charset 폼 전송에 사용할 문자 인코딩을 지정 target action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 .. 2023. 10. 30. [HTML] display display 모든 html의 요소들은 display 스타일 속성을 가진다. display의 속성이 어떻게 되냐에 따라 스타일의 적용이 다르기 때문에 사용하는 html 요소의 display 속성은 어떤지에 대해서 알아야 하고, display속성이 바뀌었을 때의 변화도 알아야 한다. html에서 display 스타일 속성값으로 다음의 4가지가 있다. block inline inline-block none 속성값들이 각자 어떤 특징을 지니고 있는지 알아보도록 하겠다. display : block block 속성은 다음과 같은 특징을 지니고 있다. block 속성의 element는 항상 새 라인에서 시작한다. block 속성은 가용한 좌우푝을 모두 차지한다. css 스타일의 width, height 속성이 적.. 2023. 10. 29. [HTML] list list HTML에서 목록을 만들기 위한 태그를 지원하고 있고 많이 사용되는 태크들 중 하나이다. 응용하기에 따라 다양한 여러 목록을 만들 수도 있고 메뉴를 만드는 데에도 많이 사용되기 때문에 웹사이트를 방문하여 관리자 도구로 탐색하다 보면 곳곳에서 다양한 방식으로 사용되는 것을 볼 수 있다. 위의 사진도 네이버 홈페이지의 쇼핑란에 상품을 나열해 놓은 것으로 목록 태그를 이용하여 구현해 놓았다. 리스트 만들기 리스트를 만들기 위한 태그로는 아래와 같이 여러 구성 요소를 이루는 태그들이 있다. 태그 설명 ul - unordered list list를 생성하기 위한 태그( 2023. 10. 29. [HTML] Table Table table은 html에서 표를 만들 수 있는 태그로 많이 사용되는 태그 중 하나이다. 표를 만드는 태그이지만 결국에는 공간을 분리를 하는 개념이기 때문에 테이블 태그를 응용하여 갤러리도 만드는 등 여러가지 응용이 가능한 태그이다. 위의 캘린더도 테이블을 통해 구현된 캘린더이다. Table 만들기 테이블 태그는 아래와 같이 구성 요소를 이루는 태그를 가지고 있다. 태그 설명 테이블을 만드는 태그 테이블의 헤더 부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 테이블을 만드는 순서 또한 중요하다. 먼저 table 태그를 통해 테이블을 선언을 해준 뒤 행을 만드는 tr 태그를 사용해주어야 그 안에 열을 만드는 태그인 td 태그를 사용할 수 있다. th 태그 같은 경우 tabl.. 2023. 10. 28. [HTML] Tag - Image 이미지 태그란 이미지 태그는 HTML에서 이미지를 불러오기 위해 사용하는 태그이다. 이미지 태그를 이용하면 아래의 네이버의 웹페이지처럼 웹 페이지의 로고, 검색버튼 이미지, 메일 이미지 등을 구현할 수 있다. 의 속성 이미지 tag는 empty tag이기 때문에 여느 태그만 사용하여 생성한다. 이미지 태그는 여러 속성을 가지고 있다. src 속성 src 속성은 img 태그에서 필수로 입력해야 하는 속성이다. HTML에서 이미지는 모두 외부에서 가지고 오는 것이기 때문에 "어디"에서 가지고 오는지를 이미지 태그의 src 속성에 명시해주어야 한다. 이미지의 경로는 해당 파일이 저장되어 있는 로컬 저장소 일 수도 있고, 웹 주소일 수 도 있다. 주로 사용되는 이미지 포맷은 크게 3가지로 다음과 같다. .jpg.. 2023. 10. 20. [HTML] Tag - DIV&SPAN DIV & SPAN div와 span 태그는 HTML에서 정말 많이 사용되는 중요한 태그이다. 두 태그의 공통점은 다른 요소들을 담는 용도(Container)로서 주로 사용된다는 것이다. 이를 통해 div와 span 태그를 이용하여 화면 레이아웃 상의 구역을 나누는 용도로 사용되는 것이다. HTML은 웹사이트의 구조를 설계하는 언어이기 때문에 이러한 div, span 태그가 얼마나 중요한지를 알 수 있다. 그렇다면 div와 span 태그의 차이점은 무엇일까? 두 태그의 결정적 차이점은 div는 sytile property의 display가 block이고 span은 inline이라는 것이다. 간단하게 말하면, div는 태그가 끝맺을 때, 줄바꿈을 한다는 것이고 span은 줄바꿈하지 않고 이어나간다. 또 다.. 2023. 10. 20. [HTML] Style 속성 스타일(style) 속성 스타일 속성은 해당 태그에 여러 외적인 요소를 입혀주는 속성이다. 스타일 속성에서 쓰는 구문은 CSS(Cascading Style Sheet) 구문이고 CSS 파일은 .css 확장자를 가진다. CSS 구문은 property와 그에 해당하는 값으로 구성되어 있고, 한 쌍(property : value)이 끝날 때마다 세미콜론을 통해 끝났음을 알려야 한다. p { /* property : value ; */ color : red; background : blue; font-size : 15px; } 스타일은 어디에서 선언해주냐에 따라 총 3가지 방식으로 구분된다. Inline style sheet inline style sheet은 이름 그대로 태그 안에 스타일 속성을 지정해주는 방.. 2023. 10. 20. [HTML] 속성(Attribute) 속성 (Attribute) HTML에서 같은 tag라도 다른 동작을 할 수 있도록 속성을 지정해 줄 수 있다. 예를 들어 아래와 같이, h1 태그 2개가 선언되어 있다고 해보자. 초록색 글씨 빨간색 글씨 이 때에, h1 태그의 글자색을 파란색으로 바꾼다 하였을 때 head의 style 태그를 통해 값을 변경해 줄 수 있다. 초록색 글씨 빨간색 글씨 아래와 같이 h1 태그 모두 파란색 글씨로 바뀐다. 하지만, 위의 h1태그는 초록색, 아래 h1 태그를 빨간색 글씨로 바꾸고 싶다면 어떻게 해야 할까? 위의 예시에서는 모든 h1 태그가 똑같은 h1 태그로 취급한다. 하지만 각각의 h1 태그의 속성을 부여한다면 서로 다른 h1 태그로서 지정해 줄 수 있다!! 속성을 부여하여 코드를 다음과 같이 변경하였을 때, .. 2023. 10. 19. [HTML] HTML 문서 정보 태그 HTML 문서 정보 HTML문서는 웹 문서 자체의 정보와 브라우저에게 알려주어야 하는 정보 등 여러 가지 정보를 가지고 있어야 한다. 이러한 정보는 head 태그 안에 명시되어 사용자에게는 보여지지 않는다. Title 태그 타이틀 태그는 웹 페이지의 제목을 명시하여 주는 Tag이다. 타이틀 태그는 다른 태그와는 다르게 사용자가 웹 페이지를 통해 확인 할 수 있는 태그이다. 제목 태그 타이틀은 아래 그림에서 보이는 것처럼 브라우저의 TAB 부분에서 확인할 수 있다. Meta 태그 : 메타 태그는 Empty Tag 로서, 웹페이지에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공하는 태그이다. Link 태그 : 외부 문서를 연결할 때 사용하는 태그이다. Style .. 2023. 10. 19. [HTML] TAG - Heading Heading Tag 책을 보면 큰 제목(ex. Chapter1)가 있고 소제목(ex. Chapter1-1)이 있듯이 웹문서에서도 이러한 제목을 태그를 통해 나타낼 수 있다. 바로 h 태그( : heading, headline)를 통해서 나타낼 수 있고, h 태그는 크기에 따라 1 ~ 6까지의 숫자가 붙는다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 아래와 같이 사이즈에 따라 다른 크기로 나온 것을 확인할 수 있다. SEO heading 태그는 웹 문서 검색시 SEO 와도 중요한 관련이 있는 태그이다. SEO(Search Engine Optiomization)이란 검색 엔진 최적화로서, SEO 점수가 놓으면 웹 문서가 검색엔진에 의해 더 .. 2023. 10. 19. 이전 1 2 다음 728x90 반응형