[수업노트](20.11.18)D+29 클래스 101 상단로고 검색바/자바스크립트console.clear();/숫자와 문자/변수

※ 상단 로고와 검색바 레이아웃 잡기

- 부분 모작 시 섹션별로 구획 나누어주기 ex) <!--로고바 시작--><!--로고바 끝-->

- 검색바의 form 요소 기본형태 ★외우세요 

  < form on submit="return false;">

  < input type="text" >

  < input type="submit" value="검색" >

 

※ 101로고 

ctrl + shift + c 로고박스 클릭 - SGV요소 찾기(좌측방향키 눌러 준다) - SGV복사- copy outerhtml- 붙여넣기

SGV형식이란 ? 일러스트 벡터형식 파일로 jpg와 달리 이미지에 변형을 줘도 깨지지 않는다.

 

※ 검색박스의 은은한 그림자

- box-shadow:10px(x축) 10px(y축) 10px(그림자 번짐 정도) rgba(0,0,0,0.5) 그림자 색

- 예제는 box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 1px 0px, rgba(41, 42, 43, 0.16) 0px 1px 3px 0px;

   → 박스쉐도우는 여러개 중첩 사용 가능

 

※ 검색 박스의 세부 디자인

 - 테두리 없애기 : border=0;

 - 선 외곽 없애기 : outline=0;

 

※ 검색 입력전 가이드 문구 넣기

 - place holder="배우고 싶은것이 있나요?"

<!-- 구글 폰트 불러오기 -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

<!-- 폰트어썸 라이브러리 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

<!-- 로고바 시작 -->
<div class="logo-bar con-min-width">
  <div class="con flex height-100p">
    <a href="#" class="logo flex flex-ai-c">
      <span>
        <svg viewBox="0 0 152 32" preserveAspectRatio="xMidYMid slice" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M128.059 5C121.984 5 117.059 9.9247 117.059 16C117.059 22.0753 121.984 27 128.059 27C134.134 27 139.059 22.0753 139.059 16C139.059 9.9247 134.133 5 128.059 5ZM132.363 20.4781C131.212 21.6617 129.776 22.2535 128.058 22.2535C126.34 22.2535 124.904 21.6617 123.753 20.4781C122.6 19.2945 122.023 17.8117 122.023 16.0308C122.023 14.229 122.6 12.7297 123.753 11.5362C124.904 10.3427 126.34 9.7454 128.058 9.7454C129.776 9.7454 131.211 10.3427 132.363 11.5362C133.516 12.7308 134.093 14.229 134.093 16.0308C134.093 17.8128 133.516 19.2945 132.363 20.4781Z" fill="#000"></path><path d="M140.159 5.44V10.4835H143.916V26.56H148.959V5.44H140.159Z" fill="#000"></path><path d="M106.059 5.44V10.4835H109.816V26.56H114.859V5.44H106.059Z" fill="#000"></path><path d="M51.741 5.44L42.9146 26.56H48.4938L49.9755 22.7144H58.8646L60.3463 26.56H65.8947L57.0683 5.44H51.741ZM51.741 18.2385L54.4206 11.303L57.131 18.2385H51.741Z" fill="#000"></path><path d="M77.9936 14.0508L73.6255 13.0773C72.4947 12.8254 71.9282 12.2391 71.9282 11.3162C71.9282 10.709 72.19 10.2008 72.7136 9.7916C73.2372 9.3824 73.9181 9.1789 74.7574 9.1789C75.6374 9.1789 76.4228 9.4363 77.1147 9.9489C77.8055 10.4626 78.2455 11.1908 78.4347 12.1335L83.5255 11.0962C83.1273 9.1888 82.1527 7.6972 80.6028 6.617C79.0529 5.539 77.1246 5 74.8201 5C72.3264 5 70.3156 5.5973 68.7855 6.7908C67.2554 7.9854 66.492 9.598 66.492 11.6308C66.492 14.8362 68.3785 16.869 72.1482 17.7281L76.5482 18.6708C77.2819 18.8182 77.7901 19.0371 78.0728 19.3308C78.3566 19.6245 78.4974 20.0216 78.4974 20.5243C78.4974 21.1744 78.2202 21.698 77.6647 22.0962C77.1092 22.4944 76.3502 22.6935 75.3866 22.6935C73.1239 22.6935 71.7412 21.6562 71.2385 19.5827L65.8947 20.62C66.1675 22.6319 67.1575 24.1972 68.8647 25.3181C70.5719 26.439 72.6509 27 75.1028 27C77.5745 27 79.6381 26.4016 81.2947 25.2081C82.9491 24.0146 83.7774 22.3382 83.7774 20.18C83.7763 16.9526 81.8491 14.911 77.9936 14.0508Z" fill="#000"></path><path d="M98.0763 14.0508L93.7082 13.0773C92.5774 12.8254 92.0109 12.2391 92.0109 11.3162C92.0109 10.709 92.2727 10.2008 92.7963 9.7916C93.3199 9.3824 94.0008 9.1789 94.8401 9.1789C95.7201 9.1789 96.5055 9.4363 97.1974 9.9489C97.8882 10.4626 98.3282 11.1908 98.5163 12.1335L103.608 11.0962C103.21 9.1888 102.235 7.6972 100.686 6.617C99.1345 5.539 97.2062 5 94.9017 5C92.408 5 90.3972 5.5973 88.8671 6.7908C87.337 7.9854 86.5736 9.598 86.5736 11.6308C86.5736 14.8362 88.459 16.869 92.2309 17.7281L96.6298 18.6708C97.3635 18.8182 97.8717 19.0371 98.1544 19.3308C98.4382 19.6245 98.579 20.0216 98.579 20.5243C98.579 21.1744 98.3018 21.698 97.7463 22.0962C97.1908 22.4944 96.4318 22.6935 95.4682 22.6935C93.2055 22.6935 91.8228 21.6562 91.3201 19.5827L85.9763 20.62C86.2491 22.6319 87.2391 24.1972 88.9463 25.3181C90.6535 26.439 92.7336 27 95.1855 27C97.6572 27 99.7208 26.4016 101.377 25.2081C103.032 24.0146 103.86 22.3382 103.86 20.18C103.859 16.9526 101.932 14.911 98.0763 14.0508Z" fill="#000"></path><path d="M17.7246 21.1062C16.75 21.8927 15.5719 22.2843 14.1892 22.2843C12.5128 22.2843 11.0938 21.6826 9.9311 20.4781C8.7673 19.2736 8.1854 17.7809 8.1854 16C8.1854 14.2191 8.7673 12.7319 9.93 11.5373C11.0927 10.3438 12.5117 9.7465 14.1881 9.7465C15.5917 9.7465 16.7808 10.1282 17.7543 10.8927C18.4462 11.4361 18.9632 12.1709 19.3218 13.0773H24.78C24.2773 10.6254 23.0464 8.6674 21.0873 7.2C19.1271 5.7337 16.8281 5 14.1892 5C11.0663 5 8.4219 6.0637 6.2527 8.19C4.0835 10.3163 3 12.92 3 16C3 19.1009 4.0846 21.7101 6.2527 23.8265C8.4219 25.9407 11.0663 27 14.1892 27C16.9337 27 19.2701 26.2553 21.1973 24.7681C23.1256 23.2809 24.3301 21.2382 24.8119 18.64H19.4175C19.0325 19.6795 18.4704 20.5045 17.7246 21.1062Z" fill="#000"></path><path d="M32.1808 5.44H26.98V26.56H40.7146L42.5824 22.0203H32.1808V5.44Z" fill="#000"></path></svg>
      </span>
    </a>
    <form onsubmit="return false;" class="search-box flex flex-as-c">
      <input type="text" placeholder="배우고 싶은 것이 있나요?">
      <span class="btn-search"><i class="fas fa-search"></i></span>
    </form>
    <div class="flex-grow-1"></div>
    <nav class="menu-box-1">
      <ul class="flex">
        <li><a href="#">크리에이터 지원</a></li>
        <li><a href="#">로그인</a></li>
      </ul>
    </nav>
  </div>
</div>
<!-- 로고바 끝 -->

/* 노말라이즈 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

/* 라이브러리 */
.con {
  margin-left:auto;
  margin-right:auto;
}

.flex {
  display:flex;
}

.flex-jc-sb {
  justify-content:space-between;
}

.flex-ai-c {
  align-items:center;
}

.flex-grow-1 {
  flex-grow:1;
}

.flex-as-c {
  align-self:center;
}

.bg-red {
  background-color:red;
}

.bd-red {
  border:10px solid red;
}

.height-100p {
  height:100%;
}

/* 커스텀 */
html {
  font-family: 'Noto Sans KR', sans-serif;
}

.con-min-width {
  min-width:1176px;
}

.con {
  width:1176px;
}

/* 로고바 시작 */
.logo-bar {
  height:300px;
}

.logo-bar .logo > span > svg {
  width:110px;
}

.logo-bar .search-box {
  margin-left:30px;
  padding:8px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 1px 0px, rgba(41, 42, 43, 0.16) 0px 1px 3px 0px;
}

.logo-bar .search-box > input {
  width:380px;
  border:0;
  outline:0;
  transition:width 1s;
}

.logo-bar .search-box > input:focus {
  width:420px;
}
/* 로고바 끝 */

 

※ 자바스크립트 

1. console.log(); 괄호 사이에 값을 입력하면 화면에 출력해준다. 콘솔창에 내역이 쌓인다

  → console.clear(); 상단에 써주면 내역이 쌓이지 않는다.

 

★ 자바스크립트는 위에서 아래로 한줄씩 순차 실행된다 

 

2. 숫자와 문장

console.clear();

console.log("== 숫자 더하기 숫자 ==");
console.log(10 + 10);

console.log("== 문장 더하기 숫자 ==");
console.log("점수 : " + "10");

console.log("== 문장 더하기 숫자 ==");
console.log("점수 : " + 10);

console.log("== 문장 더하기 숫자, 더하기 우선순위 ==");
console.log("점수 : " + 10 + 20);

console.log("== 문장 더하기 숫자, 곱하기 우선순위 ==");
console.log("점수 : " + 10 * 20);

console.log("== 문장 더하기 숫자, 괄호 우선순위 ==");
console.log("점수 : " + (10 + 20));

 - 숫자는 그냥 코드업

 - 문자는 "" 와 함께

 - 숫자+숫자: 산술연산

 - 숫자+하나의 문자: 덧붙여진다.

 

3. 변수

 

★ 변수값은 절대 숫자로 시작 할 수 없다

console.clear();

console.log("== 변수 x 생성 ==");
var x;

console.log("== 변수 x에 값 할당 ==");
x = 10;

console.log("== 변수 x 사용 ==");
console.log(x);
console.log("x : " + x);

console.log("== 변수 x의 값을 5 증가 ==");
x = x + 5;
console.log("x : " + x);

console.log("== 변수 y 생성 ==");
var y = x + 5;
console.log("y : " + y);

console.log("== 변수 x, y 사용 ==");
console.log("x + y : " + (x + y));