웹 개발
HTML, CSS, JS
HTML은 웹 페이지의 구조를 담당한다.
CSS는 디자인 요소, 스타일을 담당하며
JS는 유저(사용자)와의 상호작용을 담당하게 된다.
HTML 언어로 뼈대를 짓고, CSS로 살을 붙여서, JS로 생명을 불어넣는다고 생각할 수 있다.
HTML
HTML(HyperText Markup Langue)은 문서의 구조, 틀을 만드는 언어이다.
기본적으로 HTML은 tag들의 집합인데, 여기서 tag는 부등호로 묶인 요소들을 말한다.
<div></div> <h1></h1> <span></span>등 수많은 tag들이 존재한다.
html은 Tree Structure, 트리구조로 이루어져있다.
간혹, Self Closing 하는 tag들이 있는데,
<img src='img파일의이름.확장자' />처럼, 따로 닫는 태그가 필요하지 않은경우, 셀프 클로징 하기도 한다.
(위의 img 태그에서 / 는 삭제되어도 문제가 발생하지 않는다.)
여기서, 자주 사용하는 태그들의 경우
이 사이트에서 확인할 수 있다
몇가지 태그들
<div> ~~~ </div> // div태그와 span태그는 유사하지만 div태그는 한줄을 차지합니다.
<span> ~~~ </span> // span태그는 컨텐츠 크기만큼 공간을 차지합니다.
<img src='img파일의 value'> // img태그는 self-closing이 가능하고, 이미지를 집어넣을 때 사용합니다.
<a href='https://~~'> //a 태그는 링크를 삽입할때 사용하고, self - closing이 가능한 tag입니다.
<ul> //unordered list 순서가 필요없는 목록을 만들 때 사용하는 tag입니다.
<ol> //ordered list 순서가 필요한 목록을 만들 때 사용하는 tag입니다.
<li> //list item 위 두 태그의 목록을 나열할 때 사용되는 tag입니다.
<input> // input과 textarea 는 입력 폼을 만듭니다
<text area> //아래에서 input tag가 어떤 식으로 실행되는지를 확인 할 수 있다.
<input type="text" placeholder="type">이것을 이용해 id pass를 입력하는 창도 만들 수 있을 것이다.
<input type="text" placeholder="type">
<input type="password">여기서, textarea을 사용한다면 줄바꿈이 가능해진다.
<textarea> </textarea>
(textarea태그가 적용되지 않아 img파일로 대체)
<input type="radio" name="choice" value="a">a
<input type="radio" name="choice" value="b">b<input type="checkbox" >a
<input type="checkbox" >bcheckbox와 radio의 차이는 radio는 한개만 선택할 수 있고, 해제가 불가능 한 반면, checkbox는 다수를 선택할 수 있으며, 체크의 해제가 가능하다.
(현재 velog에서는 오류인지 제대로 작동하지 않는다.)
<button>마지막으로 버튼</button>
(버튼도 태그가 제대로 작동하지 않아 사진으로 대체)
시맨틱 요소
시맨틱이란 '의미가 있다'는 뜻이다. 즉, 시맨틱 요소란 의미를 가진 요소라는 뜻인데. <h1>을 예로 들자면, css를 이용해 글자를 <h1>코드를 받은 글자와 같은 형태로 만들 수는 있지만, <h1>의 의미적 요소, 제목이라는 내용물이 없는 단순한 글자로 취급될 것이다.
이 의미적 요소로 인해 내용물에 들어갈 것을 예측하기도 쉽고, 검색 엔진등에서도 훨씬 유리한 부분을 가지게 된다.
몇가지 시멘틱 요소를 들자면
<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다.
특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며,
사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며,
사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다.
보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.세상엔 수많은 시맨틱 요소들이 있지만, 그 전부를 알고 있을 필요는 없다.
필요할 때 찾아서 사용할 수 있는 능력이 있다면 충분하다.
