HTML
Html: 웹페이지의 기본 틀, 뼈대라고 이해 하면 좋을것 같다.
<html lang=""> :웹페이지 검색시 어떤 언어를 사용하는지 보여준다.CSS
웹페이지를 보다 보기 편하게 보여주는 (Html을 디자인 해주는 역할)
Html이 뼈대라면 Css는 근육에 비유하는게 좋은것 같다.
JavaScript
웹페이지를 똑똑하게 변화 시켜 주는데 쓰임
Javascript는 사람의 기관으로 비유하자면 뇌가 가장 적절할것 같다.
HTML
ui : 순서 없는 리스트에 사용
<li></li> : 태그를 이용하면 간단한 분류가 됨
ol :순서있는 리스트 (숫자가 적용됨)
<li></li> :태그를 넣어 줘야 작동함
li(ul,ol) 에서 사용 되는 태그
a :anchor 돛 // 링크를 가져 올때 사용함
<a href=""></a> : 사이트 이동
<a href=""></a> + <a target="_blank"></a> : 새로운 탭으로 사이트 이동
<img src=""/> : 이미지 태그
<meta/> : 부가적인 설명 태그 실질적으로 구현하는 기능은 없음
<meta content=""/> : 컨텐츠
<meta name=""/> : 이름
<meta charset="UTF-8"/> : 웹 글자 지원
<form></form> : html에서 굉장히 중요한 태그
form 태그 안에 들어가야 제대로 작동한다.
<input placeholder=""/> : input 안에 글자를 넣어줌
<input required placeholder=""/> : 입력란 작성 필요
<input type=""/> : type을 정함 text,password,date,등 많은 것들이 있음
<label for=""></label> : for와 id가 같은 값이여야
<input id=""/> 둘다 적용이 됨
<input type=""file"/> : 파일 첨부 태그
<input type="file" accept=""/> : 파일 첨부 양식 설정
image만 원한다면 accept="image/*"
<div></div> : 줄 바꿈. 해당 태그에 들어가는 태그들을 묶어주는 역할
div만 사용 했을시 아무 의미 없는 태그
블럭 레벨요소 . 주로 긴글 , 문장에 쓰이면 유용
div에 직접적으로 display를 하지 않고 부모에 적용한다.
div안에 자식이 생길 겨우 div에다가 적용한다.
Display: flex; 적용뒤에 justify-content, align-items 를 적용할수 있음!!
그리고 이때 height를 px이 아닌 vh로 적용하자.
모든 기기에 화면 적용이 능동적으로 된다.
<span></span> : span만 사용시 아무 의미 없는 태그
인라인 요소 . 주로 짧은 글 , 단어에 쓰이면 유용class: 여러가지 태그를 포함할수 있다.(중복 사용 가능)
.(해당 클래스)
ex:)
.tomato (class="tomato")
id:어떤 태그에든 넣을수 있지만 한가지의 태그만 포함할수 있다.
태그는 하나의 id만 가질수 있다.(중복 사용 불가)
#(해당 아이디)
ex:)
#tomato (id="tomato")
inline인 태그들 a,span,img 이를 제외한 태그들 대부분 block이다.
태표적인 태그 div가 있다.
Display 설정으로 바꾸수 있다.
(Display:inline; 또는 Display:block;)
꿈꾸는 개발자