2025/02/24 4

[쉽게 배우는 H.C.J] Chapter 3 - HTML 문서 구조 및 주요 태그

1. HTML5 문서 구조■ 시맨틱 태그(sementic tag) : 의미적 태그. 태그명이 표현하는 데이터를 설명※ 페이지 기술 방식 변화□ HTML  : 문서를 좀 더 구조적으로 표현하기 위해 태그로 문서 구조의 각 영역을 구분하였다. 헤더/내용/푸터로 구분하여 가독성을 높이고, 각각 id 속성을 통해 영역을 구분한다.□ CSS : 문서를 표현하는 곳. HTML 태그로 이루어진 웹 페이지에 디자인을 입혀 표현□ JS : 웹 페이지에 필요한 작업 처리나 서버에 웹 페이지 요청을 담당.※ HTML5에 추가된 새로운 태그1) 시맨틱/구조적 태그1. 태그사이트의 소개나 내비게이션 등을 표시2. 태그사이트의 내비게이션(메뉴) 항목을 표시. 주로 에 넣어 표시3. 태그문서의 내용(글)을 표시하는 태그. ..

IT/Frontend 2025.02.24

[쉽게 배우는 H.C.J] Chapter 3 - HTML 개요 및 기본 태그

1. HTML 개요HTML이란?마크업 언어로, 웹 문서를 작성하며 태그를 사용해서 문서의 구조 등을 기술하는 언어.■ 각각의 HTML 태그는 문서 내에서 다른 내용을 기술한다.■ 보통 HTML 태그는 시작 태그와 종료 태그로 둘러싸여 표현되며, 과 같은 단독 태그도 존재한다.■ HTML 문서는 웹 브라우저에서 실행한다. ■ 어느 태그에나 넣을 수 있는 글로벌 속성 종류1. class태그에 적용할 스타일의 이름 지정2. dir내용의 텍스트 방향 지정.3. id태그에 유일한 ID를 부여함. 자바스크립트 제어에서 주로 사용4. style 인라인 스타일 시트를 적용하기 위해 사용ex. 하하하2. HTML 기본 태그-1) 태그 : html 문서에 대한 정보를 써 놓은 곳. 메타 데이터에 해당한다.■ , , , ..

IT/Frontend 2025.02.24

[쉽게 배우는 H.C.J] Chapter 2 - Section 02 클라우드 기반 코드 학습 및 테스트 사이트를 사용한 웹 프로그래밍

■ 이클립스 기반에서 웹 사이트를 구축하려면 자바, 톰캣, 이클립스 순으로 설치할 프로그램이 너무 많아 세팅이 힘들다.>> 클라우드 기반의 코드 학습 및 사이트를 제공하는 사이트를 이용해서 학습할 수도 있음. 1. w3schools.com■ 온라인 웹 프로그래밍 학습 사이트. 여러가지 기능을 제공■ 해당 사이트에서 작성한 코드는 직접 다운로드 불가능하며, 소스코드를 복사해서 다른 툴에서 사용 가능 2. jsbin.com■ 클라이언트 사이드 웹 프로그래밍 코딩 기능 제공.■ 개발 툴 사용이 번거로울 경우 사용■ 코딩과 동시에 결과가 바로 표시되는 구조. 코드를 다운로드 받을 수 있고 라이브러리 추가도 쉽다.

IT/Frontend 2025.02.24

[쉽게 배우는 H.C.J] Chapter 2 - Section 01 자바, 톰캣, 이클립스 기반의 웹 개발 환경

[개발 환경 작성 순서]1. JDK 다운로드, 설치 및 환경 변수 설정JDK : 자바 개발 킷. 자바 기반의 프로젝트 작성 및 이클립스 사용에 필요2. 톰캣 다운로드, 설치 및 환경 변수 설정톰캣 : 웹 컨테이너. [웹 서버 + 웹 어플리케이션 서버(WAS) + 웹 컨테이너]의 기능 포함3. 이클립스 다운로드, 설치 및 실행이클립스 : IDE4. 이클립스에서 웹 애플리케이션 작성웹 애플리케이션 : 웹 기반에서 작동하는 웹 앱 및 모바일 웹 앱 1. JDK 다운로드, 설치 및 환경 변수 설정■ JDK : 자바 기반에서 작성되는 프로그래밍을 실행할 수 있는 환경으로 만들어주는 개발환경 도구■ 오라클 사이트에서 다운로드. ■ 자바 컴파일 명령어(javac)와 실행 명령(java)의 위치를 컴퓨터에게 인식시켜 ..

IT/Frontend 2025.02.24