HTML, CSS, JavaScript
블록체인 부트캠프 1, 2주차 정리
react 들어가기 전 정리!
모든 내용을 상세하게 정리하지는 않음. 나중에 필요할 때 참고할 수 있을 정도의 키워드 위주
HTML, CSS, JavaScript
- HTML
자주 사용하는 HTML 요소
div, span, img, a, ul, li, input, textarea, button, …
Semantic Tags (의미가 있는 태그)
header, nav, main, footer, …
- CSS
selector
전체 셀렉터 : *
Tag 셀렉터 : tagname, tagname, …
ID 셀렉터 : #ID
class 셀렉터 : .classname
attribute 셀렉터 : tag[attribute]
후손 셀렉터 : pSelector cSelector (공백 구분)
자식 셀렉터 : pSelector > cSelector
인접 형제 셀렉터 : selector + selector
형제 셀렉터 : selector ~ selector
가상 클래스 : selector:link(visited, hover, active, focus)
요소 상태 셀렉터 : input:checked + span, …
구조 가상 클래스 셀렉터 : first-child, last-child, nth-child, …
부정 셀럭터 : not( )
정합성 확인 셀렉터 : input[type=“text”]:valid(or invalid)
절대 단위 : px, pt, …
상대 단위 : %, em, rem, ch, vw, vh, …
박스 모델
block, inline, inline-block
border, margin, padding
레이아웃
수직, 수평 분할
레이아웃 리셋
* {
box-sizing : border-box;
}
/*여백과 테두리 두께를 박스 사이즈에 포함 시키기*/
body {
margin : 0;
padding : 0;Flexbox
display: flex;
flex-direction: row(or column)
flex: grow shrink basis
justify-content
align-items
Wireframe과 Mock-up
- JavaScript
DOM(document object model)으로 HTML 조작하기
CRUD
Create - createElement
Append - append, appendChild
Read - querySelector, querySelectorAll
Update - textContent, classList.add
Delete - remove, removeChild
이벤트 객체
사용자 입력 (onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체
onsubmit, onchange, onmouseover, onkeyup, event.preventDefault
