의사클래스&의사요소

의사클래스

의사클래스(가상클래스)는 선택자에 추가하는 키워드로,
요소가 어떤 특정한 상태가 되었을 때의 요소를 선택하겠다는 의미이다.
( : 1개 사용 )

선택자:의사클래스{속성명: 속성값; }

예) h1:hover{color: red; }
-h1로 지정되어있는 요소에 마우스커서가 올라가면 글자를 빨간색으로 하겠다.

자주 쓰이는 의사클래스들

의사요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드로,
이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수있다.
( :: 2개 사용 )

선택자::의사요소{속성명: 속성값; }

예) li::first-letter{font-size: 30px; }
-li로 지정되어있는 요소의 첫 번째 글자들만 30px로 변경하겠다.
(기본값은 16px)

자주 쓰이는 의사 요소들

겹치거나 넘치는 요소 다루기

겹쳤을때

position과 축
z-index (대응)속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다.
정수 값을 지정하여 쌓임 맥락(stacking context)에서의
레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대하여 적용할 수 있는 속성
(position으로 인하여 겹치거나 쌓일때의 대응속성=z-index)
-위치 지정 요소 (positioned element)란, position속성이 정의되어 있는 요소

z-index

동일한 위치에 요소들이 배치가 되면 요소들은 z축에서 쌓이게 된다.=쌓임 맥락
z-index의 기본 값은 auto이며, 정수값으로 각 요소의 쌓임 순서를 결정한다.
auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.
z-index: 숫자; }를 입력해주게 되면 쌓임 순서가 결정되는데
이때 숫자는 어떤 수를 써도 상관은 없으나 높을 숫자일수록 위로 올라가서 쌓인다.

넘침현상

요소는 텍스트 또는 다른 요소를 자신의 콘텐츠로 가질 수 있고,
요소 내부의 콘텐츠 양이 많아질수록, 요소는 콘텐츠에 맞게 크기를 조절한다.
그러나 요소의 크기가 정해져있는 상태에서 내부 콘텐츠의 크기가 요소보다 넘치는 상황이 발생하면, 콘텐츠가 요소의 영역 밖으로 벗어나 버리는
‘넘침 현상’이 발생하기도 한다.
이러한 문제를 해결하기 위해서는 overflow 속성을 사용해야한다.

예) width, height 지정하고 border 속성으로 외부선도 만들었으나
콘텐츠가 너무 많아서 지정해놓은 요소의 영역 밖으로 나가서 넘쳐버렸다.

overflow 처리 유형

선택자 더보기

앞서 학습한 선택자 외에도 CSS에는 요소가 가진 다양한 특성을 토대로 스타일을 적용할 수 있는 여러 가지 방법이 존재한다.

-형제 요소란, 같은 부모 요소 내에 같이 나열되어있는 요소

요소의 유형

요소의 유형에는 ‘블록 레벨 요소’와 ‘인라인 요소’가 있다.
‘블록 레벨 요소’ 는 자신이 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
예) div, p, h1 등등
‘인라인 요소’는 자기에게 필요한 만큼의 공간만 차지한다.
예)span, a 등등
이때 css의 속성을 잘 활용하면 요소가 ‘블록 레벨 요소’, ‘인라인 요소’의
역할을 하도록 지정해줄 수 있다.
그 속성이 바로 ‘display’ 속성이다.

display 속성
요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.
즉, 요소의 유형을 변경할 수 있다.

예1) 블록레벨인 div요소를 인라인으로 처리하기
div{ display: inline; }

예2) 인라인 요소인 a요소를 블록레벨로 처리하기
a{ display: block; }

display 속성에 지정할 수 있는 대표적인 설정들

문서의 흐름

웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에서 태그가 쓰여진 순서를 따른다.

글을 쓸 때 왼쪽에서부터 오른쪽 방향으로 써나가고
글자 수가 채워지면 위에서 아래로 줄을 바꾸며 써내려가는 자연스러운 흐름이 있듯
웹 브라우저가 화면 위에 요소를 표시할 때에도 마찬가지로 이를 처리하는 기본적인 흐름이 있다.
글과 마찬가지로 왼-오 위-아래 동일한 흐름으로 진행된다.

float

css의 float 속성은 요소를 문서의 흐름에서 제외시킨 채 부모요소 또는 루트요소를 기준으로 위치를 변경한다.

선택한 요소가 문서의 흐름에서 제외되어
상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배지되도록 하는 특징이 있다.

사용가능한 속성값으로는 왼쪽을 뜻하는 left, 오른쪽을 뜻하는 right,
그리고 float를 적용하지 않는 none(기본값)이 있다.

(if) 이미지와 p태그를 순서대로 입력한다면
위쪽에 이미지 두 개, 아래쪽에 문장이 오게 될 것이다.

이때 float를 적용하게되면 요소를 잡아서 흐름과 무관하게 배치가 될 것이다.

float의 역효과

float 속성을 적용한 요소를 ‘부동 요소’라고 부르기도 한다.
부동요소는 잘 이용하면 유용하지만 위치를 이동하면서 float 요소를 사용하지 않은
요소들의 공간에도 영향을 주어 때로는 역효과를 가져올 수 있다.
이러한 상황에 대응하기 위해 사용하는 속성이 있다.
그 속성이 바로 ‘clear’ 속성이다.

위에서 예시로 들었던 (if)상황에서 float 요소를 사용하여 이미지의 위치는 배치를 하였다.
하지만 p태그의 위치가 애매하게 이미지의 사이에 들어갔을 것이다.

이때 clear속성을 사용하게 되면 p태그는 제자리로 돌아간다.

위치정하기

position은 문서 상에 요소를 배치하는 방법을 정의한다.
position이 요소의 배치 방법을 결정하면,
top, bottom.right,left 가 최종 위치를 결정하는 방식이다.

position: 이렇게 배치할거야;
top: 윗면에서부터 아래로 얼만큼 떨어트릴거야;
right: 오른쪽면에서부터 왼쪽으로 얼만큼 떨어트릴거야;
bottom: 아랫면에서부터 위쪽으로 얼만큼 떨어트릴거야;
left: 왼쪽면에서부터 오른쪽으로 얼만큼 떨어트릴거야;

박스모델의 4면을 기준으로 상하좌우 위치 지정은 필요에 따라 선택적으로 적용

position 유형

박스모델은 웹페이지의 요소를 박스 형태로 구성하고 요소의 크기와 공간배치를 설명하는 CSS의 핵심 개념이다.
모든 HTML요소는 박스 모델에 따라 배치된다.
각 요소는 4가지의 주요 영역으로 구성된다.

1.콘텐츠(Content)

요소의 실제 콘텐츠가 표시되는 영역이다.

2.테두리(Border)

박스를 둘러싸는 테두리
스타일, 두께, 곡률, 색상을 지정할수 있다.

3.패딩(Padding)

콘텐츠와 박스의 경계인 Border사이의 내부여백
콘텐츠에 대해 투명하며 색상을 지정할 수 없다.

4.마진(Margin)

박스의 가장 바깥 영역 인접한 요소와의 간격을 정의한다
패딩과 마찬가지로 색상을 지정할 수 없고 투명하다.

자바스크립트에는 변수 생성시 사용하는 3가지가 있다.
그 3 가지에는 'let', 'var', 'const'

하지만 이 3가지 중에서도 더이상 사용하지 않는 것이 있는데,
그것이 바로 오늘 이야기해볼 'var'이다.

기존에는 var를 적극 활용하고 사용해왔지만,
2015년 ES6에서 새 문법인 let과 const를 지원하게 되면서 var의 사용을 지양하라고 했다고 한다.

var에게 어떠한 문제가 있어서 새로운 문법을 제시하면서까지 사용을 지양하게 되었을까?

1.변수의 재선언

var는 같은 이름의 변수를 재선언 할 수 있다.
이렇게 되면 보기에도 복잡하고 실수를 할 수도 있는 상황이 발생한다.
실수를 하였을 때 한 눈에 확인하기에 어려움이 있다.

let과 const는 같은 이름의 변수의 재선언을 허용하지 않기 때문에
이러한 상황을 막으며 코드의 안정성을 높일 수 있다.

2.호이스팅(hoisting)

var로 선언된 변수는 선언 이전에 적혀있는 부분에도 접근할 수가 있다.
이 상황은 var를 사용하여 생긴 부작용이라고 볼 수 있다.
let과 const는 이를 자체적으로 막아주어 의도하지 않은 상황을 막을 수 있다.

3.스코프의 문제

var는 함수스코프를 가지며, 블록스코프는 지원하지않는다.
즉, 블록 내부에서 선언한 var 변수를 블록 외부에서도 접근할 수 있다.
이렇게 될 경우 의도치 않은 변수를 사용하게 되거나, 변수의 충돌이 일어날 수 있다.
let과 const는 블록 스코프를 따르게 되면서 이러한 문제점을 막았다.

정리해서 생각해보면 var는 옛날에 사용하던 옛날언어이다.
여러 부작용이나 단점들을 피드백하여 고친 후 새로 지원된 언어가
let과 const라고 생각하면 된다.

배경추가하기(background)

컨텐츠와 어울리는 적절한 배경을 추가함으로써 컨텐츠를 더욱 돋보이게 만들 수 있다.
박스모델에 배경으로 추가된 색상이나 이미지 등은 박스모델의 바깥쪽 여백을 제외한 나머지 영역안에서 요소의 컨텐츠를 뒷받침한다.

단축속성 background 의 하위 속성들

색상을 지정하는 방법

글자 색을 지정할 때에는 color속성을 사용하며 색 지정 방법은 글자 색, 테두리 색, 배경 색 모두에 대해 동일하다.

• 키워드:색상을 나타내느 키워드(영단어)를 입력
• rgb함수:rgb함수에 수치를 입력해 생산을 결정한다.
• hsl함수: hsl함수에 수치를 입력해 색상을 결정한다.
• 16진수값:빨강,초록,파랑의 비율을 16진수로 표현해 색상을 결정한다.

rgb 함수

빛의 3원색인 red, green, blue의 줄임말
빨강, 초록, 파랑 각 생상의 비율을 지정하여 색상을 결정할 수 있는 rgb함수와
투명도를 추가 지정할 수 있는 rgba 함수를 각각 지원한다.

rgb(레드값, 그린값, 블루값)

-%(per)수치로 많이 사용한다.

rgba(레드값, 그린값, 블루값, 투명도)

-a는 0~1 사이의 실수를 사용한다. 예)0.5
숫자가 올라갈수록 투명도가 높아진다.

hsl 함수

색조(hue)와 채도-탁함과 선명의 정도(saturation), 조도-밝기(lightness)를 각각 지정하여 결정하는 함수
마찬가지로 투명도를 추가로 지정하고자 할 때에는 hsla함수를 사용한다.

hsl(색조값, 채도값, 조도값)

-각도를 입력하여 색상을 선택하는 항목.

hsla(색조값, 채도값, 조도값, 투명도)

-a는 0~1 사이의 실수를 사용한다. 예)0.5
숫자가 올라갈수록 투명도가 높아진다.

16진수 값

해시(#)기호로 시작하는 여섯가지 16진수 값을 입력하는 방법
이때 입력하는 16진수 값을 ‘RGB 색상 코드’라고 부르기도 한다.

#RRGGBBAA

-레드,그린,블루,투명도 순서대로 2글자씩 주어진다. - 포토샵에서 주로 사용했던 코드
-16진수란 0 1 2 3 4 5 6 7 8 9 A B C D F 로 이루어져있다.
F는 15라고 생각하면 되고 00~FF까지로 이루어져있다. 이때 FF는 255라고 생각
예)#FFFFFF-흰색 #000000-검은색 (AA는 투명도라 생략가능)

글꼴바꾸기

font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용하는 속성이다.
font-family 속성에는 한 개 이상의 글꼴을 지정할 수 있다.
입력한 글꼴 뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력하는 방식으로 속성값을 지정한다.
이 경우 가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용된다.

웹 폰트사용하기

웹 폰트란 컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에도
웹 서버로부터 이를 제공받아 사용할 수 있는 ‘웹 전용글꼴’을 뜻한다.
font-family를 이용한 글꼴 적용시 잘못 입력된 글꼴이거나
시스템에 설치되어 있지 않은 경우에는 요소에 적용되지않는다.
하지만 웹 폰트를 사용하면 그런 문제가 발생하는 것을 방지할 수 있다.
-현재 사용하는 웹페이지가 주로 크롬이니 구글에서 제공하는 폰트를 사용하면 된다.
여기에 구글에서 제공하는 폰트가 웹폰트다.

텍스트 꾸미기

텍스트에도 크기, 색상, 정렬 방식 등의 다양한 속성이 존재한다.

단위 두 개더 알아보기

크기를 지정할 때에는 수치와 함께 단위를 지정하곤 한다. 이는 글자크기에 대해서도 마찬가지이다.

주말에는 신랑이랑 데이트하고 시댁에도 가고 하느라 바쁜 와중에도

블로그 작성하느라 너어어어무 바빴다...

진짜 주말이 순삭되버렸다.

그래서 결국 또 일요일에 새벽2시 넘어서 잤으니...

진짜 부시시하게 눈비비면서 일어나고

머리만 질끈 묶고 컴퓨터에 앉아서 수업을 시작했다.

9시 52분에 입실체크하고 공부를 시작했다.

CSS를 매우 기대했었던 주인장...

솔직히 단조롭기만 하던 화면들이

CSS를 사용하면 이쁘게 꾸밀 수 있다는데

어느 누가 기대를 안하겠는가...

기대하지말걸....

눈알빠지는 줄 알았다..

게다가 오늘은 필수과제가 2개 선택과제가 한개

총 과제가 3개가 있었다..

신랑도 필수과제만 하면되지 않냐 라고 물어봤지만

나의 성장을 위해서라면....

과제를 주시는데로 다 하는게 맞는거잖아...

(맞다고해줘 ㅠㅠㅠㅠ칭찬해줘ㅠㅠㅠㅠ)

사실은 첫번째과제는 어느정도 수월하게 해낼 수 있었다.

하지만 첫번째 과제를 끝내서인지 나의 집중력은 바닥을 드러냈고

두번째과제는 난이도도 높고 집중력이 떨어졌으니 

힘든건 당연지사...

매일 7시 이전에는 필수 과제 싹다 끝내고 일과 후에 블로그써야지~~

결심했던게 무섭게 9시 다되서야 과제가 끝이 났다..

9시에 입맛도 없어서 간단하게 맘마먹고

다시 자리에 앉아서 이때까지 밀린 블로그와 오늘치까지 빡 집중해서 작성하니 벌써 11시 50분....

내일 안힘들기위해서 오늘의 나는 내일의 수업을 예습하고 자야겠다...

그럼 20000~!!!

CSS

캐스케이딩 스타일시트(Cascading Stylesheet)

• Cascading:폭포같은, 계속되는, 연속적인
• Style: 멋을 내다.
• Sheet:한 장을 세는 단위(종이나 문서)

연속적으로 스타일을 정의하는 문서

CSS는 스타일을 정의하는 문서형식이다.
태그와 태그가 중첩되어 연속적인 구조를 지닌 HTML문서에 스타일을 추가한다.

CSS의 역할은 HTML 문서에 스타일을 추가하는 것이다.

CSS의 문법

HTML 코드가 다수의"태그"로 구성되는 것처럼, CSS코드는 다수의 '스타일 선언문'으로 구성된다.

스타일 선언문의 형태

• 선택자: 어떤 요소에 스타일을 적용할지에 대한 정보
• {중괄호}:선택한 요소에 적용할 스타일을 정의하는 영역
• 속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보
• 속성값: 어떻게 정의하고 싶은지에 대한 정보

CSS에게도 주석이 존재한다.

현재 우리가 사용하고 웹개발 표준으로 인정받고있는 CSS는 'CSS3'이다.

CSS문서

독립적으로 존재할 수는 있지만, HTML문서와 함께 사용하지않으면 단지 하나의 텍스트 문서에 불과할 뿐이다.
즉, 혼자서는 할 수 있는 일이 없다.
문서에 정의된 스타일이 웹브라우저 화면을 통해 보여지도록 하기위해서는 반드시 HTML문서 작성이 먼저 이루어져야한다.

HTML에 CSS를 더하려면

• 인라인 스타일:태그에 직접 기술하기
  태그에 style속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식
  제일 간단한 방법이고 선택자는 필요가 없으나 웹컨텐츠와 스타일시트를 분리하기위해서는 사용하지않는 편이 좋다.

• 스타일 태그 :스타일 시트를 위한 태그를 추가하여 기술하기
  HTML문서에 태그를 추가하여 그 안에 CSS코드를 작성할 수 있다. '내부 스타일시트'라고 표현하기도 한다.

• 문서간의 연결: 스타일 시트 문서를 따로 작성하여 HTML문서와 연결하기
  확장자가 *.css인 스타일 시트 파일을 생성해 그 안에 CSS코드를 작성하고,HTML문서에 이를 연결하는 방식.
  이때는 <link>태그를 사용한다.
  • href:연결하고자 하는 외부 소스의 url을 기술하는 속성
  • rel(관계):현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
  -<link>태그는 HTML문서의 <head></head>내부에서 사용해야함.

인라인 스타일은 우선적으로 적용이 된다.
인라인스타일이 아닌 경우 나중에 쓰여진 스타일 선언문이 적용된다.

선택자 유형

스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정된다.
이때 요소는 단 하나만 선택할 수도 있고 여러 개를 동시에 선택할 수도 있다.
CSS는 아래와 같이 여러가지 유형의 선택자를 지원한다.

• 전체 선택자:문서 내 모든 요소를 선택 - 사용기호: *
• 태그 선택자:특정 태그로 만들어진 모든 요소를 선택 - 사용기호: 태그명
• 클래스 선택자:특정 클래스 값이 지정된 모든 요소를 선택 - 사용기호: .클래스값
• 아이디 선택자:특정 아이디 값이 지정된 요소를 선택 - 사용기호: #아이디값
• 그룹선택자:여러 유형의 선택자를 한꺼번에 선택 - 사용기호: 선택자,선택자,선택자...
• 등등..

박스모델(box model)

브라우저 화면은 가로와 세로를 축으로 하는 2차원공간이다.
따라서 브라우저를 통해 렌더링 되는 웹 요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다.

너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현하고, 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다.

CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있으며
CSS는 영역별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공한다.

박스모델의 세부영역들

• 콘텐츠영역: 요소내에 포함된 콘텐츠를 표시하는 영역-width,height
• 안쪽여백: 테두리 안에서 콘텐츠 주변을 감싸는 여백-padding
• 경계선(테두리): 콘텐츠와 안쪽 여백을 둘러싸는 테두리-border
• 바깥쪽 여백:테두리 바깥에서 요소를 감싸는 여백-margin

테두리 스타일

테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있게 도와주는 유용한 영역이다.
테두리 스타일을 정의할 때에는 단축속성인 border를 사용하서나 border의 하위속성을 개별적으로 사용하는 방법을 사용한다.

• border-width : 테두리의 두께를 지정
• border-style : 점선,실선,겹선 등으로 테두리 모양을 지정
• border-color : 테두리의 색상을 지정
• border : 테두리의 두께, 모양, 색상등을 한번에 지정
• border-radius : 테두리 모서리의 곡률을 지정(그림에서 '반경'에 해당하는 길이를 정해주면 그만큼 둥글어진다.)
  네개의 모서리에 서로 다른 값을 지정할 수도 있다.

여백 다루기

여백의 안쪽, 바깥쪽 여부는 테두리를 기준으로 정해진다.
박스 모델의 여백에는 네 개의 면이 존재하는데, 속성값의 사용갯수에 따라 네면의 여백 크기를 달리 정할 수 있다,

1. 여백의 모든 면에 동일한 값을 지정 - (예)margin:10px
2. 위아래 여백과 왼쪽 오른쪽 여백의 값을 따로 지정 - (예)margin:10px 20px
3. 윗쪽 여백, 왼쪽 오른쪽 여백, 아래쪽 여백 순서로 값을 지정- (예)margin:10px 20px 15px
4. 위,오른쪽,아래,왼쪽 순서대로 각각 따로 지정 - (예)margin:10px 20px 30px 15px

width나 height를 사용하면 컨텐츠 영역의 크기를 결정할 수 있다.
여기에 padding 속성을 추가 정의 하면 여백이 생기면서 요소가 기존보다 더 커지게 되는데, 원치 않을경우에는 box-sizing이라는 속성을 사용할 수 있다.

시맨틱 마크업?코드?

바로 이전 글에서 시멘틱 코드에 대해서 간단히 다뤘었다.

시맨틱 코드가 시맨틱 마크업보다 더 넓은 의미라고 생각하면 된다.
이전에 다루었던 시맨틱 코드에 대하여 한번 더 복기 해보고 시맨틱 마크업에 대해 간단히 알아보는 시간을 가져보겠다.

시맨틱(의미론적인) 코드

다른점개발자와 브라우저에게 의미를 제공한다.
컨테이너코드와 역할이 거의 같지만 태그의 이름이 요소의 목적이나 역할을 강조하는 의미로 지어져있다라는 차이점이있다.
검색엔진에 좋은 단서가된다.

시멘틱태그의 장점

대부분은 컨테이너 태그(span/div)와 같이 특별한 스타일을 제공하지 않지만 아래와 같은 이점이 있다.

• 검색 엔진은 시멘틱 태그를 웹페이지를 검색하는데에 있어서 중요한 단서로 본다
• 적극적으로 사용하게되면 시각장애가있는 사용자가 화면판독기,음성인식기로 페이지를 탐색할때 참조가된다.
• 중요한 내용을 조금더 강조하는 효과가 있다. 웹 접근성을 향상 시킬 수 있다
• 코드의 가독성이 좋아진다.
  이름으로 역할을 강조하기때문에 코드를 볼때 조금더 빠르게 코드를 캐치할 수 있다.
• 컨테이너의 남용을 방지할 수 있어 코드쓰기가 편하다.
  • 컨테이너의 남용? 웹컨텐츠를 많이 페이지에 채우게되면 스타일이나 div가 많아짐
    많아지게되면 코드를 작성하기에도 불편해짐

시멘틱코드의 종류

• <articcle>-독립적인 컨텐츠
• <aside>-별도의 컨텐츠
• <details>-추가적인 상세정보
• <figcaption>-figure의 자막
• <figure>-설명이 붙는 독립컨텐츠
• <footer>-맺음말
• <header>-머릿말
• <main>-주된 (메인) 컨텐츠
• <nav>-네비게이션링크
• <section>-컨텐츠의 한 섹션(절)
• <summary>-detail의 헤더
• <time>-강조할 시간

시맨틱 마크업

의미

시맨틱이란 '의미론적인'이라는 의미를 가지고 있으며, 시맨틱태그는 개발자와 브라우저에게 어떠한 의미를 제공한다.
마크업이란 HTML 태그로 문서를 작성하는 것을 의미한다.
따라서, 시맨틱 마크업이란, 의미가 잘 전달 되도록 HTML태그를 사용하여 문서를 작성하는 것정도로 해석된다.

사용하는 이유

• 의미론적인 구조이기 때문에 '요소가 가진 목적이나 역할이 무언인지'를 나타내준다.
• 검색의 최적화를 높여준다. 검색엔진은 시멘틱태그(태그명)을 중요한 단서로 본다.
  (웹페이지는 제작도 중요하지만, 검색을 통해 다수의 유저들에게 노출되고 사용되는 것이 더욱 중요하다)
• 코드의 가독성을 높여준다.
• 컨테이너(div 또는 span)의 남용을 방지할 수 있어 코드 작성이 용이함.
• 시각 장애가 있는 사용자가 화면판독기로 페이지를 탐색할 때 참조된다.

form(양식)이란?

입력양식이 사용된 페이지의 예
• 로그인 페이지
• 회원가입페이지
• 검색어입력페이지

서버

form

입력요소들을 감싸고, 입력 값을 서버측으로 제출(submit)하는 역할을 하는 태그
안에 다양한 입력태그들을 포함시키면 해당 입력요소들은 양식의 개별 항목으로써 역할을 수행한다.

단순히 폼 요소안에 입력요소를 포함한 것만으로는 서버에 입력 값을 전송할 수 없다.
역할을 수행하기 위해서는 아래의 속성을 사용해야한다.

• action:입력값을 전송할 서버의 주소(url)
• method:클라이언트(사용자)가 입력한 데이터를 어떤 방식으로 전송할지(GET or POST)

method

• GET:서버에 요청을 보내서 응답을 받아낸다.
  서버로부터 정보를 '가져온다'라는 성격의 요청
• POST:서버에 요청을 보내어 작업을 수행한다.
  서버에 있는 데이터를 추가,수정,삭제한 후에 응답을 받아낸다.
  서버의 정보를 '조작한다'라는 성격의 요청

이름을 반드시 지어줘야함

화면상 입력요소의 모양은 바뀌는 게 없으나 추후 실제로 서버에 데이터를 전송하는 작업을 하였을때에 상당히 중요하다.
서버가 정보를 받으면 name속성으로 항목을 구별하기 때문

시맨틱(의미론적인) 코드

다른점개발자와 브라우저에게 의미를 제공한다.
컨테이너코드와 역할이 거의 같지만 태그의 이름이 요소의 목적이나 역할을 강조하는 의미로 지어져있다라는 차이점이있다.
검색엔진에 좋은 단서가된다.

시멘틱태그의 장점

• 검색 엔진은 시멘틱 태그를 웹페이지를 검색하는데에 있어서 중요한 단서로 본다
• 적극적으로 사용하게되면 시각장애가있는 사용자가 화면판독기,음성인식기로 페이지를 탐색할때 참조가된다.
• 중요한 내용을 조금더 강조하는 효과가 있다. 웹 접근성을 향상 시킬 수 있다
• 코드의 가독성이 좋아진다.
  이름으로 역할을 강조하기때문에 코드를 볼때 조금더 빠르게 코드를 캐치할 수 있다.
• 컨테이너의 남용을 방지할 수 있어 코드쓰기가 편하다.
  • 컨테이너의 남용? 웹컨텐츠를 많이 페이지에 채우게되면 스타일이나 div가 많아짐
    많아지게되면 코드를 작성하기에도 불편해짐

시멘틱코드의 종류

• <articcle>-독립적인 컨텐츠
• <aside>-별도의 컨텐츠
• <details>-추가적인 상세정보
• <figcaption>-figure의 자막
• <figure>-설명이 붙는 독립컨텐츠
• <footer>-맺음말
• <header>-머릿말
• <main>-주된 (메인) 컨텐츠
• <nav>-네비게이션링크
• <section>-컨텐츠의 한 섹션(절)
• <summary>-detail의 헤더
• <time>-강조할 시간

meta

HTML문서에 대한 메타데이터를 정의한다.

메타데이터란 데이터에 대한 데이터, '정보'를 의미한다. meta태그는 항상 head 태그의 안에 들어가며, 문자세트, 페이지설명,키워드,문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다.
없어도 페이지는 잘만들어지지만 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색결과에도 반영할 수 있다.
실무에 들어가게되면 페이지를 만드는 것뿐만 아닌 실제로 사용자들이 사용을 하는 웹을 만들어야하니 반드시 필요한 사항이다.

메타데이터의 유형과 속성

• charset:문자세트
  문자인코딩에 대한 요약정보를 기입하는 속성
  문자인코딩이란 한글을 표시하기위해 문자세트를 지정하는 작업으로 영문과 한글을 모두 사용하기위해 utf-8방식을 사용하는 것이 좋다.
  
  인코딩을 명확히 기입하지않으면 웹븡라우저 설정상황에 따라 자동으로 인코딩을 추정해서 처리한다.
  문자가 깨질 가능성이 생긴다.


• http-equiv:컨텐츠 속성정보에 대한 http 헤더
  HTTP란 인터넷에서 데이터를 주고받을 수 있는 프로토콜(약속)이다.
  정보를 송수신할때 사용하는 기술적인 방법.
  해당속성에 http관련정보를 지정하면,'content'라는 속성에 그에 대한 정보(값)을 지정한다.
  지정되어있는 값이 해당정보의 역할을 수행하게 된다.


• name: 문서정보
  form 에서는 입력요소간의 구분을 위해 사용이 된다.
  meta에서는 속성을 이름으로 content속성을 값으로 하여 문서정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.
  검색최적화에 도움이 되는 작업이다.


• content:메타데이터 내용