naver careers

-사이트명 : naver careers
-사용언어 : html , css
-분류 : 반응형

🔋 Main Point

• max-width , min-width
• button vs a 태그 차이는?
• [form] Tag

1. max-width , min-width

헤더 max-width 지정해주지 않았을 때 문제점
: 화면의 양 끝으로 한없이 뻗어져나갈수있다
(항상 화면비율을 100%로만 맞춰놔 실수하는것 중 하나)
max-width:1920px로 맞춰놨다 ㅎㅎ

반대로 축소시켰을 때 min-width를 주어 원하는 구간의 정렬이 깨지지 않도록 해주자

2. button vs a 태그 차이는?

button: 단순 클릭 용도로 사용됨
a: 페이지이동할 때 사용

=> 처음에 마우스커서효과만 보고 a태그로 nav-gnb에 링크를 걸었었는데,
화면 언어를 바꿔주는 버튼이기 때문에 버튼으로 수정해줬다.

버튼을 알아보다 input 타입 버튼을 알게됐는데

1. <input type = button>
<button> 에 비해서 디자인에 제약이 있다. (css 로는 디자인 가능)
2. <button>
텍스트 뿐만 아니라 이미지 or gif 요소를 자식으로 포함할 수 있다.
디자인 폭이 넓다.
submit 기능이 기본적으로 들어있다. 따라서 submit 하고 싶지 않다면 type = "button" 을 적어줘야 한다.
<button> 의 속성값
: type = "submit" 서버 전송
: type = "reset" 내용 초기화
: type = "button" 기능 구현에 사용, 자바스크립트 이벤트 실행 목적

3. 결론
기본 링크들은 <a> 태그
자바스크립트 이벤트를 실행시켜야 하는 요소는 <button> 태그
단순한 button 기능이라면 semantic tag 인 <button> 을 사용하자.

이런 기능도 있다고 한다.

💫 (태그수정시 닫는태그도 같이 바꾸기)
Auto Rename Tag & Auto Close Tag
VScode의 HTML태그 확장 프로그램을 설치하면 태그수정시 좀더 편리하다 ㅎㅎ

 <div class="group-search" >
                    <form action="" method="get">
                        <fieldset>
                            <legend class="blind">검색</legend>
                            <div class="search-bd">
                                <div class="input-wrap">
                                    <label for="keyword" class="label keyword-label">키워드</label>
                                    <input type="text" id="keyword" class="input" >
                                </div>
                                <div class="select-wrap">
                                    <label for="" class="label">법인</label>
                                    <select class="select">
                                        <option value="" selected disabled>법인선택</option>
                                        <option value="">NAVER</option>
                                        <option value="">NAVER Cloud</option>
                                        <option value="">WORKS MOBILE</option>
                                        <option value="">SNOW</option>
                                        <option value="">NAVER LABS</option>
                                        <option value="">NAVER WEBTOON</option>
                                        <option value="">NAVER FINANCIAL</option>
                                        <option value="">NAVER I&S</option>
                                    </select>
                                </div>
                                <div class="select-wrap">
                                    <label for="" class="label">직군</label>
                                    <select class="select">
                                        <option value="" selected disabled>직군선택</option>
                                        <option value="">Tech</option>
                                        <option value="">Design</option>
                                        <option value="">Service & Business</option>
                                        <option value="">Coporate</option>
                                    </select>
                                </div>
                            <button type="submit" class="btn-submit">검색</button>
                            </div>
                        </fieldset>
                    </form>
                </div>