HTML 인라인 요소와 블락

• HTML Inline 요소는 height, width, text-align 요소가 적용되지 않는다.
• HTML Block 요소는 vertical-align이 적용되지 않는다.

Inline Level 요소

• 인라인 요소는 항상 블록 요소안에 포함되어 있으며, 인라인 요소안에 다른 인라인 요소가 포함될 수 있음.
• 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 됨, 그래서 임의로 width, height로 변형을 줄 수 없음
• 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있음
• 인라인 요소 다음에 줄바꿈이 없고 우측으로 바로 이어서 표시
  a, abbr, acronym, audio, b, br, button, cite, code, data, datalist, del, em, embed, i, iframe, img, input, ins, label, map, mark, meter, object, output, pircture, progress, q, script, select, slot, small, span, strong, sub, sup, svg, template, textarea, time, u, tt, var, video, wbr

Block Level 요소

• 블록 요소는 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 가능
• 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 됨
• width, height, margin, padding 등 사용하여 형태를 변형하여 레이아웃 수정 가능
• 블록요소
  address, article, aside, audio, blockquoter, canvas, dialog, dt, dd, dl, div, fieldset, figcaption, figure, footer, form, h1~h6, header, hgroup, hr, noscript, main, nav, ol, output, p, pre, section, table, ul, video
  가 있음

HTML 구획과 시맨틱 요소

구획을 나누는 태그

<div> : division

Semantics - 의미가 부여된 태그

Semantic Tag가 중요한 이유

• SEO(Search engine optimization): 검색을 최적화하기 위해서 제목, 부제목 등 시맨틱 태그를 잘 활용하면, 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있다. 브라우저의 검색엔진이 어떤 검색 결과에 띄워줘야 될지를 알려줄 수 있음
• 웹 접근성: 웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 웹사이트를 이용하는 경우, 시맨틱 태그로 만들어진 웹사이트는 잘 동작함
• 유지보수성: 단순히, div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수 있기 때문에 개발자들이 유지보수하기가 더 편해짐.
  
  <header>
<nav>
<main>
<aside>
<section>
<article>
<footer>

HTML Form

<form>

• 폼 태그 속성에는 name, action, method, target, accept-charset 이 있음.
• name: 폼을 식별하기 위한 이름
• action: 폼을 전송할 서버 쪽 스크립트 파일을 지정
• target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
• method: 폼을 서버에 전송할 http 메소드를 지정(GET 또는 POST)
• accept-charset: 폼 전송에 사용할 문자 인코딩을 지정

폼 요소

<fieldset>

• 폼 태그 안에 관련 있는 폼 엘리멘트들을 그룹화 할때 사용.
• fieldset 하위에 <legend>태그를 사용하여 그룹화한 폼 엘리멘트들을 목적에 맞게 이름을 지정
  

<label>

• Input 태그와 같이 자주 사용되며, 해당 폼 속성의 항목명을 표시함.

<input>

• type: 태그 모양을 변경할 수 있음(text, radio, checkbox, password, button, hidden, fileupload, submit, reset)

<select>, <optgroup>, <option>

• 목록태그로 항목을 선택할 수 있는 태그임
• size: 한 번에 표시할 항목수를 의미
• multiple: 다중선택 허용 여부
• optgroup: select 태그 안에서 목록들을 그룹화 할 경우 사용
• option: optgroup 태그 하위에 사용 또는 select 태그 하위에 사용하며, 목록을 표시해줌.

<textarea>

• 여러 줄을 입력받는 태그임
• rows, cols: 한 줄에 입력될 크기를 지정함

<datalist>

• 텍스트 상자에 입력 값 후보 목록을 지정할 경우 사용

<date>

• 날짜를 입력받기 위한 속성값. 서버 프로그램에 전달되면 date 객체에 바로 데이터가 전달 됨
  <number>, <range>
• 둘 다 숫자를 입력할 때 사용. 차이점으로 range태그는 슬라이더 형태의 UI로 렌더링 된다는 점임
  <color>
• Color Picker 형태의 UI렌더링으로 표시됨.

CSS 소개 및 사용방법

CSS: Cascade Style Sheet

• HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어임
• CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정함.

CSS 코드 사용

참고 사이트 및 툴

JS Fiddle
VSCode Extension: Live Server Preview

CSS 선택자

선택자의 종류

• 선택자란 HTML요소를 선택해주는 요소임. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됨

Tag 선택자

• 태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자
• <p>, <div>, <span> ==>> p {color:blue}; div {font-size: 16px;} ... 등

Class 선택자

• 클래스 선택자는 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택함
• 선택하려는 속성값 앞에 마침표(.)를 추가해서 작성해야 함
• .box {width: 100px; height: 100px;}

Id 선택자

• id선택자는 마침표 대신 #을 사용하고, class속성이 아닌 id속성을 사용하는 것을 제외하곤 클래스 선택자와 유사함
• #menu {margin: 0, padding: 20px;}

attr(속성) 선택자

• 태그 안의 특정 속성들에 따라 스타일을 지정함
• 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있음
  div[attr="val"]: 'attr 속성의 값이 정확하게 'val'과 일치하는 요소 div를 선택함
  div[attr~="val"]: 'attr 속성의 값에 'val'이 포함되는 요소 div를 선택함(공백으로 분리된 값이 일치해야함)
  div[attr^="val"]: 'attr 속성의 값이 'val'으로 시작하는 요소 div를 선택함
  div[attr$="val"]: 'attr 속성의 값이 'val'으로 끝나는 요소 div를 선택함
  div[attr*="val"]: 'attr 속성의 값에 'val'이 포함되는 요소 div를 선택함
  div[attr|="val"]: 'attr 속성의 값이 정확하게 'val'이거나, 'val-'으로 시작되는 요소 div를 선택함

복합 선택자

자손 선택자

E F]: E 요소의 자손인 F 요소를 선택함

자식 선택자

E > F]: E 요소의 자식인 F 요소를 선택함

인접 형제(바로 다음 동생) 선택자

E+F]: E 요소를 뒤따르는 F요소를 선택함
E~F]: E 요소가 앞에 존재하면 F를 선택함(E가 F보다 먼저 등장하지 않으면 선택하지 않음)

전체 선택자

* {font-family: sans-serif}: HTML 전체를 선택자로 함

psudo(가상) 클래스

언어 선택자

div::lang(ko)]: HTML lang 속성의 값이 'ko'으로 지정된 요소를 선택함

부정 가상 클래스

div::not(S)]: S가 아닌 div 요소를 선택함

순서 관련 가상 클래스

• 구조적 가상 클래스라 하며, 선택자는 위치를 기준으로 함. 그래서 요소가 몇번째에 있느냐에 따라 스타일을 다르게 지정할 수 있게 해줌
  div::root]: 문서의 최상위 요소(html)을 선택함
  div::nth-child(n)]: 앞으로부터 지정된 순서와 일치하는 요소가 div라면 선택함
  div::nth-last-child(n)]: 뒤로부터 지정된 순서와 일치하는 요소가 div라면 선택함
  div::nth-of-type(n)]: div 요소 중 앞으로부터 순서가 일치하는 div 요소를 선택함
  div::nth-last-of-type(n)]: div 요소 중 끝으로부터 순서가 일치하는 div 요소를 선택함
  div::first-child]: 첫 번째 등장하는 요소가 div라면 선택함
  div::last-child]: 마지막에 등장하는 요소가 div라면 선택함
  div::first-of-type]: div 요소 중 첫 번째 div를 선택함
  div::last-of-type]: div 요소 중 마지막 div를 선택함
  div::only-child]: div 요소가 유일한 자식이면 선택함
  div::only-of-type]: div 요소가 유일한 타입이면 선택함
  div::empty]: 텍스트 및 공백을 포함하여 자식 요소가 없는 div를 선택함

링크 선택자 및 동적 선택자

div::link]: 방문하지 않은 링크 div를 선택함
div::visited]: 방문한 링크 div를 선택함
div::active]: div 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 div를 선택함
div::hover]: div 요소에 마우스가 올라가 있는 동안 div를 선택함
div::focus]: div 요소에 포커스가 머물러 있는 동안 div를 선택함

UI요소 상태 선택자

div::enabled]: 사용 가능한 폼 컨트롤(input, textarea, select, button) div를 선택함
div::disabled]: 사용 불가능한 폼 컨트롤(input, textarea, select, button) div를 선택함
div::checked]: 선택된 폼 컨트롤(input checked="checked")을 선택함

CSS 우선순위

• 인라인 > id > class > tag

CSS 레이아웃

Position: 위치 관련 스타일

• position 속성은 요소들을 자유자재로 배치해 주는 속성으로, 이를 이용하면 텍스트나 이미지를 나란히 배치할 수 있고, 가로나 세로로 원하는 위치에 배치할 수 있음
• static: 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태로 요소를 문서의 흐름에 맞추어 배치함
• relative: relative로 지정된 요소는 left와 top 속성으로 이동할 수 있으며, absolute로 지정된 요소의 부모 역할을 함
• absolute: 다른 요소와 겹칠 수 있고, left와 top 속성을 이용하여 부모 박스를 기준으로 원하는 위치를 지정함
  position:relative와 float:left는 함께 쓸 수 있지만, position:absolute와 float:left는 함께 쓸 수 없음
• fixed: 요소의 위치를 화면(뷰포트) 기준으로 지정한 위치에 고정해 배치해줌

display: 요소를 보여주는 방법

• display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성임
  display: none: 화면에 사라지며, 영역도 사라짐
  display: block: 일반적으로 설정하지 않아도 div가 갖게되는 기본값임. 기본적으로 width가 자신의 컨테이너의 100%가 되게끔 함.(즉, 가로 한 줄을 다 차지함)
  display: inline: 컨텐츠를 딱 감쌀정도의 크기만 갖게 됨. block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨테츠를 감싸게 되고, 크기를 변화시킬 수 없음.
  display: inline-block: inline과 block의 특성을 합쳐놓은 속성임. 기본적으로는 inline 속성을 지니고 있지만, 임의로 크기를 바꿔 줄 수 있음.

CSS Grid

CSS Grid는 CSS Flex와 같이 Container와 Item이라는 두 가지 개념으로 구분되어 있음
Container는 items를 감싸는 부모이며, 그 안에서 각 item을 배치할 수 있음
display: grid : 그리드 컨테이너(container)를 정의
grid-template-rows: 4 : 명시적 행(Track)의 크기를 정의
grid-template-columns: 4 : 명시적 열(Track)의 크기를 정의
grid-template-areas: 4 : 영역(Area) 이름을 참조해 템플릿 생성
grid-template : grid-template-xxx 의 단축 속성
row-gap: 4 : 행과 행 사이의 간격(Line)을 정의
column-gap: 4 : 열과 열 사이의 간격(Line)을 정의
gap: xxx-gap의 단축 속성
grid-auto-rows: auto: 암시적인 행(Track)의 크기를 정의
grid-auto-columns: auto: 암시적인 열(Track)의 크기를 정의
grid-auto-flow: row | column | ...: 자동 배치 알고리즘 방식을 정의
grid: grid-template-xxx과 grid-auto-xxx 의 단축 속성
align-content: center: 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content: center: 그리드 콘텐츠를 수평(행 축) 정렬
place-content: center: align-content와 justify-content의 단축 속성
align-items: center: 그리드 아이템(items)들을 수직(열 축) 정렬
justify-items: center: 그리드 아이템들을 수평(행 축) 정렬
place-items: center: align-items와 justify-items의 단축 속성