티스토리 뷰
HTML의 개요와 기본 개념
🌲 소개
HTML은 왜 열심히 해야할까? HTML/CSS는 중요할까? 라는 질문을 누군가 던진다면,
'예'라는 대답을 하되,
자바스크립트보다는 덜 열심히 하는 분들이 많을 것이다.
나 또한 프론트엔드 공부를 시작할 때,
HTML/CSS는 쉬우니까, 그리고 할 공부의 범위가 방대하니까
빨리 공부하고 넘어가자는 생각이 강했다.
하지만 이로 인해 생기는 문제점은
HTML/CSS의 기본기가 부족하여 구글링하는 데에 시간을 낭비하거나,
의도한 대로 브라우저에 표시되지 않고 어디서부터 꼬였는지 확인하기 힘들다는 것이다.
기초가 탄탄하지 않으면 자꾸 뒤를 돌아보게 된다.
🌳 HTML과 웹브라우저
HTML과 웹브라우저는 무슨 사이일까? ( ͡° ͜ʖ ͡° )
사실 HTML 파일 보려면 브라우저에서 출력하는 거지 뭐..라고 생각하고 다들 넘어간다.
PDF 파일을 보려면 PDF 뷰어가 필요하듯,
웹브라우저는 HTML 파일을 구동 가능케 한다.
웹 브라우저의 종류에는 Chrome, 엣지, IE, Safari, Firefox 등이 있다.
웹 브라우저의 종류를 알 필요가 있나 싶을 수도 있지만,
생각보다 다양한 웹브라우저를 고려해서 개발해야 하는 일이 많기 때문에 한번쯤은 알아두는 것도 좋겠다.
앗 ❗ 잠깐 , 웹브라우저는 HTML 파일 뷰어의 역할 뿐만 아니라, 사용자의 히스토리라던지,
개발자에게 개발도구(F12) 기능을 제공한다던지 하는 부가 기능도 많다.
HTML은 HyperText Markup Language의 약자인데,
학부 1학년 시험 때 HTML의 약자를 적으라고 해서 외웠던 걸로 썼던 기억이 난다.의미를 이해하지 않고 무엇의 약자인지 영단어만 외웠던 점을 반성한다.
HTML이란 웹브라우저가 이해할 수 있는 언어이다.하이퍼텍스트란, 다른 웹페이지로 이동할 때 특정 부분을 클릭하여 이동이 가능하게 만들어진 요소들을 뜻한다.마크업 언어는 프로그래밍 언어와 차이가 있는데,프로그래밍 언어는 데이터를 가공해서 명령을 내리는 'action'에 대한 언어이고,
마크업 언어는 데이터를 그 자체로 어떤 방식으로 표현할지 기술한다.
'너 이거 해!'가 아닌, '넌 이런 역할이야.'라는 것을 정의해준다는 것이다.
🌴 HTML, CSS, JavaScript
HTML은 웹문서의 기본적인 구조,
CSS는 각 요소들의 스타일링 & 레이아웃,
JavaScript는 동적인 요소를 담당한다!
버튼 하나를 간단한 예시로 들어보자.
버튼 자체의 구조를 정의하는 것 - HTML
버튼의 색상, 여백 등을 기술 - CSS
버튼을 누르면 동작할 이벤트를 기술 - JavaScript!
만약 HTML만으로 웹페이지가 구성된다면
웹페이지들의 identity가 동일시될 수 있다.
그리고, 이전에는 웹페이지의 역할이 단순 정보 제공이었지만
현재는 많은 기능을 필요로 하기 때문에
JavaScript의 중요성이 사용자와의 인터랙션을 위해 더욱 증대되고 있다!
또한, HTML/CSS의 분리가 이루어지지 않으면,
기기와 환경에 따른 페이지들을 각각 만들어주어야 한다.
생산성과 효율을 위해 HTML/CSS/JS의 각자 역할을 구분하여 코드를 작성하는 것이 좋다.
🌿 실습해보자 🌿
특수문자는 입력할 수 없는 input 만들기
텍스트 상자에 '안녕하세요!'라고 입력하면,
'특수문자는 입력 불가능합니다'라는
안내문구를 출력하는 부분을 어떻게 할 수 있을지 구현해보기로 했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2021-08-28</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
* {
font-family: 'Noto Sans KR', sans-serif;
}
input {font-size: 4em; padding: 10px;}
p {font-size: 3em; font-style: italic}
</style>
</head>
<body>
<input type="text">
<p style="display:none; color:red">특수문자를 입력할 수 없습니다. </p>
<script>
const input = document.querySelector('input');
const p = document.querySelector('p');
window.onload = function () {
input.addEventListener('input', confirm);
}
var confirm = function(e) {
var value = e.target.value;
var RegExp = /[~!@#$%^&*()_+|<>?:{}]/;
RegExp.test(value) ? (p.style.display = 'block') : (p.style.display = 'none');
}
</script>
</body>
</html>input 태그의 input 이벤트를 이용하여
input의 value가 변할 때마다 confirm 이벤트 리스너가 작동하게 하였다.
RegExp라는 특수문자 정규식 변수를 생성하고,
이벤트의 타겟인 input의 값을 불러와 value에 저장하였다.
RegExp의 내장 메서드인 test()를 사용하여
반환 값이 true이면(특수문자 포함) 특수문자를 입력할 수 없다는 문구를 나타내고,false이면 이 단락을 보이지 않게끔 만들었다.
여기서, if/else 문을 사용하지 않고삼항연산자를 사용하여 간단하게 표현하는 것도 good! 😉
아래에서 실습 결과를 확인해보자.
실습 코드 결과
- 특수문자를 입력하지 않았을 때
- 특수문자를 입력시
🍀 웹 표준과 웹 접근성, 호환성
웹 표준
HTML 파일은 여러 브라우저에서 구동되고,
브라우저의 각 코드는 모두 다를 수밖에 없다.
HTML을 이해/해석하는 방식도 모두 다르다.
그러므로 개발자의 의도와 최종 표현이 다를 수 있다!
그것을 막기 위한 것이 웹 표준(WEB Standards)이며,
통상적으로 HTML5라고 부른다.
2019년 이후로는 HTML5는 보통 WHATWG의
HTML Living Standard를 뜻한다.
표준화 이후 액티브X같은 독자적 플러그인이 필요없게 되어버렸다!
정리하자면, 의도한 대로 보여지는 웹페이지를 위해 웹 표준을 준수한다.
웹 접근성
웹 접근성은 제약이 있는/없는 사용자가 모두 동등한 환경에서
웹사이트를 이용할 수 있게 도와주는 것이다.
예로는 키보드 오버레이, 음성 인식, 등이 있다.
구글의 처음 화면에서도 위와 같은 기능들이 포함되어 있다!
웹 호환성
웹 호환성은 Cross Browsing이라고 더 많이 불리며,
웹 브라우저의 버전과 종류에 관계없는 웹사이트 접근을 하는 것이다.
웹 표준을 준수하여 호환성을 확보하는 편이 좋다.
'Programming Language > HTML, CSS, JavaScript' 카테고리의 다른 글
| [HTML/CSS] 메타데이터 요소 (0) | 2021.11.10 |
|---|---|
| [HTML/CSS] 텍스트 요소 (0) | 2021.11.09 |
| [HTML/CSS] HTML의 구조 (0) | 2021.11.09 |
| [HTML/CSS] Visual Studio Code 알면 좋은 확장 프로그램, 단축키, 꿀팁 (4) | 2021.11.08 |
| [HTML/CSS] 웹 접근성에 대한 고찰 (0) | 2021.10.12 |
- Thanks for comming.
- 오늘은
- 명이 방문했어요
- 어제는
- 명이 방문했어요