GNB란?
Global Navigation Bar의 약자로, 웹사이트 전체에 동일하게 적용되는 내비게이션 바
<div id=”header” role=”banner”>
→ div의 역할이 banner다 라고 명시해놓은 것
>> FIELDSET 이란?
하나의 전송양식(FORM)을 의미 단위로 그룹핑하는 요소, 서로 관련이 있는 것들을 묶을 때 사용
>> legend 란?
관련있는 것들이 어떤 사항들인지
>> legend class=”blind”
→ 텍스트가 들어가있지만, 실제로 보이지는 않음. 이 form이 어떤역할을 하는지 개발할 때 구분하려고 안보이는 텍스트를 넣어놓는 것
>> 검색창과 GNB 구조 살펴보기
legend class = ”blind”
--> 네이버가 blind 처리할 때 사용할 class를 만들어놓고, blind하고싶은 태그들에 class를 이걸로 적용시켰었다
그동안 이미지를 각각 저장하거나, 각각 링크를 걸었었는데 네이버는 이런식으로 필요한 이미지들을 한 곳에 모아 background이미지로 아예 묶어버린후에, 각각 요소마다 좌표값만 다르게 하여 사용하는 것을 새롭게 알았다!!
캐슁 효율이 빨라지는 효과가 있대!!!
화살표 부분은 form 밖에 위치하고 absolute로 되어있는 것을 알 수 있었다.
서버에 실제 데이터 보낼때 관여되는 부분
>> 라벨태그?
<label> 태그 : 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용
lable로 감싸놓으면,
input 에
토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것
<label>안에 들어가있으면, 체크박스말고 다른 영역을 클릭해도 체크박스에 들어오게 된다.
>> submit
<button type=”submit”>제출</button>
submit은 form 안에서 모든 내용을 제출한다.
>> tabindex ?
tabindex는 기본적으로 키보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML의 속성
>> margin / padding 차이
박스 밖의 여백을 조절해야 된다 → margin
박스 안의 여백을 조절해야 된다 → padding
>> 어느정도 html을 짤때 css가 없더라도 정리가 되어있게 (연관되어 있는 애들은 첨부터 연관되도록)
>> dl > dt,dd
ul 과 비슷한
dd보다 한단계 높은게 dt
dd는 d의 요소
dl은 d의 리스트
>> display: table
상위에 있는 엘리먼트를 display: table 로 만들고
그 테이블 밑에 display: table-cell 로 저장을 하면
테이블 밑에있는 셀은 가로로 배치가 된다.
div class= “group~~” 을 테이블로 주고 , dl calss~~~를 테이블셀로 줬음
→ 테이블셀로 하면 내부에 있는 블록 요소가 화면 100%로 균등하게 맞아 떨어짐
→ 모든 넓이를 균등하게 나눠서 가져감
>> before, after ??
after 그 요소의 닫히는 점 바로 직전에 보이지 않는 가상의 엘리먼트를 만든다고 생각하기
2주차 숙제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="search" class="search_area">
<form id="sform" name="sform" action="https://search.naver.com/search.naver" method="get" role="search">
<fieldset>
<!-- 네이버에서 사용하는 blind 클래스로 없애준 것 -->
<legend class="blind">검색</legend>
<div class="green_window">
<input
id="query"
name="query"
type="text"
maxlength="255"
class="input_text"
tabindex="1"
autocomplete="off"
placeholder="검색어를 입력해 주세요."
/>
</div>
<button id="search_btn" type="submit" title="검색" tabindex="3" class="btn_submit">
<span class="blind">검색</span>
<span class="ico_search_submit"></span>
</button>
</fieldset>
</form>
<div class="autocomplete">
<a href="#" role="button" id="test1" tabindex="2" class="btn_arw _btn_arw fold" aria-pressed="true" data-atcmp-element="" onclick="abc()">
<span class="blind">자동완성 레이어</span>
<span class="ico_arr"></span>
</a>
</div>
<!-- 숙제(자동완성 기능) -->
<div id="autofram">
<!-- 자동완성 content -->
<div class="atcmp_container_words">
<div class="atcmp_container_words_context">
<span>최근 검색어 내역이 없습니다.</span><br/>
<span>설정이 초기화 된다면 <b style="color:blue">도움말</b>을 확인해주세요.</span>
</div>
<!-- footer 부분 -->
<div class="atcmp_footer">
<span class="side_opt_area">
<span class="opt_item"><a href="https://help.naver.com/alias/search/word/word_17.naver" data-clk="sug.help" target="_blank">도움말</a></span>
<span class="opt_item"><a href="https://help.naver.com/support/contents/contents.help?serviceNo=605&categoryNo=18215" class="report" data-clk="sug.report" target="_blank">신고</a></span>
</span>
<span class="rside_opt_area">
<span class="opt_item1">
<a href="#" id="rside_opt"class="close _suggestOnOff">자동완성 끄기</a>
</span>
</span>
</div>
</div>
</div>
</div>
<script src="search.js"></script>
</body>
</html>
/* reset 코드 : 기본으로 들어가있는 디자인을 리셋시키는 작업 */
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
select,
table,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
em {
font-style: normal;
}
button,
input {
border-radius: 0;
border: 0;
}
/* placeholder가 보이지않도록
실제 이 페이지를 접근하는 검색엔진 봇들을 위해서 이런 내용을 적어놓구나
*/
.search_area .input_text::placeholder {
color: transparent;
}
/* display:flex를 사용할때 가운데 정렬하려면, justify-content랑 align-items가 세트임 */
html,
body {
display: flex;
width: 100%;
height: 100%;
/* 가로기준 가운데 정렬 */
justify-content: center;
/* 세로기준 가운데 정렬 */
align-items: center;
font-size: 10px;
line-height: 10px;
}
/* 네이버에서 만든 blind 클래스 */
.blind {
/* position을 absolute로 해서 다른 요소에 절대 영향을 주지 않돋록 해놓은 것 */
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
/* 디폴트값이 기본적으로 선이 들어가기 때문에 */
fieldset,
img {
border: 0;
}
/* background-image setting */
.search_area .btn_submit .ico_search_submit,
.search_area .btn_arw .ico_arr {
/* 네이버 이미지 사용 */
/* background-image: url(https://s.pstatic.net/static/www/img/uit/2021/sp_main_57f073.png); */
/* 로컬 이미지 사용 */
background-image: url("./sp_main.png");
background-size: 444px 439px;
}
/* search_area */
.search_area {
position: absolute;
}
/* form */
.search_area .green_window {
position: relative;
width: 582px;
height: 52px;
border: 2px solid #4ae94a;
border-radius: 2px;
}
.search_area .input_text {
width: 444px;
height: 24px;
/* 상하/좌우 */
padding: 13px 15px;
/* 상하좌우 모두 적용 */
margin: 1px;
background-color: #fff;
font-size: 18px;
line-height: 24px;
color: #000;
font-weight: 700;
outline: 0;
border-radius: 0;
border: 0;
}
.search_area .btn_submit {
position: relative;
float: right;
bottom:55px;
height:55px;
width: 56px;
background-color: #4ae94a;
border-radius: 0 2px 2px 0;
cursor: pointer;
}
.search_area .btn_submit .ico_search_submit {
display: inline-block;
width: 22px;
height: 22px;
/* 아까 위에서 background-img 설정해준 것 */
/* 좌표가 어떤 위치에 있는지는 디자이너가 넣어준다고 함 */
background-position: -420px -208px;
/* 원래 반복되는것이 디폴트 값임 */
background-repeat: no-repeat;
vertical-align: top;
}
/* autocomplete */
.search_area .btn_arw {
position: absolute;
top: 0;
right: 64px;
bottom: 0;
width: 22px;
}
.search_area .btn_arw .ico_arr {
display: inline-block;
position: relative;
top:25px;
width: 10px;
height: 5px;
background-position: -108px -296px;
background-repeat: no-repeat;
}
/* 클래스이름에 fold라는 게 뒤에 더 붙을때 다른 효과가 되는 것 */
.search_area .btn_arw.fold .ico_arr {
display: inline-block;
width: 10px;
height: 5px;
background-position: -96px -296px;
background-repeat: no-repeat;
vertical-align: top;
}
/* 숙제중 */
fieldset {
height:55px;
}
.atcmp_footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 39px;
border-top: 1px solid #f1f4f6;
border-radius: 0 0 6px 6px;
font-size: 1.3rem;
line-height: 37px;
text-align: right;
background-color: #f9fafb;
}
.opt_item {
float: left;
padding-left: 12px;
}
#rside_opt{
font-size: 1.3rem;
line-height: 37px;
text-align: right;
padding-right: 10px;
}
.atcmp_container_words_context{
text-align: center;
padding:70px;
}
.atcmp_container_words_context span{
font-size: 13px;
}
.atcmp_container_words{
height:200px;
}
.atcmp_footer a{
text-decoration: none;
color:black;
}
#autofram {
border-radius: 0 0 6px 6px;
border: 2px solid #f1f4f6;
display: none;
}
js 부분
function abc(){
var autofram = document.getElementById("autofram");
if(autofram.style.display=='none'){
autofram.style.display = 'block';
}else{
autofram.style.display = 'none';
}
}
숙제를 하는데, 처음부터 내가 짠 코드에다 연결을 하는 것이 아닌
이미 제공된 코드스니펫에다가 js를 연결하려니 제이쿼리가 작동이 안됐었다.
어떻게던 기능 구현은 해야하니 자바스크립트로 구현했다.
숙제 해설강의를 보면서 정리 다시 해야지
조금 더 섬세했으면 하는 아쉬움이 계속 남는 수업인 것 같네 ㅠㅠ
'✍ 따뜻한 개발 공부' 카테고리의 다른 글
| [스파르타-깃허브] 2주차 강의 내용정리 (0) | 2022.11.16 |
|---|---|
| [css] CSS 트렌지션 (0) | 2022.11.15 |
| [스파르타-알고리즘] 2-6 링크드 리스트 sum / 이진 탐색 (0) | 2022.11.15 |
| [스파르타-웹퍼블리셔] 웹 퍼블리셔 강의 1주차 내용 정리 (0) | 2022.11.14 |
| [깃허브] 소스트리 이용하여 깃허브에 푸쉬/풀 해보기 (0) | 2022.11.14 |
댓글