-
body를 보면 마진을 갖고 있는데 브라우저가 알아서 적용시키는 스타일이라 완전 처음부터 시작하기위해 이를 제거해주는 방법을 사용한다.
리셋css파일: 대부분의 html태그에 마진, 패딩, 보더 등의 값이 0을 가진 css파일
파일 복사 후 css 폴더에 reset.css 파일을 만든다. css안에서 import 해줌. -
텍스트 정렬 text-align 사용
** page ruler redux 크롬 확장 프로그램 사용. 이미지 크기 측정 가능
-
텍스트 너비 제한 : % 이용
-
not뭔가가 적용되는 걸 원하지 않을 때(이 것을 제외한 나머지에 적용하고 싶을 때)
#login-form input {
padding: 15px 0;
border: none;
font-size: 18px;
margin-bottom: 20px;
}
#login-form input:not([type="submit"]) { /* input type이 submit이 아닐때 적용. [] : 속성선택자(attribue selector)*/
transition: border-color 0.3s ease-in-out;
border-bottom: 1px solid rgb(0, 0, 0, 0.2);
}[]: 속성선택자(attribue selector)- cursor: pointer, not-allowed, progress 등 마우스커서 모양 변경 속성
- 모든 link는 blue 색상이 기본값으로 적용되어 있음. inherit 적용하여 부모로부터 상속받기 (기본 컬러 블랙)
#login-form a {
text-align: center;
text-decoration: none;
color: inherit; /* 부모로부터 상속받다 */
}- form은 중요한 속성(attribute) 2개 있다.
action: 어떤 페이지로 data를 보낼지 지정한다 (페이지 이동). action에 적어놓은 url에 해당하는 파일이 반드시 존재해야 한다.(action: "friends.html")
method: post(백엔드 서버에 정보를 전송하는 방식) / get(보안에 취약. url에 포함되어도 상관없는 정보들을 get방식으로 보냄.) (2가지 방식 중 하나)
review
- 수업 때 form 작성에서 id로 css 디자인을 부여했지만 역시나 class 를 이용하는게 더 깔끔한 느낌이다.
- style.css 파일에는 font-family와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는다. 다른 스타일은 css파일을 따로 만들어서 import하는게 깔끔.
메인 스타일시트에 다른 요소의 css를 import 할 때에는 작성 순서가 중요하다.
