display:flex;
→ 거의 배열의 꽃이다. 세로로 기본 정렬된 상자를 가로로 정렬 해준다.
관련 내용이 너무 많으니, 잘 정리된 아래 링크를 참조하자.
링크텍스트
list-style:none;text-decoration:none;
→ 리스트 옆에 기호 붙는것과 링크 밑에 밑줄 가 있는것을 없애준다.
불필요한 디폴트 값이라 초반에 모든 요소에 대해서 적용하는 경우가 많다.
background-image:url();background-repeat:no-repeat;background-size:cover;
→ 배경 그림을 설정하는 기능들이다. 첫번째에서는 단순히 경로를 설정하는 것이고, 두번째에서는 창 크기가 넘어갔을 때 반복하는 것 방지, 세번째에서는 창크기가 늘어날 때 그림을 키워서 맞출지를 묻는다. 위 세개 속성이 제일 나아 보인다.
cursor : pointer;
→ 검색버튼이나 기타 버튼 위에 마우스 올리면 손가락 모양으로 바꿔준다.
margin:auto;
→ 가운데 정렬 해준다. 다만 박스의 양옆의 공백을 같게하여 가운데 정렬을한다.
text-align:center;
→ 가운데 정렬해준다. margin:auto와 차이가 뭐지?
margin:auto는 화면이 꽉 차지 않은 박스의 양옆의 간격을 동일하게 하는거고, text-align은 박스 내에서의 정렬을 가운데로 해주는 것이다!