웹 사이트 만들기 코딩 가이드 - 초보자를 위한 단계별 안내서

1. HTML 기초

 

 

• HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 언어야.
• 태그는 요소의 시작과 끝을 정의하는데, 각 태그에는 고유한 기능이 있어.
• HTML 문서는 기본적으로 태그로 구성되고, 브라우저는 이 태그들을 해석하여 웹 페이지를 표시하지.
• 요소는 태그와 해당 요소의 속성으로 이루어지는데, 예를 들어 이미지를 삽입하려면 <img> 태그를 사용해.

 

 

2. CSS 스타일링

 

 

• CSS란 Cascading Style Sheets의 약자로, 웹 사이트의 디자인과 레이아웃을 담당하는 언어야.
• 선택자 (Selectors)는 CSS 규칙이 어떤 요소에 적용될지를 정하는 역할을 해.
• CSS 속성과 값은 속성 (Property)과 값 (Value) 사이에 콜론과 세미콜론을 활용해 표현돼.
• 색상 (Color)은 텍스트나 배경의 색상을 지정하는 데 사용돼. RGB, Hexadecimal, 그리고 명칭을 이용해 표현할 수 있어.
• 글꼴 (Font)을 변경하고 싶다면 font-family 속성을 활용할 수 있는데, 원하는 글꼴 이름을 적용하면 돼.

 

 

3. JavaScript 입력 양식

 

 

• 입력 양식 생성: 사용자로부터 데이터를 입력받기 위한 입력 양식을 생성합니다.
• 텍스트 필드: 단일 행 텍스트 입력을 받을 수 있는 필드를 생성합니다.
• 비밀번호 필드: 비밀번호를 입력받을 수 있는 필드를 생성합니다.
• 텍스트 영역: 여러 줄의 텍스트 입력을 받을 수 있는 영역을 생성합니다.
• 체크박스: 다중 선택을 할 수 있는 체크박스를 생성합니다.
• 라디오 버튼: 단일 선택을 할 수 있는 라디오 버튼을 생성합니다.
• 드롭다운 목록: 여러 옵션 중 하나를 선택할 수 있는 드롭다운 목록을 생성합니다.

 

 

4. 반응형 웹 디자인

 

 

• 반응형 웹 디자인이란?: 다양한 디바이스 화면 크기에 맞춰 웹사이트가 유연하게 변화하는 디자인
• 미디어쿼리(Media Queries): CSS3에서 제공하는 기능으로 화면 크기에 따라 스타일을 조절하는 기술
• 유연한 그리드 시스템: 그리드 레이아웃을 사용해 화면 크기에 따라 컨텐츠가 재배치되도록 함
• 이미지의 유동적 조절: 미디어쿼리를 활용하여 이미지 크기가 자동으로 조절되게 함
• 탄력적인 폰트 크기: 뷰포트 크기에 따라 폰트 크기가 다르게 적용되어 가독성을 향상시킴

 

 

5. 웹 호스팅 및 도메인 등록

 

 

• 웹 호스팅은 만들어놓은 웹 사이트를 올리기 위한 서버 공간을 제공하는 서비스이다.
• 도메인 등록은 사이트의 주소를 설정하기 위해 도메인 이름을 등록하는 과정이다.
• 웹 호스팅 서비스는 공유 호스팅, VPS 호스팅, 전용 서버 호스팅 등이 있다.
• 도메인 등록 시 등록 대행 업체를 통해 원하는 도메인 이름을 등록할 수 있다.
• 도메인 네임서버 설정을 통해 도메인과 호스팅 서버를 연결하여 웹 사이트를 접속할 수 있다.