까먹을까봐 적어두는 CSS / JS
CSS 우선순위
1
2
3
button { ... }
button.btn { ... }
button.btn.func { ... }
1
2
3
<button>버튼</button>
<button class = "btn">버튼</button>
<button class = "btn func">버튼</button>
의문점
<button class = "btn func"> 부분만 css 수정이 필요해서 다음과 같이 수정했다. <button class = "btn func" style="text-align : center !important">
important는 우선 순위를 가장 높게 지정하는 속성으로 알고 있어서 붙여주었지만 막상 실행해보니 개발자 모드에서 채택이 되어 있음에도 적용이 되지 않았다. 속성의 문제인가 싶어서 margin 등으로 변경해도 마찬가지였다.
해결?
해당 버튼의 class <button class = "func">를 만들어서 적용했다. important는 HTML에서 붙이면 적용이 되지 않는건지 확인해봐야 할 것 같다.
결과
HTML은 구조적 마크업 언어로, 문서의 구조를 정의하고 콘텐츠를 구성하는 역할을 하고, 스타일이나 디자인적 요소는 CSS를 사용하여 정의한다.
important는 CSS 규칙을 적용할 때 특정 스타일의 우선 순위를 높이는 역할을 하기 때문에 HTML에서는 사용할 수 없다.
때문에 HTML에서는 스타일에 직접적으로 important 속성을 사용할 수 없고, CSS에서 스타일을 정의할 때만 유효하다.
참고
CSS 우선 순위
속성 뒤에 !important를 붙인 속성 > HTML에서 style을 지정한 속성 > #id로 지정한 속성 > .class로 지정한 속성 > 태그 이름으로 지정한 속성 > 상위 객체에 의해 상속된 속성
↓ ↓ ↓
.class { background-color : blue !important} > <h1 style="background-color : blue">예시</h1> > #id { background-color : blue } > .class { background-color : blue } > h1 { background-color : blue } > <div style = "visibility : hidden"><h1></h1></div>
| 우선 순위 | 속성 | 예시 | 확장자 |
|---|---|---|---|
| 1 | !important를 붙인 속성 | .class {color : #000000 !important} | .css |
| 2 | 인라인 스타일 | <h1 style="color:#808080">제목</h1> | .html |
| 3 | id selector | #id { color : #143869 } | .css |
| 4 | class selector | .class { color : #dddddd } | .css |
| 5 | 태그로 지정한 속성 | h1 { color : #4ccccc } | .css |
| 6 | 상위 객체에 의해 상속된 속성 | <div style = "visibility : hidden"><h1></h1></div> | .css |
자세한 설명은 아래 사이트에서 확인할 수 있다.
데이터_박과장 님 - CSS - 스타일의 상속과 정렬 ofcourse - 적용 우선순위
즐코딩 님 - 알면 득이 되지만 잘 사용하지 않는 inline styles 그리고 !important
새로 고침
페이지 새로 고침
화면 갱신 시 사용하는 함수로, window.location / location / document.location을 통해 접근이 가능하다.
1
2
3
4
5
6
7
8
9
10
11
<script>
function re(){
document.location.reload()
}
</script>
...
<body>
<button onclick = "window.location.reload()">새로 고침</button>
<button onclick = "re()">함수로 뺀 새로 고침</button>
</body>
특정 부분 페이지 새로 고침
load()를 사용해 특정 영역만 새로 고침을 할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
<script>
function div_reload(){
$("#div-id").load(window.location.href + " #div-id"); //#id 앞에 띄어쓰기 필수
}
</script>
...
<body>
<div id="reload_test">
<button onclick="div_reload()">새로 고침</button>
</div>
</body>