[CSS]자주 사용하는 속성들

코드왕·2022년 6월 30일
0
  1. display:flex;
    → 거의 배열의 꽃이다. 세로로 기본 정렬된 상자를 가로로 정렬 해준다.
    관련 내용이 너무 많으니, 잘 정리된 아래 링크를 참조하자.
    링크텍스트

  2. list-style:none;text-decoration:none;
    → 리스트 옆에 기호 붙는것과 링크 밑에 밑줄 가 있는것을 없애준다.
    불필요한 디폴트 값이라 초반에 모든 요소에 대해서 적용하는 경우가 많다.

  3. background-image:url();background-repeat:no-repeat;background-size:cover;
    → 배경 그림을 설정하는 기능들이다. 첫번째에서는 단순히 경로를 설정하는 것이고, 두번째에서는 창 크기가 넘어갔을 때 반복하는 것 방지, 세번째에서는 창크기가 늘어날 때 그림을 키워서 맞출지를 묻는다. 위 세개 속성이 제일 나아 보인다.

  4. cursor : pointer;
    → 검색버튼이나 기타 버튼 위에 마우스 올리면 손가락 모양으로 바꿔준다.

  5. margin:auto;
    → 가운데 정렬 해준다. 다만 박스의 양옆의 공백을 같게하여 가운데 정렬을한다.

  6. text-align:center;
    → 가운데 정렬해준다. margin:auto와 차이가 뭐지?
    margin:auto는 화면이 꽉 차지 않은 박스의 양옆의 간격을 동일하게 하는거고, text-align은 박스 내에서의 정렬을 가운데로 해주는 것이다!

profile
CODE DIVE!

0개의 댓글