2020.09.16

보이는 대로만 만드는 건데도 시간이 오래걸리는데 직접 사용할 수 있는 페이지는 시간이 얼마나 걸릴지...

 

not

뭔가가 적용되는 것을 원하지 않을 때
:not(secector) { style properties}

*cascading 을 잘 이해하고 코딩하자

input 에 border: none;인 경우

#login-form input:focus {
  border-color: var(--yellow);
}

#login-form input:not([type="submit"]) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease-in-out;
}

로 작성하면 input에 border없어서 색변경불가
input:not을 실행 -> focus할때 border-color변경안됨

input:focus와 input:not바꿔주면
submit아닌 모든 input 아래쪽에 border생성, transition적용 후
생성된 border-bottom에 색깔 적용


cursor- 마우스가 올라갔을때 마우스 모양 바꿔줌

링크 색상은 default 로 정해져있음
color: inherit; 은 상위의 값을 받아옴


use id vs BEM

#login-form input  /  .login-form__input
#login-form input[type="submit"]   / .login-form__btn
#login-form a / .login-form__a

form의 attribute

action - 어떤 페이지로 data를 보낼 것인가

method - data보내는 방식
post-백엔드서버에 보냄
get-보안취약, url에 포함되어도 상관없는 정보를 보냄, input name을 설정할경우 url 뒤에 나타남

 

 

navgation <nav></nav>

다른 페이지로의 링크를 보여주는 구획 요소 (페이지 아래쪽)

<nav> <ul> <li> <a href="">

로 구성됨

구글같은 검색엔진도 navgation을 찾아서 검색결과에 보여줌

 

 

VSC의 자동완성기능

nav>ul>li*4>a

입력하면 자동으로 완성된다

비슷하게 span*4

입력하면 span 4개 생성됨

 

box-sizing: border-box;

padding을 box의 사이즈에 포함시킨다

설정하지 않으면 padding을 설정하면 사용할 공간을 확보하기 위해 전체 박스의 사이즈를 늘린다

 

고정된 요소

position: fixed;

를 설정하면 box의 width를 설정해줘야 한다

일반적인 레이아웃에 공간을 배정하지 않음

위치는 브라우저의 창 기준

https://homzzang.com/b/css-108

 

fixed, absolute

가장 가까운 relative를 가진 부모 기준으로 움직임

 

 

icon은 text처럼 관리한다

color로 색 바꿀 수 있다

 

 

 

status-bar를 fixed로 설정하고 두 번째 Friends창에서 screen-header를 만들어주니까 두 개가 겹쳤다

그래서 bar와 높이는 같고 투명한 div를 만들어 주었다.

screen-header를 fixed설정하고나니 또 겹쳐서 screen-header와 높이 같은 div또 만들어줬다.

 

그 후 첫 번째 login 페이지에 가니까 status-bar가 welcome이랑 겹치는 상황 발생...ㅜ

어떻게 고쳤는지는 모르겠는데 다시 div박스 설정하는것 해보니 잘 됐다