##6 CLONING TIME
6.6 Sign Up Screen part Three
- 리셋 CSS는 CSS 파일이다. 브라우저에 기본적으로 적용되어 있는 스타일을 초기화 해준다.
- 먼저 브라우저 스타일을 없애고, 직접 디자인 하는게 더 좋은 방법이다.
- styles.css에서 작성한 한 부분도 따로 css파일을 만들어 분리해주는 것이 깔끔하게 작업할 수 있는 방법이다. → CSS 코드를 여러 파일로 분할했다가 다시 합친다.
6.7 Log In Form part One
- 모든 input에 focus를 없앨 것이기 때문에, reset.css에 input:focus{ outline: none; }을 적용한다.
- 어떤 css파일이건 styles.css에 적용시키고 싶다면, 반드시 import를 해줘야 한다.
6.8 Log In Form part Two
- 가상 클래스 선택자(pseudo element)
- :not()→ 뭔가가 적용되는 걸 원하지 않을 때 사용한다.
[ ]사이에 쓰인 것들은 특성 선택자(attribute selector)이다.- cursor: pointer;로 버튼 위의 커서를 변경할 수 있다.
- color:inherit;는 부모로부터 색을 상속받는 것이다.
6.9 Recap and Forms
- #login-form ... 으로 썼찌만, .login-from___ ... 으로 써도된다. 더 편한 방식을 택하면 된다.
- CSS 파일에서 주석처리는 /* */로 감싸주면 된다.
- styles.css 파일에는 font-family와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는다.( or 모든 스크린의 background-color) 이는 하나의 방식이고, 자신만의 편한 방식을 택하면 된다.
- form은 중요한 2가지 속성(attribute)을 가지고 있다. 하나는 action이고, 다른 하나는 method이다.
- action은 어떤 페이지로 data를 보낼건지 지정할 수 있다.
- action에 적어 놓은 URL에 해당하는 파일이 반드시 존재해야한다.
- method는 2가지 방식 중 하나를 쓸 수 있다. 하나는 POST이고, 다른 하나는 GET이다.
- POST는 백엔드 서버에 정보를 전송하는 방식이라 이번 강의에서는 사용할 수 없다.
- GET 방식은 보안에 취약하다. username이랑 password를 GET 방식으로 보내선 안된다. URL에 포함되어도 상관없는 정보들을 GET 방식으로 보내는 것이다.
6.10 Navigation Bar part One
- navigation 안의 ul 안에 많은 li들로 구성되는데, 검색엔진 구글도 navigation을 찾아서 ul의 li 안에 있는 link를 가져오게끔 설정되어 있다.
- VSC의 단축키로 navigation에서 하위메뉴까지 한번에 자동 완성 시킬 수 있다.
→ nav>il>li*(필요한 갯수)>a
→ 그 후 #과 tab만으로 간편하게 작성이 가능하다.(수정하다보면 다음 tab이 옳게 먹히지 않는다.)- 점 3개는 ellipsis라고 한다.
- 속성과 class 이름이 똑같아도 상관없다.
- 메인 styles.css에 다른 요소의 css를 import 할 때, 순서를 지키는 것이 정말 중요하다.
6.11 Navigation Bar part Two
위치를 고정 시키기
position : fixed
배열이 깨지는 경우 width : 100% 설정
고정할 위치 (아래 인 경우 bottoom : 0;)과 같이 설정
box-sizing:border-box를 사용해 아이콘들이 한 줄로 보이게 함
