HTML 핵심 명령어 및 유틸리티 모음

우리가 PC, 모바일 화면에서 자주 만날 수 있는 다양한 홈페이지를 만들기 위한 첫 번째 과정으로 웹 환경 제작에 있어 뼈대가 되는 HTML코드에 대한 강의 목록을 담고 있습니다. 미적으로 훌륭하게 만드는 작업 전에 초기환경을 세팅하는 내용이 주로 담겼으며 정보 저장과 필수적인 유틸리티에 대한 연결을 시작으로 코드를 사용하는 기초적인 방법부터 반응형 홈페이지를 만들기 위해 (하나의 홈페이지 제작으로 여러 해상도에서 보일 때) 대응해야 하는 레이아웃의 방법까지를 담았습니다.

	DOCTYPE, META TAG (홈페이지 정보 담기) 홈페이지 제작 을 위해서는 홈페이지의 정보를 담고있는 DOCTYPE(독타입)과 홈페이지의 성격을 담고있는 META TAG(메타태그)를 선언해 주는것 으로 제작이 시작됩니다.
	LINK script,css연결 (홈페이지를 사용할 수 있는 명령어를 담은 장치들을 장착하기) 1. 홈페이지를 이쁘고 가독성 좋게 만들어주는 인테리어 타입의 CSS연결 2. 홈페이지의 동작과 기능을 구성하여 정지된 홈페이지를 움직여주는 기능 타입의 SCRIPT  홈페이지를 만드는데 필수적인 연결장치들을 알아봅니다.
	Element , TAG (홈페이지에 사용되는 코드를 사용하는 법) 1. 홈페이지에 들어갈 정보들의 요소와 속성들을 입력해 주는 과정과 2. 컴퓨터 및 서버가 홈페이지 구성을 이해하고 적용 할 수 있도록 각종 언어로 입력하는 모든 행동의 기초작업에 대해 알아봅니다.
	img, a, figure (각각의 코드에 속성을 사용하는 법) 웹접근성을 높이기 위한 속성값을 세팅하는 방법의 기본 사항들의 기초사항들을 알아봅니다.
	이미지 사이 공백 붙이기 html 상에서 이미지를 넣을 때 벌어지는 공백 없이 배치하는 방법에 대해 알아봅니다.
	절대경로와 상대경로 퍼블리싱 소스코드를 제작 할 때 경로를 필수로 지정해야 하는데 속성값을 지정하는 두 가지 방법에 대해서 알아봅니다.
	반응형 홈페이지 제작의 기초 1단계 (반응형 홈페이지란?) 홈페이지는 PC와 모바일에서 각각 잘보이도록 뷰포트 (viewfort) 레이아웃 영역을 잡아야하는데 이에 대한 설명입니다.
	반응형 홈페이지 제작 2단계 (영역과 레이아웃잡기) block, inline / flexbox / class, id / iframe 반응형 홈페이지를 잡기위한 영역을 잡을 때 필요한 다양한 레이아웃 잡는 방법을 설명합니다.
	반응형 홈페이지 제작 3단계 (표 만들기) table,tr,td / colspan / rowspan 홈페이지에서 기존에 가지고 있는 정보들을 차례대로 보기 쉽게 도표의 형태로 만드는 표 만드는 법을 설명합니다.
	반응형 홈페이지 제작 4단계 (폼 만들기) form / fieldset / input 주문서나 회원가입등 정보를 입력하기 위한 폼양식을 제작하는 방법을 설명합니다.
	홈페이지 폰트 변경하기 b,strong / i,em / mark,small / del / &nbsp , &ensp 폰트에 자체적으로 변경할 수 있는 코드 언어를 알아봅니다.
	웹 상에서 리스트 표현하기 ul,li,ol,dt,dd,dl 순서의 목록을 따로 표기하는 코드 언어를 알아봅니다.

 

---

 

2. HTML 유틸모음

html의 구조를 짜는 데 있어 시간을 절약해 주고 좀 더 효율적으로 홈페이지나 웹환경을 만들 수 있도록 도와주는 도구들입니다.

 

■ https와 SSL 인증서 설치하는 방법

▲ 인증서가 적용된 보안 연결 페이지의 모습

 

▲ 인증서가 적용되지 않은 연결 페이지

홈페이지를 만들 때 회원정보가 필요 없는 소개 용도의 프로모션 홈페이지가 아닌 커뮤니티나 회원정보를 입력해야 하는 홈페이지에서, 가입을 할 때 방문자가 적는 개인의 정보들을 암호화 보안코드로 바꾸거나, 나타내는 화면을 보안 화면으로 입력하게 끔 만들어 중간에서 회원정보를 그대로 가로챌 수 없게 만드는 방식을 적용해야 합니다. 그에 따른 포스팅 내용입니다. ​

https와 SSL 인증서 설치하는 방법

 

 

 

 

■ Code Pen : 웹개발자와 퍼블리셔의 포스팅을 위한 스크립터

간편한 옵션 설정만으로도 복사해서 어느 곳이나 게시가 가능한 컬러 스크립터입니다. 백엔드의 C언어부터 프런트개발의 html코드까지 모두 지원하며, 기록한 형태를 그대로 어느 곳이든 공유할 수 있는 편리한 시스템입니다. ​ 웹개발은 물론 PC버전으로 다운로드하여 쓸 수 있는 프로그램까지 지원하고 있으며, 배경컬러부터 자간의 높이, 폰트 크기등 세밀한 설정은 물론 언어에 따른 코드 색상을 개발환경과 동일하게 만들어 사용할 수 있어 심플하고 간단하지만 필요한 기능만 꾹꾹 눌러 담았습니다. 확장언어팩을 통해 필요한 패키지나 스타일 또한 추가해서 사용할 수 있습니다. :-)

Color Scripter

 

 

 

반응형

 

 

■ 기타 참고 유틸들

	[html 튜토리얼] html5 웹표준의 강의를 번역해 html 강좌 포스팅에 담아놓은 내용의 원본이 있는 곳. 더 다양한 html 구조 정보들을 확인 및 테스트 해볼 수 있다.
	[부트스트랩 Bootstrap] 연결 한 번만으로 기본적인 레이아웃과 그리드 세팅을 도와주는 강력한 확장형 도구인 부트스트랩은 패키지 관리자를 통해 설치하거나 CDN방식으로 연결만 진행해도 간편하게 이용이 가능합니다. 최신 버전은 항상 최신개발툴을 적용하기 때문에 오류가 있을 수 있어 다운된 버전을 이용하는걸 추천드립니다.
	[부트스트랩 한국버전 Bootstrap] 부트스트랩을 한국말 가이드로 옮겨서 작업하기에 편리한 한국버전은 v3.3.2을 기반으로 두고 있으며,레이아웃 및 그리드 개념은 동일하게 탑재되어 있기 때문에 안정성을 추구하기도 적합합니다. 작업시에 기본적인 틀만 필요한 분에게 적합합니다.
	[부트스트랩으로 레이아웃짜기] 부트스트랩을 설치해 운영하기 전 레이아웃을 짜볼 수 있는 사이트로 버전은 v4에 두고 있습니다. 레이아웃을 짠 그대로 코드를 내려받을 수 있어 유용합니다.
	[유튜브 사이즈 크기 조절 세팅] 홈페이지를 제작할 때나 포스팅을 할 때 반응형으로 제작되어 있지 않은 지도나 유튜브,비메오등의 동영상 플레이어들은 아이프레임화로 사이즈가 고정되어 있어 크기를 줄이거나 늘릴때 이미지나 동영상이 잘려 나옵니다. 이에 대응 할 수 있는 방법은 크기를 %로 바꿔 css표기하는 방법인데, 지도의 경우는 클래스를 지정해 홈페이지에서 따로 표기를 하는 번거로움 등을 예로 들 수 있고, 적용도 힘들다는 단점이 있습니다. ​ 이를 보완해줄 수 있는 사이트입니다.
	[코드하우스] 컴포넌트 형태로 제공되는 웹사이트에서 자주 사용하는 타입의 구조를 바로 카피해서 사용할 수 있는 사이트
	[웹사이트 디자인 지원 소프트웨어] 설치형 셋업파일로 다양한 템플릿을 지원해 레이아웃을 꾸며볼 수 있는 사이트 코드까지 확인 할 수 있어 도움이 된다.
	[ 즐겨찾기 아이콘 만들기] 홈페이지에 사용되는 즐겨찾기 아이콘을 만드는 도구로 16x16px의 이미지를 등록시에 파비콘(ico)라는 확장자의 이미지로 내려받게 해줍니다. 이 아이콘을 사용해 헤더에 정보를 입력하면 즐겨찾기 이미지가 등록됩니다.
	[개인정보처리방침 만들기] 회원정보를 수집하는 사이트의 경우 개인정보 처리에 대한 고지를 하도록 법으로 명시되어 있습니다.대부분 하단 푸터(footer)에 위치하는 경우가 많은데 어렵고 힘든 개인정보의 표준 버전을 내려받고 작성 할 수 있도록 대표되는 각 업종에 대해 제공합니다.
	[SnapWidget] 웹사이트와 웹페이지에 페이스북이나 인스타그램의 피드를 달고 싶으신가요?? 위젯을 달 수 있게 도와주는 사이트입니다. 다양한 크기와 세팅을 지원하기 때문에 설치도 유용합니다.