HTML
HTML 은 웹의 구조를 표현하기 위한 언어이다. HTML 은 트리구조로 되어있고 여러 Tag로 이루어져 있다. Tag는 opening tag 가 있으면 꼭 closing tag가 있어야한다.
메인 Tag
<!DOCTYPE html> - HTML5 라는걸 명시해줌 <meta> - Metadata - 구조화된 데이터. It always go inside the header tag. It is data(information) about data, so it used to specify character set, page description, keywords, author of the document, and viewport settings. <html> - root element, 맨위에 있는 부모트리. <div> - Division -한줄을 차지함. <span> 컨텐츠 만큼의 공간을 차지함. <ul> - unordered list - 순서가 정해져 있지 않은 리스트 <ol> - ordered list - 순서가 정해져 있는 리스트 <li> - list - element들의 리스트. <script> - HTML 안에서 자바 스크립트 코드를 실행하기위한 태그 <img> - Image - html 안에 사진을 넣기 위한 태그. <section> - 단독으로 큰 의미 단위가 될수 있다. 하나의 구역을 구분하는데 사용함. (The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.) <a> - Hyperlink to web gages, 링크 사용 가능하게 해줌. <p> - Paragraph- 문단을 표현하기 위해 사용함. <form> - 상호작용을 하기 위한 태그, 사용자가 입력을 하면 전달할수 있다. (박스). <header> - 첫 글머리를 표현하기 위해 사용된다. 로고, 이름 등 사용할수 있다. <h1> ~ <h6> - header를 6단계로 표현할 수 있다. h1이 제일 큰 글자를 표현하며 h6로 갈수록 글자의 크기가 작아진다. <main> - 문서의 Body를 담당함. <nav> - navigation links - 한페이지에서 다른페이지로 넘어갈수 있게 네비게이션 담당을 한다. <aside> - 메인 문저의 한쪽 부분을 따로 담당해서 표현해줌. (sidebars, sectioning content). <footer> - 작성자의 정보나 복사 데이터 링크 등 꼬릿말을 표현할때 쓰는 태그.
HTML Sementic Tag
HTML5 에서 제공하는 태그. 코드의 가독성을 높이고 의미를 명확하게 해준다.
Non-semetice Tag -
and . They tell nothing about its content.
Semantic tat - , and they have clearly defines its content.
Semantic tat - , and they have clearly defines its content.
Class & Id
class와 ID의 차이점은 Class 는 여러개를 사용할수 있지만 ID는 고유성을 갖고 있으므로 한문서에 한번만 사용 할 수 있다. Class는 전체적인 스타일을 일관성 있게 지정하기 위해 사용. 고유한 element를 사용할때는 ID를 사용, 고유하지 않고 계속 반복 되는 element를 사용할 경우 class를 사용하면 편리함. class에는 공백을 이용하여 여러개의 이름을 부여할수 있음. class 는 .을 id 는 #을 이용하여 사용하여 호출 할 수 있음.
CSS (Cascading sytle sheets).
HTML 은 웹의 구조를 담당하면 CSS는 구조화가 된 HTML의 스타일을 담당한다. CSS는 독립적으로 실행 되지않고 반드시 구조화된 HTML이 필요하다.
CSS 는 단지 프로트 엔지니어들을 위한 부분이 아니다. 백엔드도 물론 최소한 UI이 정도는 만들줄 알아야한다.
CSS 박스모델
Margin(바깥여백) ->Boder(테두리) -> Padding(안쪽여백) -> Content 순으로 구성되어있음.
순서대로 top, right,bottom,left 로 구성되어있음
Ex) margin: 20px,40px,60px,80px(시계방향).
margin 또는 Padding일때
만약 두개의 값만 입력했을 경우 top과 bottom 으로 설정 됨.
하나의 값만 입력했을 경우 모든 방향에 적용됨.
Boder 일때
Border-width(테두리 두께) -> Border style(테두리 스타일) -> Border-color(테두리 색상) 순으로 배치함.
Ex) border : 20px solid black;
