innn

폼의 인풋 전체에 적용된 bottom-border: var(--yellow); 를 로그인 버튼은 제외하고 표현하고 싶을때, #login-form input:not([type="submit"]) { /* input type이 submit이 아닐 때에만 border-bottom과 transition 적용 되도록 */ border-bottom: 1px solid rgba(0, 0, 0, 0.2); transition: border-color 0.3s ease-in-out; } 이렇게 not 속성을 이용할 수 있다.

이번 강의의 CSS 목표 1. 입력폼 수직 가운데로 정렬 2. 입력폼 경계선 없애고, 입력폼 경계 밖 공간(패딩) 패딩 주기 3. Placeholder 회색 해주기(opacity 활용 0, 0, 0, 0.4) #login-form { display: flex; /* 일단 일렬로 정렬 */ flex-direction: column; /* 일렬로 정렬된 폼들을 column기준으로 수직 정렬 */ margin: 0px 30px; /* 위아래 마진은 없고(패딩줄거임) 양옆으로 30px 마진 */ } #login-form input { border: none; /* 경계선 없애기 */ padding: 15px 0px; /* 위아래 패딩 15ox */ font-size: 18px; /* placeholder 사이즈..

css를 넣어줄 헤더 html 코드는 아래와 같다.. Welcome to Kokoa Clone If you have a Kokoa Account, log in with your email or phone number. 그리고 02페이지에서의 헤더는 아래의 모양이다. 헤더 CSS의 목표 1. Welcome h1 멘트 가운데 정렬 2. if you~ p 멘트 역시 가운데 정렬 후 회색 (여기선 opacity 0.7로 표현했다) 3. h1 멘트와 p 멘트 사이에 마진 주기 뭐니뭐니 해도 중요한 것은 수직으로 가운데 정렬 한 것이다 . .welcome-header { margin: 90px 0px; /* 헤더 자체에 위아래 마진을 동일하게 90씩 주었다. */ text-align: center; display:..

display: flex 텍스트 형식을 제외한 엘리먼트 자체를 인라인 가로형태로 일렬로 정렬하는 기능 (화면 구성) text-align: center 텍스트 형식의 엘리먼트를 가운데로 정렬하는 형태. ex) p, h1~h6 등 이렇게 쓰이는 이유는 text 엘리먼트는 display 형식이 먹히지 않기 때문이다.

리셋 CSS 를 복사 붙여넣기해서 웹 브라우저에 디폴트로 깔린 모든 CSS를 없애준다. https://cssdeck.com/blog/scripts/eric-meyer-reset-css/ Eric Meyer’s “Reset CSS” 2.0 | CSS Reset One of the pioneers of the method, Eric Meyer's CSS Reset is still in use on millions of websites today. Find it and others, with full guides and docs, on CSSReset.com cssdeck.com 리셋할 코드는 아래와 같다. 이를 복사 붙여넣기해서 reset.css 파일을 만들어 넣어준다. /* http://meyerweb.c..

상태바의 컬럼 요소들을 한줄로 놓기 위해서. display: flex; 를 해주었다 그리고 상태바의 각 컬럼 요소들을 동일한 비율로 배치하기 위해서 justify-content: space-between; 으로 해주었다. justify-content: space-between; /* flex 축을 기준으로 서로 떨어뜨려놓기 */ 구글 폰트로도 폰트 패밀리를 지정해줄 수 있는데 아래와 같이 여러가지 스타일을 추가하게 되면 로딩하는데 시간이 더 걸릴 수 있다. 적용하는 데에는 두 가지 방식이 있다. 헤더에 링크를 넣거나 css에 @import를 해주거나 노마드 코더는 import를 추천했다. (국비 선생님도 그랬음) 임포트문을 복사해서 css의 맨 첫줄에 넣어준다. *** 내가 자주 까먹는건 임포트문을 첫 ..

header가 엄청 많을 텐데, css에 어떤 header를 가리키는지 알려줄 필요가 있다. 그래서, 헤더에도 클래스를 넣어준다. 그 다음 폼을 추가해줄 것이다.

아이콘을 추가하는 데에는 두 가지 옵션이 있다. 1. 직접 이미지를 만들고 추출하거나, 2. SVG 파일을 이용할 수 있다. SVG는 픽셀이 없는 이미지 파일형식이다. 수학이고, 좌표로 되어있어서 원하는 만큼 늘릴 수 있다. 1-1) heroicons 쓰고 싶은 아이콘을 검색해서 클릭만 하면 자동 복사가 된다. svg 코드가 복사되므로 그냥 붙여넣기해서 쓰면 된다. 1-2) 아니면 font awesome을 이용하면 된다. 이 코드 킷을 복사해서 스크립트에 작성해주면 된다. *** 스크립트는 항상 마지막에 있어야한다. 항상 마지막!!!!!!! body 태그를 닫기 직전에 말이다.