Web
인터넷 공간에서 제공하는 서비스 및 애플리케이션을 말한다.
웹 개발 시 고려할 사항과 예시
- 웹 표준: HTML5, CSS3, ES6 기준으로 개발
- 웹 접근성: 다양한 사용자(장애인, 고령자 등)도 쉽게 이용할 수 있도록 보장
- ex) 청각 장애인을 위한 자막, 스크린 리더 지원 등 - 웹 호환성: 다양한 환경에서 정상적으로 동작하도록 고려
- ex) 크로스 브라우저(Chrome, Edge, FireFox), 크로스 플랫폼(PC, 모바일), 반응형 디자인 적용
-> 공공기관 홈페이지의 경우 웹 표준과 웹 접근성, 웹 호환성이 철저하게 지켜지는 대표적인 사례이다.
웹 개발 언어
클라이언트 언어
브라우저에서 실행되는 언어를 의미한다.
- HTML(HyperText Markup Language): 구조
- CSS(Cascading Style Sheets): 표현
- Javascript: 동작(사용자 반응 처리)
서버 언어
서버에서 실행되며, 클라이언트의 요청을 처리하는 역할을 한다.
프론트엔드
클라이언트 언어를 포함하는 더 넓은 개념으로, UI 개발을 위한 프레임워크와 라이브러리까지 포함한다.
- Vue.js, React 등
백엔드
서버에서 클라이언트 요청을 처리하고 데이터 관리를 담당하는 영역이다.
- Java + Spring Boot, Python + Django 등
HTML5(HyperText Markup Language)
웹 페이지의 구조를 정의하는 마크업 언어이다. HTML5은 기존 HTML보다 멀티미디어와 그래픽을 강화하여 별도의 플러그인 없이도 웹 페이지에서 오디오, 비디오, 그래픽 등을 직접 활용할 수 있도록 설계되었다.
시맨틱 웹(Semantic Web)
컴퓨터가 웹 페이지의 내용을 더 쉽게 이해할 수 있도록 의미(semantic)를 부여한 웹 기술이다.
단순한 HTML 구조가 아니라, 콘텐츠의 의미를 강조하는 것이 핵심이다.
검색 엔진이 페이지의 의미를 더 잘 파악할 수 있어 검색 엔진 최적화(SEO)에 도움을 주며, 스크린 리더 등 보조기기에서 더 정확하게 인식되어 웹 접근성을 높여준다.
시맨틱 태그(Semantic Tag)
의미가 있는 HTML 태그로, 기존의 <div> 같은 단순한 태그 대신 내용의 목적을 명확하게 나타내는 태그를 사용한다. 코드 가독성을 향상할 수 있다.
HTML의 구성 요소
1. 태그(Tag)
HTML에서 특정한 역할을 하는 기본 구성 요소이다. 여는 태그와 닫는 태그로 구성된다.
2. 요소(Element)
태그 + 내용 + 속성을 포함하는 HTML의 최소 단위이다.
태그와 요소는 다른 개념이지만, 태그가 요소의 핵심 구성 요소이기 때문에 혼용해서 쓰이는 경우가 많다.
요소의 종류
-
블록 요소(Block Element)
항상 새로운 줄에서 시작하며, 전체 너비를 차지하는 특성이 있다. 주로 페이지 레이아웃을 구성하는 데 사용된다. -
인라인 요소(Inline Element)
줄 바꿈 없이 같은 줄에 표시된다. 일반적으로 텍스트 스타일링과 관련이 있다.
그 외에도 폼 처리나 메타데이터, 스크립트 등을 다루는 기타 특수 요소들이 존재한다.
3. 속성(Attribute)
태그에 추가적인 정보는 제공하는 부분이다. 여는 태그 안에 arrtibute_name="value" 형태로 작성한다.
