[HTML/CSS/Javascript] 기본 내용 정리

jungmin Lee·2023년 8월 15일

html, css, javascript?

html(구조)

html은 웹 페이지의 구조를 담당하는 마크업 언어이며 태그들의 집합이다. HTML은 트리 구조를 형성하며, 이 트리 구조는 웹 브라우저에 의해 해석되어 화면에 표시된다.

html 태그

<div> <span> <img> <a> <ul> <li> <input> <textarea> <button>

시멘틱 요소를 사용해야 하는 이유

검색 엔진이 웹페이지들을 방문할 때, 시멘틱 요소를 중요한 키워드로 고려한다. 시멘틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것이다.
그리고 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하고 요소 안에 채워질 데이터 유형도 예측하기 쉽다.

<article> : 독립적이고 자체 포함된 콘텐츠이다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이며, 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용한다.
<footer> : 일반적으로 페이지의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 추가로 들어갈 수 있다.
<nav> : 내비게이션(navigation)을 말하며, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
<main> : 문서의 주된 콘텐츠를 표시한다.

div, span
<div>
div는 블록 수준의 요소로 큰 컨테이너를 만들거나 레이아웃을 제어하는 데 사용된다
<span>
span은 인라인 요소로 텍스트 스타일링과 같은 작은 부분에 스타일을 적용하는 데 사용된다.

ul, ol, li

<ul>, <ol>, <li> 요소는 목록을 나타내기 위해 사용된다다. 일반적으로 웹 페이지에서 항목들을 나열하거나 목록화할 때 사용한다.
<ul>
순서가 없는 목록으로 항목들 간의 순서가 중요하지 않을 때 사용한다
<ol>
순서가 있는 목록으로 항목들 간의 순서가 중요할 때 사용한다.
<li>
<ul>이나 <ol> 아래의 자식요소로 사용되며 각 항목을 정의하고 내용을 제공하는 데 사용된다.

CSS(스타일)

CSS는 디자인 요소를 시각화하는 스타일 시트 언어이다. 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절하게 구성하면 사용자 경험에 좋은 웹 페이지를 제작할 수 있다.

css 작성

선택자는 요소 이름이나 id, 또는 클래스를 선택한다.
중괄호 안에서 이 요소에 적용할 내용을 작성한다.
요소에 적용할 수 있는 내용을 속성이라고 하며 색상, 글자 크기 등 다양한 속성이 있다.
속성에 적용할 적절한 값을 입력하여 스타일을 표현한다.
속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분한다.

 .box {
  color: #155724; /* 글자 색상 */
  font-size: 12px; /* 글자 크기 */
  background-color: #d4edda; /* 배경 색상 */
}

CSS 스타일을 적용방법

CSS 파일을 HTML 파일에 연결하는 외부 스타일 시트
HTML파일의 <head>안에서 <link> 태그 안의 href 속성을 통해 파일을 연결한다.

<link rel="stylesheet" href="index.css" />

같은 줄에서 스타일을 적용하는 인라인 스타일
CSS 파일을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성하는 내부 스타일 시트

✨하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않는다.

기본적인 선택자 (selector)

id (# 셀렉터)
id로 이름 붙여서 스타일링 적용하며 id가 있는 요소를 선택할 때는 #기호를 이용한다. id는 하나의 문서에서 한 요소에만 사용한다. 즉, 고유한 이름을 붙일 때, 중복을 허용하지 않는다
class (.)
class로 스타일을 분류하여 적용하며 반복되는 영역을 유형별로 분류할때 사용한다
예를 들면,
요소에 동일한 class를 추가하면 , 동일한 스타일을 여러 요소에 적용한다.
여러 개의 class를 하나의 엘리먼트에 적용하려면 띄어쓰기로 class를 작성하면 적용하려는 class들의 이름을 구분한다.

색상 (color)
글자의 색상을 변경하는 속성은 color이다.
HEX (16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상의 이름으로 작성한다.

 .box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

글꼴 (font-family)
글꼴의 이름은 따옴표를 붙여서 적용할 수 있으며 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있다. 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책으로 fallback 글꼴을 추가할 수 있다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있으며 입력된 순서대로 fallback이 적용된다.

body {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

웹 폰트 기술
웹 폰트 기술은 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드하게 하는 기술이다.

Google Fonts 서비스
Google Fonts 서비스는 다양한 웹 폰트를 쉽게 사용할 수 있게 도와주며 HTML의 link 태그를 사용하여 간단하게 embed 할 수 있다.

크기 (font-size)
글자의 크기를 변경하기 위한 속성이다.

.title {
  font-size: 24px;
}

기타 스타일링
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height

정렬 (text-align)
가로로 정렬할 경우에 사용하며 유효한 값으로는 left, right, center, justify(양쪽 정렬)이 있다.

단위
글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 중요하며, 크기의 단위는 절대 단위와 상대 단위로 구분한다.
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등

글꼴 사이즈를 정할 때
기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우이며 px(픽셀)을 사용한다. 픽셀은 크기가 고정된 절대 단위이므로 사용자 접근성이 불리하지만 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
일반적인 경우
상대 단위인 rem을 추천한다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵지만, rem은 root의 글자 크기에 따라서만 상대적으로 변한다)
화면 사이즈를 정할 때
반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트이며 디바이스 크기를 나누는 기준을 보통 px이다.
iPhone 12 Pro Max의 너비는 414px이며 일반적으로 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 볼 수 있다.
화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
웹사이트의 보이는 영역을 Viewport라고 하며, vw, vh를 사용한다. vw, vh는 각각 viewport width와 viewport height를 뜻한다. 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100이다.

박스모델 margin, border, padding, content
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스이다.박스는 직사각형이고, 너비(width)와 높이(height)를 가지며, CSS를 이용해 속성과 값으로 크기를 설정할 수 있다.

줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
block은 줄 바꿈이 되는 박스로 줄만큼 크기를 차지하며,기본적으로 갖는 너비(width) 100% width, height 사용이 가능하다.
inline은 줄 바꿈이 일어나지 않고 글자가 차지하는 만큼 차지하는 만큼 width, height가 사용 가능하다.
block과 inline의 특징이 섞인 inline-block 박스는 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가진다.

테두리 (border)
테두리는 심미적인 용도 외에도 각 영역이 차지하는 크기를 알기 위해서, 레이아웃을 만들면서 크기를 시각적으로 확인하는 용도로도 쓰인다. 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이 있으며 border 속성에 속성값을 한줄로 작성할 수도 있다.

.box {
  border: 1px solid black; 
}

바깥 여백 (margin)
top, right, bottom, left 시계방향으로 작성할 수 있으며 각각 margin-top, margin-right, margin-bottom, margin-left로 작성할 수도 있다. 바깥 여백에는 음수 값을 지정할 수 있다.

안쪽 여백 (padding)
border를 기준으로 박스 내부의 여백을 지정한다. margin과 마찬가지로 top, right, bottom, left 시계방향으로 작성할 수 있으며 각각 지정할 수도 있다.

박스를 벗어나는 콘텐츠 처리
박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만들 수 있다.

overflow: auto;

콘텐츠가 넘치는 경우 스크롤을 생성한다.

overflow: hidden;

넘치는 콘텐츠의 내용을 보여주고 싶지 않을 떄에는 hidden을 사용할 수 있다.

overflow-x 속성과 overflow-y 속성
overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤하거나 세로 방향으로 스크롤할 수 있게지정할 수 있다.

✨박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있다. border-box 속성값으로 여백과 테두리 두께를 포함해서 박스 크기를 계산한다. content-box는 박스의 크기를 측정하는 기본값이다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.

* {
  box-sizing: border-box;
}

CSS selector

전체 선택자
전체 선택자는 문서의 모든 요소를 선택한다.

* { }

태그 선택자
태그 선택자는 같은 태그명을 가진 모든 요소를 선택하며, 복수로도 선택할 수 있다.

h1 { }
div { }
section, h1 { }

ID 선택자
ID 선택자는 #id로 입력하여 선택한다.

#only { }

class 선택자
class 선택자는 .class로 입력하여 선택하며, 같은 class를 가진 모든 요소를 선택한다.

.widget { }
.center { }

attribute 선택자
attribute 선택자는 같은 속성을 가진 요소를 선택한다.

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 선택자
자식 선택자는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.

header > div { }

<header>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
	<div> <!-- 선택 -->
		<p>
			<div></div>
		</p>
	</div>
</header>

후손 선택자
후손 선택자는 첫 번째로 입력한 요소의 후손을 선택한다.

header div {}

<header>
	<div><!-- 선택 -->
		<p>
			<div><!-- !!선택!! -->
			</div>
		</p>
	</div>
	<div><!-- 선택 -->
		<p>
			<div><!-- !!선택!! -->
			</div>
		</p>
	</div>
</header>

형제 선택자
형제 선택자는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.

section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

인접 형제 선택자
인접 형제 선택자는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.

section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

가상 클래스 선택자
가상 클래스는 요소의 상태 정보에 기반하여 요소를 선택한다.

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

UI 요소 상태 선택자

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */

구조 가상 클래스 선택자

p:first-child { } /* 첫 번째 <p> 요소를 선택 */
ul > li:last-child { } /* <ul> 내의 마지막 <li> 요소를 선택 */
ul > li:nth-child(2n) { } /* <ul> 내에서 짝수 번째 <li> 요소를 선택 */
section > p:nth-child(2n+1) { } /* <section> 내에서 홀수 번째 <p> 요소를 선택 */
ul > li:first-child { } /* <ul> 내의 첫 번째 <li> 요소를 선택 */
li:last-child { } /* 문서 전체에서 마지막 <li> 요소를 선택 */
div > div:nth-child(4) { } /* <div> 내의 네 번째 자식 <div> 요소를 선택 */
div:nth-last-child(2) { } /* 문서 끝에서 두 번째로 나오는 <div> 요소를 선택 */
section > p:nth-last-child(2n + 1) { } /* <section> 내에서 끝에서 두 번째로 나오는 홀수 번째 <p> 요소를 선택 */
p:first-of-type { } /* 문서 내에서 첫 번째로 나오는 <p> 요소를 선택 */
div:last-of-type { } /* 문서 내에서 마지막으로 나오는 <div> 요소를 선택 */
ul:nth-of-type(2) { } /* 문서 내에서 두 번째로 나오는 <ul> 요소를 선택 */
p:nth-last-of-type(1) { } /* 문서 끝에서 첫 번째로 나오는 <p> 요소를 선택 */

부정 선택자
지정된 조건을 충족하지 않는 요소를 선택한다.

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 선택자
특정 요소가 지정된 조건에 정확히 일치하는 경우에만 선택되도록 CSS 규칙을 정의하는 데 사용한다.

input[type="text"]:valid { }
input[type="text"]:invalid { }

와이어프레임(Wireframe)
웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계이며 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다. 화면의 영역을 구분하는 일이다.

목업(Mock-up)
목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성, HTML 문서 내에 하드코딩하는 방식이다.

CSS로 화면을 구분할 때는 수직분할(콘텐츠는 가로로 배치)과 수평분할(세로로 배치)을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다.

레이아웃 리셋
HTML 문서는 기본적인 스타일을 가지고 있는데, HTML 문서가 갖는 기본 스타일이 레이아웃을 잡는 데 방해가 되기도 한다. 아래의 css코드를 입력하면 레이아웃 리셋이 된다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기

박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다. display: flex로 적용할 수 있으며, 부모 박스 요소에 적용하고 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다.
요소의 정렬, 요소가 차지하는 공간을 설정할 수 있다.

부모 요소에 적용해야 하는 Flexbox 속성들

flex-direction : 정렬 축, 기본적으로 가로 정렬
flex-wrap : 줄 바꿈 설정, 기본적으로는 nowrap
justify-content : 축 수평 방향 정렬, flex-start , flex-end, center, space-between, space-around 속성 값을 설정
align-items : 축 수직 방향 정렬, stretch , flex-start , flex-end , center , baseline 속성 값을 설정

자식 요소에 적용해야 하는 Flexbox 속성
요소가 차지하는 공간과 관련이 있다.
flex 속성의 값

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

grow(팽창 지수)
요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이다.
팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져오며, 팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지하게 되는 것이다.
*flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다
shrink(수축 지수)
요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지 정할 수 있다.
flex-shrink 속성은 width나 flex-basis속성에 따른 비율이므로 실제 크기를 예측하기가 어렵다.
basis(기본 크기)
요소의 크기가 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미한다.
자식 요소에 flex 속성을 따로 설정해 주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치된다.

flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지된다.
```
flex: 0 1 auto;
```
width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선시된다.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않는다.
flex-basis를 사용하지 않을 경우에, 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해서 width 대신 max-width를 쓸 수 있다.

javascript(상호작용)

JavaScript는 유저와 상호작용할 수 있는 프로그래밍 언어이다. JavaScript는 웹 개발에서 필수적인 역할을 하며, 웹 애플리케이션을 보다 동적이고 인터랙티브하게 만드는데 중요한 역할을 한다.

`<script>` 요소의 위치에 따른 차이점

<head> 요소 내에 위치한 경우
<head> 요소 내에 <script> 요소가 위치할 경우에는 페이지 로딩 중에 스크립트가 먼저 실행된다. 외부 스크립트 파일을 참조하더라도 브라우저는 스크립트 파일 다운로드와 실행을 기다리며, 사용자는 렌더링된 페이지가 나타날 때까지 기다려야 한다. 이 방법은 스크립트가 페이지 컨텐츠를 수정하는 데 사용될 때 문제가 발생할 수 있으므로 <body> 요소의 끝 부분에 위치한 경우가 권장된다.

<body> 요소의 끝 부분에 위치한 경우
<body> 요소의 끝 부분에 <script> 요소를 위치시키면 페이지 컨텐츠가 먼저 렌더링되고, 스크립트가 이후에 실행된다. 이 방법으로 위치할 경우에는 페이지가 빠르게 표시되고, 스크립트가 컨텐츠에 영향을 주지 않는 한 사용자 경험을 향상시킬 수 있으므로 일반적으로 권장되는 방법입니다.

Visual Studio Code(VScode)

VScode는 마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터이다. 프로그램, 웹 사이트, 웹 애플리케이션 등을 만들 수 있으며, macOS, Linux, Windows 등 OS와 상관없이 사용이 가능하다. 또한, JavaScript, HTML, CSS를 모두 편집할 수 있으며 다양한 extension을 제공하여 개발자의 취향에 맞게 커스터마이징이 가능하고 디버깅(debugging)에도 편리하다. 그리고 무료로 사용할 수 있다.
Live Server- 파일을 오른쪽 클릭한 후 Open with Live Server를 클릭하면 브라우저에서 HTML 파일을 확인할 수 있으며 HTML 파일 수정 후 브라우저를 새로 고치지 않아도 변경 사항이 바로 적용되는 장점이 있다.

UI, UX

컴퓨터와 교류하기 위한 연결고리이며 좋은 사용자 경험(UX)은 직관적이고 쉬운 UI에서 나온다.

사용자 인터페이스(UI)

사용자 인터페이스는 소프트웨어나 기기와 사용자 간의 상호 작용을 위한 그래픽적 또는 텍스트 기반의 요소와 디자인을 포함하는 모든 것을 나타낸다. UI는 사용자가 시스템과 소프트웨어와 소통하고 상호 작용할 때 직접적으로 보이고 느끼는 부분을 의미하며 버튼, 메뉴, 폼, 아이콘, 레이아웃 및 기타 시각적 및 인터랙티브 요소를 포함한다. UI 디자인은 사용자가 소프트웨어를 쉽게 이해하고 사용할 수 있도록 디자인되어야 한다.

사용자 경험(UX)

사용자 경험은 사용자가 제품, 서비스 또는 시스템을 사용하면서 느끼는 전반적인 경험을 말하며 사용자의 요구 사항과 목표를 충족시키고 사용자가 만족하고 즐겁게 사용하는 것을 중점으로 두어야 한다. UX 디자인은 UI 디자인을 포함하지만, 더 넓은 범위를 다루며 사용자의 행동, 감정, 편의성, 효율성 및 만족도와 관련이 있다. 좋은 UX는 사용자가 제품 또는 서비스와의 상호 작용을 원활하게 하고, 긍정적인 감정을 유도하며, 사용자 요구를 충족킨다.

✨UI는 사용자 인터페이스의 디자인과 구성을 다루며, UX는 사용자가 제품 또는 서비스를 사용하면서 느끼는 전체적인 경험과 만족도를 다룬다. 좋은 UI와 UX 디자인은 사용자들에게 편리하고 유용한 경험을 제공하는데 도움을 준다.