Show
개요웹(Web)을 구성하는 HTML, CSS, JS의 이해와 학습은 단순히 기술을 배우는 것으로 그치지 않고 웹과 모바일 그리고 IT 전반의 과거, 현재, 미래를 이해하는 데 많은 도움을 줍니다. HTML, CSS를 학습하기 전에 필요한 지식을 최대한 정리했습니다.
HTML, CSS 그리고 JavaScriptHTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당합니다. CSS(Cascading Style Sheets)는 마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당합니다. JS(JavaScript)는 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을
하는 프로그래밍 언어로 웹의 동적 처리를 담당합니다. 집을 지을 때 골조 전문, 미장 전문, 인테리어 전문 등 효율적인 작업을 위해 각 분야가 나뉘듯 웹 페이지를 제작할 때 각 언어의 역할을 다른 언어가 대체하지 않도록 주의해야 하며, 각 역할이 제대로 수행되도록 구조적, 기술적으로 언어(코드)를 최적화시킬 필요가 있습니다. 다음은 HTML, CSS, JS가 담당하는 역할을 시각적으로 표현한 사이트입니다. HTML-CSS-JS 웹 표준웹 표준(Web Standard)이란 ‘웹에서 사용되는 표준 기술이나 규칙’을 의미하며 W3C의 권고안에서 나온 기술들이 여기에 해당합니다.
크로스 브라우징
크로스 브라우징(Cross
Browsing)은 위에서 설명한 것처럼 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 등을 말합니다.
웹 접근성웹 접근성이란 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법을 말합니다. 웹 접근성 연구소
정보 통신 보조기기장애인의 경우 다음과 같은 정보 통신 보조기기를 통해 웹 콘텐츠에 접근할 수 있어야 합니다.
웹 접근성 품질인증 마크장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 웹 접근성 표준을 준수한 우수 사이트에 대해 품질을 인증하고 마크를 부여하는 제도로써 「국가정보화기본법」제32조의2 및 동법 시행규칙 제3조의3에 의거 과학기술정보통신부가 지정한 웹 접근성 품질인증 기관을 통해 심사 및 인증을 받을 수 있습니다.
웹 개발을 위한 에디터포토샵, 스케치3 같은 한정된 툴에 종속되는 웹앱 디자인 등과는 다르게 웹 개발은 툴에 대한 종속성이 거의 없습니다.
Sublime Texthttps://www.sublimetext.com/ 상대적으로 가볍고 성능 저하가 적은 편이라고 합니다. Atomhttps://atom.io/ 깃헙(GitHub)에서 만든 텍스트 에디터입니다. Bracketshttp://brackets.io/ 어도비(Adobe)에서 만든 텍스트 에디터입니다. VS Codehttps://code.visualstudio.com/ VS Code(VisualStudio Code)는 마이크로소프트(MS)에서 만든 텍스트 에디터입니다. WebStormhttps://www.jetbrains.com/webstorm/ JetBrain에서 만드는 통합 개발 환경(IDE) 프로그램 중 하나입니다.
VS Code 설치 및 설정저는 무료 프로그램으로 VS Code를 선택했습니다.(회사에서는
WebStorm을 사용합니다) 설치자신의 운영체제(Windows, macOS, Linux)에 맞는 Stable 버전을 설치하세요. 인터페이스확장 기능(Extensions)다른 에디터도 동일하지만 VS Code는 확장 기능을 제공하며 최초 설치한 버전에서 제공하지 않는 다양한 확장 기능을 외부에서 다운로드받아(설치) 연결 후 사용할 수 있습니다.(대부분 에디터 자체에서 확장 기능을 검색할 수 있습니다) Korean Language Pack for Visual Studio CodeVS Code의 거의 모든 메뉴가 한국어로 변경됩니다. Beautify코드 가독성을 위해 코드 작성 스타일을 (아름답게) 수정합니다.
Live Server하단 상태 바(Status bar)에서
Auto Rename Tag태그 이름을 수정할 때 열린 태그와 닫힌 태그가 쌍으로 수정됩니다. 그 외 추천다음 확장 기능들이 당장 필요하지는 않을 겁니다. Terminal GitLens 알아두면 좋은 단축키
약어로 랩핑(Wrap)
웹에서 사용하는 이미지비트맵과 벡터 이미지이미지(그래픽)는 크게 비트맵과 벡터로 구분됩니다. 비트맵(Bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부릅니다. 벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물입니다.
JPG(JPEG)JPG(Joint Photographic coding Experts Group) Full-color와 Gray-scale의 압축을 위해 만들어졌으며 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용됩니다.
PNGPNG(Portable Network Graphics)는 Gif의 대체 포맷으로 개발되었습니다.
GIFGIF(Graphics Interchange Format)는 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있습니다.
WEBPJPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷입니다.
Support Browser for Webp SVGSVG(Scalable Vector Graphics)는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷입니다.
특수 문자 용어 정리
HTML Entity List 오픈소스 라이선스
오픈소스라 하면 보통 무료 저작권이고 공짜로 사용해도 문제가 없다고 생각하지만 사실 다양한 종류의 오픈소스 라이선스가 존재하며 개인적 이용은 가능하지만, 상업적 이용에 제한이 있거나 경우에 따라 비용을 지불해야 할 수도 있습니다. 현실적으론 처음부터 끝까지 모든 코드를 직접 작성할 수 없기 때문에 많은 경우 오픈소스에 의존하게 됩니다. 개인적인 사용을 목적으로는 문제가 없겠지만, 회사에서(상업적으로) 아무 생각 없이 사용하다가는 문제가 돼서 해고당하거나 피해 보상을 해줘야 할지도 모릅니다. 수많은 라이선스를 다 공부할 필요는 없고, 보기만 해도 흐뭇해지는 라이선스를 몇 가지 소개합니다. Apache License아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스입니다. MIT License매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스입니다. BSD LicenseBSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스입니다. Beerware오픈소스 개발자에게 맥주를 사줘야 하는 라이선스입니다. 그 외 더 많은 오픈소스 라이선스에 대한 정보는 OpenSource.org에서 확인하실 수 있습니다. HTML정말 쉬운 HTML 문법기본 형태태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가집니다.
또한 태그는 열리고(open) 닫히는(close) 태그 구조를 가지고 있으며 이는 한 쌍입니다.
입문자가 주의할 점은 닫히는 태그는 태그 이름 앞에 속성(Attributes)과 값(Value)태그(요소)의 기능을 확장하기 위해 ‘속성’을 사용할 수 있습니다.
부모와 자식 요소태그A가 태그B의 콘텐츠로 사용되면, 태그B는 태그A의 부모 요소, 태그A는 태그B의 자식 요소라고 합니다.
여기서 우리가 기본적인 가계도를 통해 할아버지, 엄마, 삼촌, 형제 같은 호칭을 정의하듯(혹은 반대로 호칭을 통해 가계도를 이해하듯), HTML의 구조도 위와 같은 개념으로 호칭을 정의하여 추후 선택자(Selector)를 통해 CSS와 JS로 HTML을 다룰 때 중요하게 사용됩니다. 빈 태그HTML에는 닫히는 개념이 없는 태그들이 있습니다.
HTML5에서는 위 2가지 형태를 다 사용할 수 있는데, XHTML 버전이나 린트(Lint) 환경 혹은 프레임워크 세팅에 따라
HTML 문서의 범위
HTML(전체 범위)
HEAD(정보 범위)웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정합니다. BODY(구조 범위)웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정합니다. DOCTYPE(DTD, 버전 지정)DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의합니다. 현재의 표준 모드는 HTML5 입니다.
더 많은 문서형 정보 보기
HTML 문서의 정보
TITLE(웹 페이지의 제목)HTML 문서의 제목을 정의합니다.
META(웹 페이지의 정보)HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공합니다.
LINK(CSS 불러오기)외부 문서를 연결할 때 사용합니다.
STYLE(CSS 작성하기)CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML 문서 내부에 작성할 때 사용합니다.
SCRIPT(JS 불러오거나 작성하기)HTML
문서에서 CSS는, 작성된 CSS를
HTML 문서의 구조
DIV(막 쓰는 태그)
IMG(이미지 넣는 태그)
위 표에서 ‘(필수)’라고 되어 있는 속성들( 웹 표준 검사하기우리가 작성한 HTML 문서가 표준에 부합하는지 테스트를 해볼 수
있습니다. 위에서
또는 사이트(페이지) 주소로 검사할 수도 있습니다. HTML 예제다음 이미지는
GitHub 메인 페이지의 일부입니다.(이 예제에 사용된 이미지는 예전 메인 페이지의 모습입니다)
입문 단계에서 난이도가 올라가지 않도록(코드가 너무 길어지지 않도록) 위 화면에서 다음에 표시된 부분(Header)의 내용 일부만 구조를 정리해 봅시다. 바탕화면 같은 익숙한 곳에서
현재는 이 구조를 브라우저에 출력하면 다음과 같이 한장의 이미지와 메뉴에 있는 4개의 TEXT만 나옵니다.(HTML 화면에서 우클릭 > ‘Open with Live Server’ 선택)
미완성 같지만 HTML은 역할이 끝났습니다. CSS이보다 쉬울 수 없는 CSS 문법CSS 문법은 HTML 보다 더 쉽습니다.
선택자의 역할선택자는 HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)입니다. 위 내용을 코드로 구성하면 다음과 같습니다.
속성(Properties)과 값(Value)속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용합니다.
속성과 값은 많이 아는 것이 중요합니다.
CSS 선언 방식이제 내가 작성한 CSS 코드를 어떻게 HTML에 적용할 수 있는지 알아봅시다. 태그에 직접 작성하기(인라인)이 방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않습니다.
HTML에 포함하기(내장)CSS만 따로 작성하기 때문에 선택자가 필요합니다.
HTML 외부에서 불러오기CSS 코드를 완전히 분리할 수 있습니다.
선택자위에서
설명했듯 선택자는 HTML의 특정한 요소를 선택하는 사인(sign)입니다. 태그로 찾기선택자를 입력하는 부분에 적용하려는(찾으려는) 태그의 이름을 입력합니다.
만약 ‘제목1’과 ‘본문1’에만 색상을 추가하고 싶다면 어떻게 해야 할까요? 클래스로 찾기좀 더 명확하게 원하는 요소를 찾기 위해서 ‘클래스 선택자’라는 것이 존재합니다.
속성이제 속성을 알아봅시다. 크기width(가로 너비)요소의 가로 너비를 지정합니다.
height(세로 너비)요소의 세로 너비를 지정합니다.
font-size(글자 크기)요소 내용(Text)의 글자 크기를 지정합니다.
여백margin(요소의 바깥 여백)요소의 바깥 여백을 지정합니다.
위 코드는
padding(요소의 내부 여백)요소의 내부 여백을 지정합니다.
색상color(글자 색상)요소 내용(Text)의 글자 색상을 지정합니다.
background(요소 색상)요소의 배경 색상을 지정합니다.
CSS 예제HTML 끝으로 작성했던 예제에 이어서 CSS를
적용해 봅시다. 다음은 이 예제의 디렉터리와 파일 구조입니다.
(아직 CSS 내용은 작성하지 않았지만) 생성한
연결이 되었으니 CSS를 다음과 같이 작성합니다.
큰 단위의 요소( 이 부분이
중요한데,
다음과 같은 결과가 나와야 합니다. 앞으로..작성하다
보니 입문자들의 이해를 돕기 위해 생략하거나 의역한 부분이 많습니다. 자, 그러면 입문은 끝났고 앞으로는 어떻게 학습해야 하는지 간단히 정리하겠습니다. 원하는(학습하고자 하는) HTML, CSS, JavaScript(ECMAScript, ES)의 내용을 검색할 때는 또는 W3Schools 웹사이트도 추천합니다. MDN과 다르게 영리 목적(배너 광고 등)의 사이트이지만 입문자가 접하기에 좋게 잘 구성되어 있습니다. 단, 정보의 신뢰도는 MDN보다 떨어집니다. 추가로 매우 주관적인 빠른 학습에 대해 말씀드리면, HTML에는 태그 종류가 상당히 많습니다. CSS는 웹앱 디자이너, 퍼블리셔 그리고 프론트엔드 개발자에게 매우
중요합니다. JavaScript는 학습 범위가 아주 넓습니다. 끝까지 읽어주셔서 감사드리고 이 포스트가 많은 입문자에게 도움이 되길 희망합니다. 패스트캠퍼스 온라인 강의[FO]패스트캠퍼스 온라인 강의 자료들이 파편화되어 정리합니다. [FO] HTML/CSS 입문입문자에게 추천하는 HTML, CSS 첫걸음 [FO] HTML한눈에 보는 HTML 요소(Elements & Attributes) 총정리 [FO] CSSCSS 개요 [FO] SCSSSass(SCSS) 완전 정복! [FO] 마크다운(Markdown)MarkDown 사용법 총정리 [FO] VueJSVue Todo App 예제 참고자료https://namu.wiki/w/%EC%98%A4%ED%94%88%20%EC%86%8C%EC%8A%A4 |