HTML, CSS 그리고 JavaScript 정리

yimo22·2023년 3월 28일

WEB

목록 보기

1/8

HTML

HTML(HyperText Markup Language, HTML)은 tag를 사용하여 문서의 구조등을 기술하는 언어이다.

HTML5의 특징

멀티미디어 요소 재생
- 멀티미디어 요소를 별도의 플러그인 없이도 재생가능
서버와 통신
- 서버와 클라이언트 사이에 소켓 통신이 가능하다
Semantic Tag 추가
- 웹 사이트를 검색엔진이 좀 더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여하는 방식

HTML 문서 구조

시작태그와 종료태그가 쌍으로 이루어져 있다.

<!DOCTYPE html> // HTML 문서임을 정의함
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Hello, world!
    </body>
</html>

HTML의 DOM, Parser

DOM(Document Object Model)은 html과 XML문서의 구조를 정의하는 API를 제공한다. 이때 DOM은 문서 요소집합을 트리형태 의 계층구조로 HTML을 표현한다.

Document는 HTML 또는 XML문서를 표현한다.

HTML의 파서에는 2가지가 있다.

DOM parser
DOM 파서는 문서를 전체적으로 한번 스캔한 후에 Object 를 중심으로 파싱을 진행한다. 따라서 임의의 노드를 여러 번 읽을 수 있다는 장점을 갖는다.
하지만 전체적으로 문서를 한번 스캔해야 하기 때문에, 문서의 양이 많을 경우 시간이 오래 걸린다는 단점이 있다.
SAX parser
SAX 파서는 문서를 앞에서부터 순차적으로 스캔하면서 문서를 읽는 파서를 말한다. 라인으로 읽기 때문에 일정하고 적은량의 메모리를 사용한다는 장점이 있지만, 원하는 정보를 얻고자 하면 다시 파싱해야 한다는 단점을 갖는다.

HTML 태그와 속성

글로벌 속성	설명
class	tag에 적용할 스타일의 이름을 지정한다.
dir	내용의 텍스트 방향을 지정.
id	tag에 유일한 ID를 지정한다. (주로 js에서 사용한다.)
style	인라인 스타일을 적용하기 위해 사용
title	tag에 추가 정보를 지정. tag에 마우스 포인터를 위치시킬 경우 title의 값을 표시한다.

head 요소

meta 태그
- 문서의 작성자, 날짜, 키워드 등 브라우저의 본문에 나타나지 않는 일반 정보를 나타냄
- name과 content 속성을 통해서 나타낸다.
```
<meta name="name" content="value">
```

Body 요소

<h#>
- 문단의 제목을 지정할 때 사용한다.
- 숫자가 커질수록 글자는 작아진다.

특수문자

&nbsp; // Non-breaking Space(공백)
&lt; // less-than (<)
&gt; // greater-than (>)
&amp; // Ampersand (&)
&quot; // Quotation mark(")
&copy; // Copyright 
&reg; // registered trademark

포맷팅 요소

<abbr> // 생략된 약어 표시
<address> // 연락처 정보 표시
<blockquote> // 긴 인용문구 표시. 좌우로 들여쓰기가 됨
<q> // 짧은 이용문구 표시. 좌우로 따옴표가 붙음
<cite> // 웹 문서나 포스트에서 참고 내용 표시
<pre> // 공백, 줄 바꿈 등 입력된 그대로 화면에 표시
<code> // 컴퓨터 인식을 위한 소스코드
<mark> // 특정 문자열을 강조. 화면에는 하이라이팅 됨
<hr> // 구분선
<b> , <strong> // 굵은 글씨로 표시. 특정 문자열 강조 (<string>)
<i>, <em> // 기울이기, 의미있는 글자를 비스듬히(<em>)
<big>, <small> // 큰글자, 작은 글자로 표시
<sup>, <sub> // 위첨자, 아래 첨자
<s>, <u> // 취소선, 밑줄

목록형 요소

<ul> // 번호 없는 목록을 표시. 항목 앞에 심볼을 표시, unordered list
<ol> // ordered list, 번호 있는 목록을 표시
<li> // 목록 항목의 하위 tag로 사용한다.
<dl> // 용어의 정의와 설명에 대한 내용을 목록화해서 표시.
<dt> // 용어 목록의 정의 부분을 나타냄
<dd> // 용어 목록의 설명 부분을 나타냄

Table

colspan // 두 개 이상의 열을 하나로 합치기 위해서 사용
rowspan // 두 개 이상의 행을 하나로 합치기 위해 사용

이미지 요소

<img src="" title="">
<figure> // 설명 글을 붙여야 할 대상을 지정
<figcaption> // 설명 글이 필요한 대상을 묶음
ex)
<figure>
	<img> 
	<figcaption> </figcatpion>
</figure>

링크 요소
- <a> tag를 사용하여 다른 문서로 연결하는 기능
- tag를 서로 중첩해서 사용할 수 없다.
  - _blank : 링크 내용이 새 창이거나 새 탭에서 열린다.
  - _self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
- <map> : 하나의 이미지에 여러개의 link

Form control 요소

<form> // form 태그 내부에 여러개의 control 요소를 포함
<input> // 텍스트 box, 체크box 등의 사용자가 데이터를 입력
<textarea> // 여러 줄의 문자를 입력
<button> // 버튼
<select> // dropBox, comboBox
<optgroup> // selectbox의 항목을 그룹화
<option> // select box의 항목들을 정의
<label> // for 속성을 이용하여 다른 control 요소와 텍스트를 연결
<fieldset> // 입력 항목들을 그룹화함
<legend> // fieldset의 제목을 지정함

--
placeholder : 입력란에 적당한 힌트 내용을 표시
readonly : 입력란에 텍스트를 사용자가 직접 입력하지 못하게 읽기 전용

공간 분할 태그

Block vs Inline Element
- HTML Elem은 크게 block과 inline 형식으로 나뉜다.
- block은 한줄을 모두 이용
- inline은 딱 그 크기만큼만 이용한다.
- Block
  - div, h1~h6, p, ol, ul, table, form
  - span, a, input, 글자태그형식(b, strong, i, em), img 태그

CSS

About CSS

CSS(Cascading Style Sheets) 란 문서를 화면에 표시하는 방식을 정의한 언어
CSS 규칙은 선택자(Selector) 와 선언(Declaration), 두 부분으로 구성된다.

스타일 적용방법

외부 스타일시트

css 파일을 나 @import HTML 문서에 연결하여 사용한다.

<link rel="stylesheet" type="text/css" href="path/filename.css"> // #1
<style type="text/css">
@import url("path/filename.css"); /* @import "path/filenmae.css"; */
</style>

내부 스타일시트
- HTML 내부에
- style은 안에 작성한다.
- 내부 스타일시트는 각 페이지마다 반복해서 적어야 한다는 단점이 존재한다.
  - 여러 페이지에 동일한 스타일을 지정해야 하는 경우, 외부 스타일 시트를 사용하는것이 유리
인라인 스타일시트
- style attribute를 사용하여 개별 엘리먼트에 스타일을 적용하는 방법이다.
- 위의 3가지 모두 사용했을 때 가장먼저 반영이 된다.

선택자(Selector)의 종류

일반 선택자의 우선순위는 “전체선택자 < 타입선택자 < 클래스선택자 < ID선택자” 이다.

전체 선택자
```
* { margin: 0; text-decoration: none;}
```

태그 선택자(Type Selector)

p { background: yellowgreen; color: darkgreen;}

클래스 선택자(Class Selector)

.class1 { background: yellowgreen; color: darkgreen;}
div.class2 { background: darkgreen; color: yellowgreen;}

ID 선택자

#id1 { background: yellowgreen; color: darkgreen;}    // id 로 검색
div#id2 { background: darkgreen; color: yellowgreen;} // div 태그의 id

복합 선택자(Combinator)

하위선택자(Descendant Combinator)와 자식 선택자(Child Combinator)

E F {} // E 요소의 자손인 F요소를 선택 (하위선택자) : 모든 하위요소를 적용
E>F {} // E 요소의 자식인 F요소를 선택 (자식선택자) : 부모 아래의 자식요소에 적용

인접형제선택자와 일반형제선택자

E+F {} // E요소를 바로 뒤따르는 F요소를 선택 : 하나만 선택
E~F {} // E요소가 앞에 존재하면 F를 선택 : 조건을 충족하는 모든 조건요소를 선택

속성 선택자(Attribute Selectors)

태그 안의 특정 속성들에 따라 스타일을 지정

E[attr] // attr 속성이 포함된 요소 E를 선택
E[attr="value"] // attr 속성이 정확하게 value인 모든 요소 E를 선택
E[attr~="value"] // attr 속성의 값에 'value'가 포함되는 요소를 선택 (공백으로 분리된 값이 일치)
E[attr ^= 'value'] // attr 속성에 value로 시작하는
E[attr $= 'val'] // attr 속성에 val 로 끝나는
E[attr *= 'val'] // attr 속성의 값에 'val'이 포함되는 요소를 선택
E[attr |= 'val'] // attr 속성의 값이 정확하게 'val' 이거나 'val-'으로 시작되는 요소선

가상 클래스 선택자(Pseudo-Classes)

CSS 속성

text-align: left|right|center|justify // text정렬 방식 지정
text-decoration: none|underline|overline|line-through|blink // text 장식 지정
// underline:밑줄, overline:글위에줄, line-through:가운데긋는선, blink:깜빡
color : text 색상 지정

display: none|block|inline // 웹 브라우저에 언제 어떻게 보일지를 결정
// block: block-level의 태그들의 기본 속성값. block level요소 안에는 inline level 요소가 들어갈 수 있음
// inline: inline-level의 태그들의 기본 속성값. width, height, margin-top, 등 지정 불
// inline-block: 새로운 라인에서 시작하지는 않지만 block처럼 크기지정 가능.
// none: 해당 요소를 랜더링하지 않도록 설
border-style: none|solid|hidden
// 값이 1개일때 모든 면 적용, 2개일때 {위아래, 오른쪽왼쪽}, 3개일때 {top, right-left, bottom}으로 적용
// 4개일때 {top, right, bottom, left} 순으로 적용된다.

Position

static
- html 요소의 위치를 결정하는 방식 중 기본값
- top, right, bottom, left, z-index 등 아무런 영향을 받지 않음
relative position
- 상대적인 배치
absolute position
- 부모요소 또는 가까운 조상요소를 기준으로 오프셋 적용
fixed position
- 부모 또는 조상요소와 관계없이 브라우저의 viewport를 기준으로 오프셋 적용.
options
- float
  - 해당 설정을 기준으로 흐르는 방향을 정함
- clip
- z-index
  - z-index 값은 정수값으로 표시가능하다
  - z-index값이 클수록 위에 표시한다.

JavaScript

NetScape에서 처음 만들어졌으며, 이후 ECMA에서 ECMAScript라는 이름으로 표준화
<script>태그는 HTML 파일 내부의 <head>나 <body> 안 어느곳에서나 선언 가능하다.
- <body> 안의 끝부분에 script 태그를 둘 것을 권장
JavaScript의 원시타입
- 숫자형(number) : 정수 또는 실수, 모든 숫자를 8byte의 실수형태로 처
- 문자열형(string) : 문자열
- boolean 형(boolean) : 참or거짓
- undefined(undefined) : 변수가 선언 되었지만 초기화가 되지 않을 경우
- null(object) : 값이 존재하지 않은 경우
  
  이를 제외한 모든 값은 객체타입이다.

자료형에 관한 자세한 이야기

숫자형

JavaScript는 언더플롱, 오버플로우, 0으로 나누는 연산에 대해 예외를 발생시키지 않는다.

JS에는 숫자와 관련된 특별한 상수가 존재한다.

Infinity: 무한대를 나타내는 상수,
NaN(Not a Number) : 계산식의 결과가 숫자가 아님을 나타내는 상
0, -0: 자바스크립트에서는 0과 -0을 따로 구분한다.

문자열

JS에서는 문자열을 16비트의 Unicode 문자를 이용한다.
문자 하나를 표현하는 char형은 제공하지 않는다.
JS에서 ==와 ===는 다르다
- == : 두 대상의 값이 같은지 비교
- === : 값과 data type이 모두 같은지를 비
JS의 함수는 일급객체 이므로 값으로 사용될 수 있다.

💡 일급객체란?
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
💡<일급객체의 조건>
- 변수에 할당할 수 있다.
- 다른 함수를 인자로 전달 받는다.
- 다른 함수의 결과로서 리턴될 수 있다.
💡<일급객체의 효과>
- 고차함수를 만들 수 있다.
- 콜백(callback)을 사용할 수 있다.

JS의 함수 정의 방법

함수 선언문

function 함수이름 (args1, args2...){}

함수 표현식
```
var 함수이름 = function(){}
```

Function 생성자

var 함수이름 = new Function('매개변수1', '매개변수2', ... , '함수내용');

변수 호이스팅(Variable Hoisting)

var 키워드를 사용한 변수는 중복해서 선언이 가능
호이스팅이란, var선언문이나 function 선언문 등 모든 선언문이 해당 scope의 처음으로 옮겨진것처럼 작동하는 특성이다.
변수의 생성과정
- 선언단계 : 변수 객체에 변수를 등록
- 초기화단계 : 변수 객체에 등록된 변수를 메모리에 할당. (undefined로 초기화됨)
- 할당단계 : undefined로 초기화된 변수에 실제값을 할당
  
  선언단계와 초기화단계는 한번에 이루어진다.

함수 호이스팅

함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느곳에서든지 호출이 가능
JS는 모든 선언을 호이스팅 한다.
주의점
- 함수 표현식의 경우, 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

💡 콜백함수 콜백함수는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 떄 시스템에 의해 호출되는 함수를 말한다. 콜백함수는 주로 비동기식 처리 모델에서 사용됨 → 처리가 종료되면 호출될 함수를 미리 매게변수에 전달하고 처리가 종료되면 콜백함수를 호출.

Window 객체

Window 객체는 웹 브라우저에서 작동하는 JS의 최상위 전역객체이다
- Window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있다.
- BOM(Browser Object Model)로 불리기도 한다.

navigator 객체는 브라우저의 정보가 내장된 객체

location 객체(주소창)를 이용하여 현재 URL와 관련된 정보

location.href // 프로퍼티에 값을 할당하지 않으면 현재URL조회 할당하면 해당 이동
location.reload() // 현재 페이지를 새로고침

새창열기

window 객체의 open()함수를 사용하면 새 창을 열 수 있다.

window.open(`페이지 URL`, `창 이름`, `특성`, `히스토리대체여부`);
// 창이름(string) : open할 대상 지정
// 특성(string) : 새로 열린 창의 너비, 높이 등의 특성 지정
// 히스토리 대체여부(bool) : 현재 페이지 히스토리에 덮어 쓸지 여

JSON 사용

JSON.stringify(JSON 객체) // 직렬화
JSON.parse(JSON 형식의 문자열) // Deserialize
toJSON() // JS Date 객체의 데이터를 JSON 형식의 문자열로 변환

Session Storage 는 해당되는 탭에서만 유지가 된다.
localStorage 는 영구적으로 보관가능(세션이 끊겨도)
- localStorage는 도메인만 같으면 같이 쓸수 있다

객체 만들기

문서 객체는 textNode를 갖는 객체와 갖지 않는 객체로 나뉜다.

createElement(tagName)    // element node 생성
createTextNode(text)      // text node 생성
appendChild(node)         // 객체에 node를 child로 추가
setAttribute(name, value) // 객체의 속성을 지정
						  // 브라우저가 지원하지 않는 속성도 가능
removeChild(childnode)   // 객체의 자식노드를 제거
getAttribute(name)       // 객체의 속성을 가져옴
innerHTML                // 문자열을 HTML 태그로 삽입
innerText // 문자열을 text node로 삽입 -> text node로 삽입되기 때문에 태그가 무시된다.

example)
htmlToText.innerHTML = "<h2>Hello world!!!</h2>"
          .replace(/</g, "&lt;") // 여는 꺽새는 문자로받음
          .replace(/>/g, "&gt;");// 닫는 꺽새도 문자로 받음

yimo22

Viva La Vida!

다음 포스트