Chapter 01-03
server & client
server
인터넷에 연결된 컴퓨터
웹사이트에 접속하면 보이는 웹 요소와 다양한 정보 저장
client
웹 사이트에 접근하려고 사용하는 pc나 태블릿pc, 스마트폰 등
좁은 의미로 웹브라우저
웹 동작 방식
사용자가 웹 브라우저에 정보 입력 / 링크 클릭시 웹 사이트는 서버에서 정보를 가져와 보여줌
정보 검색 처리 - 서버
입출력 처리 결과 제공 - 클라이언트
front-end & back-end 개발
front-end
사용자 앞에 보이는 영역 / 웹 브라우저 화면에 보이는 것
웹 디자인 / 사용자 동작에 반응하는 기능 개발
다양한 웹 브라우저 종류와 버전에 따라 작동할 수 있게 만드는 것이 중요
HTML, CSS, JavaScript
Back-end
보이지 않는 영역
데이터 베이스 설계 / 데이터 처리
Java, PHP, Python
front-end 개발의 중요성
시간이 자날 수록 기술과 서비스는 인터넷 기반으로 발전할 것임.
요구되는 기술
기본 중의 기본 : HTML, CSS, JavaScript
html
제목, 본문, 이미지, 표와 같은 웹 요소 알려주는 역할
웹 브라우저에 보이고 싶은 내용이 있다면 HTML에 맞는 표기법을 사용해야 함
CSS
HMTL로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용
CSS를 이용하여 웹 요소를 적적히 배치하고 필요한 곳을 강조
JS
동적인 효과를 사용하려면 JavaScript 필요
이후 프레임워크를 배우기가 훨씬 쉬워짐
💡 framework : 프로그램을 만들 때 여러 기능을 쉽게 구현하도록 도와주는 도구
front-end
웹 브라우저에서 표현할 수 있는 기술이 많아짐 (웹 사이트가 아닌 애플리케이션처럼 동작하며 보여주기도)
→ JavaScript로 구현해야할 기술의 증가
⇒ 미리 만들어진 자바스크립트의 라이브러리와 프레임워크 알아두면 좋음
back-end
서버의 동작 개발
개발 분야가 다양
데이터 베이스 기본 개념 알아야함
백엔드 개발 언어와 환경 프레임워크를 선택하여 공부할 것.
서버 운영체제에 따라 사용하는 언어 / 프레임워크 달라짐
HTML?
다양한 인터넷 정보를 웹 브라우저에 보여줄 때 사용하는 언어
웹 문서를 만드는 언어
HyperText Markup Language ⇒ 서로 연결한다는 의미 포함
웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것
웹 편집기에서 마크업 형식으로 표를 작성해야 함 ⇒ 웹 브라우저는 각각 제목 / 텍스트 / 표로 인식해서 나타냄
태그 : 웹 브라우저가 구별할 수 있도록 붙인 꼬리표
기본 기능 : 웹 브라우저에 보여줄 내용에 마크업하고 문서끼리 링크하는 것
HTML 문서의 기본 구조
웹 문서는 보통 <!DOCTYPE html>로 시작, <html>, <head>, <body>로 구성
<!DOCTYPE html>
문서 유형 지정
<html>
<!DOCTYPE html> 선언 후 HTML 파일의 시작과 끝을 표시
<html> 태그는 웹 문서의 시작, </html> 태그는 웹 문서가 끝났음을 의미
<html> </html> 태그 사이에 소스 작성
</html> 태그 뒤에는 아무 내용도 없어야 함
<head>
대부분은 웹 브라우저 화면에서 보이지 않음
<meta>
웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 저장할 때 사용
ex. <meta name=”keywords” content=”html의 구조">
ex. <meta charset=”UTF-8”>
<title>
<title>과 </title> 사이에 웹 문서의 제목 입력
<body>
<body>와 </body> 사이에 실제 웹 브라우저에 표시할 내용 입력
Semantic tag
ex. <p>, <a>
웹 사이트의 디자인은 서로 달라보여도 구조는 비슷함
따라서 그런 구조를 바탕으로 태그 이름만 봐도 어떤 역할을 하는지 실제 알 수 있는 문서 구조 태그를 추가 할 수 있음 ⇒ 시맨틱 태그
<header>, <main>, <footer>
Semantic tag가 필요한 이유
웹 브라우저가 HTML의 소스코드만 보고도 어느 부분이 제목이고, 본문인지 실제 알 수 있게 됨
보조기기에서 사이트의 구조를 제대로 이해할 수 있게 됨
⇒ 사용자에게 더 정확한 내용을 전달 할 수 있음
다양한 화면에서 웹 문서를 표현하기가 쉬워짐
웹 사이트를 검색할 때 필요한 내용 정확히 찾을 수 있게 됨
구조를 만드는 주요 Semantic tag
<header>
헤더 영역
사이트 전체의 헤더 뿐만 아니라 특정 영역의 헤더도 존재
<nav>
웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크 생성
위치에 영향 x
id 속성 지정 시 내비게이션마다 다른 스타일 적용 가능
<main>
메인 콘텐츠 담김, 웹 문서에서 핵심이 되는 내용
웹 문서마다 다르게 보여주는 내용으로 구성
웹 문서에서 한 번만 사용 가능
<article>
웹에서 실제로 보여주고 싶은 내용
문서 안에는 <article> 태그 여러 개 사용 가능
<section> 태그 넣을 수 있음
문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
<section>
웹 문서에서 콘텐츠 영역
논리적으로 관계 있는 문서 혹은 요소를 분리 할 때 사용한다.
기본적인 의미를 생각 한다면
<section>안에<article>이 여러 개 들어가는 것은 조금 부자연스러울 수 있다. 왜냐하면 서로 관련 있는 내용을 모아 놓아야 할<section>안에 각각이 독립된<article>이 들어가 서로 다른 내용의 독립<article>이 배치되기 때문이다.따라서
<article>안에<section>이 들어가는 것이 자연스럽다.
<aside>
본문 내용 외, 왼쪽, 오른쪽, 아래에 사이드 바를 만듦
필요한 경우에만 사용
<footer>
웹 문서에서 최하단에 있는 푸터영역 생성
사이트 제작 정보, 저작권 정보, 연락처 등 포함
다른 시멘틱 태그 모두 사용 가능
<div>
id나 class 속성 사용해서 문서 구조 생성이나 스타일 적용할 때 사용
영역 구별이나 스타일로 문서 꾸밈
Last updated