(HTML5 & CSS3) !important, Outline

!important
Cascading & Specificity를 모두 무시하고 스타일을 덮어 씀

https://developer.mozilla.org/ko/docs/Web/CSS/Specificity#!important_%EC%98%88%EC%99%B8

스타일을 강제로 지정
우선순위 부터 모든게 깨져버린다.
정말 필요할 때 아니면 사용하지 않는다.

!important는 언제 사용해도 되나?

• 명시도가 적용된 Style을 별도의 스타일로 표현할 수 없을 때 덮어쓸 용도로만 사용한다.
• CSS Framework (Bootstrap, Tailwind 등)의 스타일을 덮어써야 할 때 등
• 무작정 사용할 경우 명시도가 꼬여 스타일 추적이 아주 어렵게 된다.

Outline

https://developer.mozilla.org/ko/docs/Web/CSS/outline
https://www.w3schools.com/css/css_outline.asp

border와 비슷하게 보이겠지만 다름

• Input, Select 등 사용자 입력요소가 선택되어 활성화 된 경우(focus)
• 사용자에게 상태를 표현하기 위해 Outline이 표시됨.
• Outline이 표시되면서 알맞게 맞춰놓은 Layout이 일그러질 수 있다.
• 필요에 따라 Outline을 제거하거나 꾸밀 수 있다.

<div class="search-area">
            <form class="search-form">
                <label for="search-type" class="search-title">검색종류</label>
                <select id="search-type" class="search-input">
                    <option value="">전체</option>
                    <option value="">작성자</option>
                    <option value="">내용</option>
                    <option value="">작성자+내용</option>
                    <option value="">글번호</option>
                </select>
                <label class="search-title" for="search-keyword">검색어</label>
                <input type="text" class="search-input" id="search-keyword" >
                <button class="search-button">검색</button>
            </form>
        </div>

.search-input:focus {
    outline: 0px;
}