코코아 클론 챌린지 11일차

배울 점, 기억 할 점

저번 과제에서 상단의 ‘Playlist’ 가 가운데 정렬이 잘 안되었다. 이것은 text-align으로도 해결이 가능했다.

reset.css : 대부분의 태그에 margin : 0, padding : 0, border : 0 등을 가진 css 파일. 브라우저에 의해 적용되는 스타일을 원하지 않기 때문에.
style.css 파일에 @import “reset.css” 적어야함.

input이 focus 되었을 때, input의 outline을 제거하려면, outline: none;을  input: focus{} 에 추가한다.

계속 써야하는 색이 있다면 variables.css 파일을 따로 만들어서 :root { ---yellow: #_123123;} 을 적어둔다.
색을 사용할 때는 var(--저장한 색 변수 명) 을 쓴다.
이것도 style.css 파일에 import 해주어야 사용 할 수 있다.

not 속성 : 무언가가 적용되는 것을 원하지 않을 때 사용.
ex ) body의 p를 제외한 모든 element에 밑줄을 적용시킬 때.
body not(p) {
   text-decoration : underline;
}
id와 class도 .와 #을 이용하여 쓸 수 있음.

#login-form input:not([type=“submit”]) {
    border-bottom:
}
BEM 방식을 이용하면 위의 방식을 사용하지 않아도 됨.

form의 중요한 두가지 속성
1. action : 어떤 페이지로 데이터를 보낼건지
<form action=“보낼 페이지.html” ~~>
2. method : 두가지 방식 중 하나를 쓸 수 있음. 하나는 Post, 다른 하나는 get.
Post는 백엔드 서버에 전송하는 방식
Get은 보안에 취약함. username과 password를 Get 방식으로 보내면 안됨. URL에 포함되어도 상관없는 정보를 Get으로 보내야함.

width:100%; 는 부모의 너비를 다 받는다는 뜻.

네비게이션 바 하단에 고정하기
position: fixed
bottom: 0
width:100%
box-sizing: border-box

 

box-sizing: border-box;
width : 200px;
padding-left: 50px; 이라 선언 했을 때,
css는 기본적으로 50 + 200 을 실행해서 내가 원하던 박스의 크기보다 더 크게 될 수 있다.
box-sizing: border-box; 를 하면,
박스의 크기는 50 + 150; 으로 처음에 선언한 width의 크기를 유지시켜준다.