2023.05.06 CSS 기본 개념

부트스트랩

.row 안에 col를 사용하면 균일하게 나누기 가능

가로로 나누고 싶으면 → col-차지할 크기

<div class="container">
          <div class="row">
            <div class="col-3">안녕하세요</div> -> 이 줄을 3의 크기로 4개로 나눈다.
            <div class="col-3">안녕하세요</div>
            <div class="col-3">안녕하세요</div>
						<div class="col-3">안녕하세요</div>
          </div>
        </div>

<div class="container">
          <div class="row">
            <div class="col-md-6">안녕하세요</div> md 사이즈 이상에서만 적용
						<div class="col-md-6">안녕하세요</div>
            
          </div>
        </div>

md 사이즈 → 부트스트랩 그리드(Grid) 검색

부트스트랩 사이즈

• xl → 1200px
• lg → 992px
• md → 768px
• sm → 576px

부트스트랩 order-first

<div> 순서 재배치 가능

order-1 → order-2 → order-3

<div class="container">
          <div class="row">
            <div class="col-4 order-2">안녕하세요</div>
            <div class="col-4 order-3">안녕하세요</div>
            <div class="col-4 order-1">안녕하세요</div>
          </div>
        </div>

CSS 덮어쓰기 잘 하는 법

1. 같은 클래스 명이나 스타일을 하단에 작성
   1. 같은 클래스명 혹은 스타일이라도 하단에 정의된 것이 우선적으로 적용

   .custom {
     color: green;
   }
   
   /* ex) main2.css */
   .custom {
     color: skyblue;
   }
   

2. 우선 순위 높임(비추)
   1. tag→ 1점
   2. .class → 10점
   3. #id → 100점
   4. style → 1000점
   5. !important → 10000점(사용 x)

→ 점수를 높이는건 근본적인 해결책이 아님, 좋은 방법이 아님(비추)

1. specificity(구체성 점수) 높임

→ 셀렉터를 여러개 나열하면 점수가 높아짐

div.main-background .custom { -> 21점
  color: green
}

.custom { -> 10점 여기서
  color: red;
}

div.main-background p.custom { -> 22점 이걸로 변경
  color: red;
}

→ 셀렉터가 길게 적으면 미래에 덮어쓰기 힘들어짐

좋은 코드

→ 클래스명은 최대한 적게, 1개로 쓰는게 좋음

1. 나중에 수정/관리가 쉬운 코드
2. 확장성이 좋은 코드

확장성

• 지금 만든 class를 다른 페이지에서도 쉽게 활용 가능함
• 지금 만든 class를 복사해서 더 유용한 class를 만들때 쉬움

이렇게 2가지를 생각해보면 된다.