display:flex -> 말그대로 텍스트형식을 제외한 엘리먼트 자체를 인라인 가로형태로 일렬로 정렬하는 기능 (화면구성)
h1, p tag같은 텍스트를 다루는 tag들을 가운데 정렬 할 때는 text-align:center 이용
text-align:center : 텍스트형식의 엘리먼트를 가운데로 정렬하는 형태 ex) html(p , h1~h7) 등등 이렇게 쓰는 이유는 텍스트 엘리먼트는 display 형식이 먹히지 않기 때문
이미지 사이즈 측정: chrome 플러그인 'page ruler redux'
input에 클릭시 전부 테두리 없애고 싶으면 reset.css 파일에다가 아래 붙여넣기 input:focus { outline: none; }
다른 파일 만들면 import (연결)하는 것 잊지 말기!
# pseudo element
가상 클래스 선택자(pseudo element)
:not()→ 뭔가가 적용되는 걸 원하지 않을 때 사용한다.
[ ] 사이에 쓰인 것들은 특성 선택자(attribute selector)이다. - cursor:pointer;로 버튼 위의 커서를 변경할 수 있다. - color:inherit;는 부모로부터 색을 상속받는 것이다.
cascading 순서 주의하기!
inherit = 부모로부터 색을 상속받는 것
form의 특성 ex) </form action="" method="" class=""> - action: 어떤 페이지로 data를 보낼지 결정 가능 ex.action="friends.html" -> 프렌즈 파일로 이동 - method: 두 가지 방식이 있다. 1) POST:백엔드 서버에 정보를 전송하는 방법 (지금 프로젝트는 서버를 갖고 있지 않아서 사용x) 2) GET: 보안에 취약함. url에 포함돼도 상관없는 정보를 보내는 방식. (username이나 pw는 x) ex. method="get" ->유튜브 클론코딩에서 get과 post에 대해 더 알게 될 예정 (form을 많이 씀)
