DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (1)

css-Flex Box 알면 도움된다

 

모두다 마스터 할 필요는 없다

 

Mark up언어 : 구조적으로 작성된것

 

head : 상세설명

body : 사용자에게 보여지는 tag로 이루어져 있다

 

MDN : 사이트 추천

 

validator.w3.ort : Html오류가 있는지 검증 해주는 사이트

 

Document and website structure:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

 

Box : 웹사이트는 box들로 이루어져 있다 

 

 

 

Jsbin : https://jsbin.com/?html,output

 

href : 링크하고싶은 주소입력

 

Target : 어디에 이 페이지를 열건지 ( _black : 새로운창에서 열기 )

 

<p></p> : 문단을 정의할때 씀

 

<span> : _inline

 

<div> : black

 

 <ol> : 정리된 리스트

 

<ul>: 정렬되지 않은 리스트

 

<input> : 사용자에게 입력을 받을 수 있는값 (lable과 같이사용한다. 사용자에게 어떤정보를 원하는지 명확히알기위해) (input은 여러 개 있을 수 있기때문에 고유 ID값을 주는 경우가 많다 label에게)

 

 

 

검색 팁 : mozilla input type ( input type에 따라 사용자에게 원하는 입력값을 받을 수 있다)

 

Box로 나눠보기

 

박스를 어떻게 나누었는지 확인하고 싶으면 developer tool에서 확인 할 수 있다

 

 

----------------------------------------------------------------------------------------------

Css - Cascading Style Sheets 

 

Important : 가능하면 쓰지 않는것이 좋다

 

선택자 : html에 어떤tag를 골를건지 규정하는 문법

 

* : 모든tag를 선택

Tag : ex) div tag를쓰면 모든 div를 다 골라내는것

ID : #id를 모두 골라냄

Class : .class 닷을 이용함

State: :

Attribute : [] 해당하는 속성값만 고를 수도 있음

 

*tag보다 li tag가 우선순위가 높다 ( tag 가까이에 있는 속성이 우선순위 )

 

Div : block 레벨 element

 

 

Padding: 컨텐츠 안에 스페이싱

(padding-top // padding-right 설정가능)

 

시계방향으로 top - right - bottm - left 차례대로 한번에 입력값을 줄 수 있다

 

Margin : 컨텐츠 밖에 들어가는것

 

Border : 값을 한줄에 다 넣을 수 있다

 

CSS Properties Reference :

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

 

css연습사이트

https://flukeout.github.io/