HTML_개념

Notice

Recent Posts

Tags more

Archives

관리 메뉴

JAVA를 잡아라!...

Front

onivv 2023. 12. 27. 23:11

HTML, CSS, JS, Java로 웹 개발하기

HTML (HyperText Markup Language)
- 웹페이지 구조 정의: <head>, <body> 등으로 페이지 구분
- 시맨틱 태그 활용: 시각 장애인을 위한 웹 접근성 향상
CSS (Cascading Style Sheets)
- 디자인과 스타일 지정: color, font-size, margin 등으로 페이지 꾸미기
JS (JavaScript)
- 동적 페이지 제작: 사용자 상호작용, 페이지 동적 처리 등에 활용
Java를 활용한 Dynamic Web Project
- Java Resources: 백엔드 로직을 구현하는 공간 (Model, Controller 등)
- Frontend: 웹 화면을 구성하는 HTML, CSS, JS 파일
- 톰켓과 Dynamic Web Project
  - 톰캣은 Java 기반의 웹 애플리케이션을 실행할 수 있는 서버로, Dynamic Web Project에서 구현한 Java 백엔드와 Frontend 파일을 함께 호스팅하여 웹 애플리케이션을 운영할 수 있도록 지원
웹 접근성과 시맨틱 태그
- 보조기기 사용자를 위한 적절한 마크업: <header>, <nav>, <article> 등의 시맨틱 태그 활용
- 이미지에 대한 설명: alt 속성을 활용한 웹 접근성 향상

HTML 태그 분류

블록 요소
- 한 줄을 전부 차지하는 요소
- 띄어쓰기를 지원함
- 예시: <h1>, <h2>, <div> 등
- 예시: <h1>안녕</h1>
인라인 요소
- 본인에게 주어진 공간만 차지함
- 띄어쓰기를 지원하지 않음
- 예시: <span>, <a>, <img> 등
- 예시: <span> 안녕 </span> <br>

네비게이션 바와 HTML 태그

네비게이션 바: 화면에 여러 개 존재 가능
- GNB (Global Navigation Bar): 전역 네비게이션 바
- LNB (Local Navigation Bar): 지역 네비게이션 바
네비게이션 바 구성을 위한 HTML 태그
- nav, div 태그 활용
- <div class="gnb"></div> 
- <div class="lnb"></div>

입력 폼과 관련된 HTML 태그

input 태그: 사용자 입력값을 받는 태그로, 닫는 태그가 없음 (<input /> 형식)
form 태그: 사용자 입력값을 받는 영역을 정의하고, 데이터 전송 방식을 설정
- action 속성: 데이터가 전송될 URL 경로를 지정 사용자 입력값이 어디로 전송될지를 설정
- method 속성: 데이터 전송 방식 설정 (GET, POST)
  - GET: URL에 직접 값을 파라미터로 기입하여 노출. 주로 데이터 검색이나 조회에 사용. URL에 어떤 값이 전송되는지 눈에 보임.
  - POST: 보안에 좀 더 유리하며, 요청 헤더에 값을 넣어 전달. URL에 값이 노출되지 않으며, 주로 로그인이나 데이터 수정, 생성, 삭제와 같은 작업에 사용.

'Front' Related Articles