Reset CSS
- 리셋 CSS는 CSS 파일이다. 브라우저에 기본적으로 적용되어 있는 스타일을 초기화 해준다.
- 먼저 브라우저 스타일을 없애고, 직접 디자인 하는게 더 좋은 방법이다.
- styles.css에서 작성한 한 부분도 따로 css파일을 만들어 분리해주는 것이 깔끔하게 작업할 수 있는 방법이다. → CSS 코드를 여러 파일로 분할했다가 다시 합친다.
기타
- 모든 input에 focus를 없앨 것이기 때문에, reset.css에 input:focus{ outline: none; }을 적용한다.
- 어떤 css파일이건 styles.css에 적용시키고 싶다면, 반드시 import를 해줘야 한다.
- 가상 클래스 선택자(pseudo element)
- :not()→ 뭔가가 적용되는 걸 원하지 않을 때 사용한다.
- [ ] 사이에 쓰인 것들은 특성 선택자(attribute selector)이다.
- cursor: pointer;로 버튼 위의 커서를 변경할 수 있다.
- color:inherit;는 부모로부터 색을 상속받는 것이다.
Form의 아주아주 중요한 2가지 속성이 있다.
- action: 어떤 페이지로 data를 보낼건지 지정할 수 있다.
- method
- GET: URL에 포함되어도 상관없는 정보들을 GET방식으로 보내는 방식. form에 작성된 내용이 URL에 적혀있는 것을 알 수 있다.
- POST: 백엔드 서버에 정보를 전송하는 방식.
<form action="friends.html" method="get" id="login-form">
<input name="username" type="text" placeholder="Email or phone number" />
<input name="password" type="password" placeholder="Password" />
<input type="submit" value="Log In" />
<a href="#">Find Kokoa Account or Password</a>
</form>
▷ form에 아무글자나 넣어서. freidns.html이라고 작성된 페이지로 이동해서 나타내준다.
- 중앙정렬의 팁. 컨테이너에 width: 33%를 적용, 마지막 element에 justify-content: flex-end 적용, 가운데 element에 justify-content: center;를 적용하면 정확한 중앙정렬이 된다.
- z-index는 div가 있는 위치가 맨 앞에서부터 몇 번째인지를 나타낸다.
- z-index는 layer와 같은 것이며, 절대적인 위치(absolute poosition)나 고정된 위치(fixed position)에 대해서 설정 할 수 있다.
box-sizing 속성은 css 테두리 영역의 크기를 결정한다.
body의 크기 밖으로 컨텐츠들이 더 튀어나와서 크기를 맞추고 싶다면, box-sizing: border-box
body의 크기 안의 컨텐츠들이 더 적게 나와서 크기를 맞추고 싶다면, box-sizing: content-box
100vh = The screen's height 화면의 높이
100vw = The screen's width 화면의 너비
100% = 100% of the PARENT 부모의 100%
- CSS의 keyframes 애니메이션으로 splash 애니메이션을 줄 수는 있지만, 완벽하게 없어진 상태를 만들 수는 없다. 때문에 JavaScript가 필요하다.
- 애니메이션의 마지막 값을 기억하고 싶다면 forwards라는 단어를 사용해야한다. → 마지막 keyframes를 기억한다.
- animation-delay로 약간 지연 시킬 수 있다.
will-change
브라우저에게 무언가 변할 것이라고 미리 알려주는 것. animation을 좀 더 부드럽게 도와준다.
'개발언어 > HTML, CSS' 카테고리의 다른 글
[HTML] block line 태그 5개를 일렬로 나열하면 어떻게 될까? (0) | 2022.07.27 |
---|---|
SVG 이미지 파일 형식. (0) | 2021.09.15 |
BEM 규칙 (0) | 2021.09.15 |
고급 CSS ( Transition, Transformation, Animation, Media query) (0) | 2021.09.14 |
CSS 살펴보기 (0) | 2021.09.11 |