[엘리스 sw 엔지니어 트랙] 6일차 Javascript

28863 단어 엘리스부산JavaScript코딩캠프JavaScript

수업 6일차

2째주 수업이 시작되었다. 이번주는 HTML과 CSS가 아닌
Javascript를 배우기 시작했는데 저번주와 다르게
난의도가 급 상승한거 같다. 수업을 들으면서도 어떤건지 잘몰라서
멍해졌던 시간이 많았던거 같다!

이론

  • Javascript
    자바스크립트 : 웹에서 동작에 대한 부분을 다룸, 객채 기반, 인터프리터 언어
    인터프리터 : 소스코드를 한줄씩 기계어로 변경함(컴파일러 x), 에러잡기 어려움
    속도 : 컴파일러 > 인터프리터
    ES(ECMAScript) : 기술 규격에 의해 정의된 범용 스크립트 언어
    inline 방식 : 정해진 속성 값 안에 입력, 짧은 내용 작성할때 사용
    internal 방식 : script 태그내에 사용, 순서 주의
    external 방식 : script 태그의 속성을 파일명 기재, 순서에 주의
    디버깅 방법 : console은 브라우저의 디버깅 콘솔을 의미
    var : 변수 선언
    let : (ES6에서부터) 변수 선언
    const : (ES6에서부터) 변하지 않는 변수 선언(상수)
    var와 let의 차이 : var는 메모리가 할당되면 바로 undefine의 값을 가지지만 let은 메모리가 할당되면 값이 정의되지 않음
    호이스팅 - 코드 실행 전, 변수/함수 선어이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상
    문자열 : " 혹은 '로 감싸서 사용, 여러줄 정의 시 \으로 줄바꿈 가능 \뒤에는 아무것도 없어야함
    템플릿 리터럴 : `(백틱)으로 감싸주어 사용 ${}으로 변수 값을 직접 넣어 사용 가능
    함수 : 코드를 블럭화 할수 있음, 함수 선언을 통해 어디서든 사용가능
    조건문(if-else) : 조건을 여러가지로 나눌 수 있음(else if), 앞 조건을 충족하지 못하면 다음 조건을 검사하는 형태
    반복문(for/while) : 반복 작업이 필요한 경우 사용, for/while중 선택 해서 사용
    continue : 해당 지점에서 다음 반복으로 바로 넘어감
    break : 해당 지점에서 바로 반복문을 종료
    //modal : 페이지가 뜨는거 1111
    onclick : 이미 정의 되어있는 속성, 클릭되었을 경우 javascript가 실행됨
    oncontextmenu : 오른쪽 클릭을 했을 경우
    onchange : 값이 변경 되었을 경우
    onmouseover : 마우스가 올라 갔을 경우
    onkeyup : 키보드가 때졌을 때
    onkeydown : 키보드가 눌렸을 경우
    onfocus : 포커스가 이동 됐을 경우(포커스가 가있으면 무한으로 실행)
    event : inline방식, property방식, addEventListener방식(중복설정 가능)
    캡처링 : 이벤트가 실행됬을때 자식 형식에게 전파되는 현상(ture)
    버블링 : 이벤트가 실행됬을때 부모 형식에게 전파되는 현상
    DOM : script에서 다루기 쉽게 문서를 객체화 한 것, 각 태그를 노드의 개념으로 변경, 각 노드로 트리를 이룸
    문서 노드 : 문서 전체를 나타내는 노드
    요소 노드 : 모든 HTML 요고사 요소 노드(유일하게 속성 노드를 가질수 있음)
    속성 노드 : 모든 HTML 요소의 속성
    텍스트 노드 : 모든 HTML의 텍스트는 텍스트 노드
    appendChild : 없던 요소를 추가 할 수 있음, 반대로 removeChild로 제거
    inner : 뒤에 형태로 값의 반환해줌

숫자와 문자를 더하면 숫자는 문자열로 형변환이 일어남
왜냐? 모든 문자는 숫자로 변환은 불가능 하지만 모든 숫자는 문자열로 변형 가능
+를 제외한 모든 연산자는 문자열을 숫자로 바꿈

실습

프로필 사진을 클릭하기전

클릭후 전체 화면에 배경은 투명하게 크게 열린다.

HTML 코드


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>나의 이력서</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="main.css" />
    <script src="test.js"></script>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li class="menu-btn"><a href="#">홈</a></li>
          <li class="menu-btn"><a href="#">이력서</a></li>
          <li class="nav-space"></li>
          <li>/*elice*/</li>
        </ul>
      </nav>
    </header>

    <h1 id="title">이력서</h1>

    <h2>오경찬</h2>
    <div class="profile">
      <img
        src="C:\Users\dhrud\Desktop\KakaoTalk_20220406_165117206.jpg"
        alt="프로필 사진"
        width="400"
        height="500"
        onclick="showProfileModal()"
      />
    </div>
    <div class="profileModal">
      <img
        src="C:\Users\dhrud\Desktop\KakaoTalk_20220406_165117206.jpg"
        alt="프로필 사진"
        onclick="hideProfileModal()"
      />
    </div>
    <div class="container1">
      <div class="item item1">
        <h3>오경찬은요</h3>

        <div><strong>인적사항</strong> : 1996.12.2 | A형</div>
        <div><strong>주소</strong> : 부산광역시 동구 홍곡로 50</div>
        <div><strong>연락처</strong> : [email protected]</div>
      </div>
      <div class="item item2">
        <h3>오경찬의 발자취</h3>
        <ul>
          <li>2015.03 ~ 2019.02 : 울산대학교 | 울산 | IT융합</li>
          <li>2019.03 ~ 2021.06 : 11공수특전여단 | 담양</li>
        </ul>
      </div>
      <div class="item item3">
        <h3>오경찬의 활약</h3>
        <ol>
          <li>탄생</li>
          <li>장교출신</li>
        </ol>
      </div>
      <div class="item item4">
        <h3>오경찬의 스킬</h3>
        <ul>
          <li><a href="https://">HTML</a></li>
          <li><a href="https://">CSS</a></li>
          <li><a href="https://">JAVASCRIPT</a></li>
        </ul>
      </div>
    </div>

    <footer>
      <p>
        주소: 부산광역시 | 전화 : 010-1234-1234 | 이메일 :
        [email protected]<br />
        Copyright ⓒ 1996 - 2022 chan. All rights reserved.
      </p>
    </footer>
  </body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
} 
nav {
    
    background-color: #333;
    
    
    
}
nav ul{
    display: flex;
    margin: 0;
    padding: 0;
   
    
}

nav ul li{
    list-style: none;
    /* text-decoration: none; */
    margin-left: 20px ;
    padding: 20px 0;
    text-align: center; 
    color: white;
    font-size: 14px;
    /* transition: all 0.4s ease-out; */
}
/* 링크 선색상 */
 nav ul li :link{
    color: white;
    text-decoration: none;
}
/* 방문된 링크 색상 */
nav ul li :visited{
    text-decoration: none;
    color: white; 
}
nav .nav-space {
    flex-grow: 1;
}

.menu-btn {
    transition: all 0.4s ease-out;
}
.menu-btn:hover {
    background-color: #111;
    letter-spacing: 4px;
}
main{
    padding: 32px;
}
nav ul li :hover{

    letter-spacing: 4px;
    background-color: black;
}
#title {
    display: none;
}
#name {
    font-size: 80px;
}
.profile{
    overflow: hidden;
    /* 크기넘어가는건 짜르기 */
    width: 500px;
    height: 500px;

}
.profile img {
    width: auto;
    height: 100%;
    transform: translate(0,0);
    transition: all 0.6s ease-out;
}

.profile img:hover {
    width: auto;
    height: 110%;
    transform: translate(-5%,-5%);
    /* 화면에 올렸을때 0,0 처음시작 부분에서 키우는게아니라
       110%키웠으니 중앙에서 커지게 만들어줌 */
}

.profileModal{
    display: none;
    /* 클릭했을때 나오게 만듬 */
    place-items: center;
    /* 좌우 센터 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: rgba(0,0,0,0.7);
}
.profileModal img {
    width: 100%;
    cursor: pointer;
}

h1{
    
    font-family: 'Black Han Sans', sans-serif;
}

h2{

    font-family: 'Black Han Sans', sans-serif;
}

h3{

    font-family: 'Black Han Sans', sans-serif;
    
}
.container1{
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}    
footer{
    padding: 2px; 
    background-color: rgb(204, 204, 204);
    text-align: center;
    
}

@media (max-width: 768px) { 
	.container {
		display: block;
	}

    .profile {
        width: 400px;
    }

    .profile img {
        width: 400px;
        height: auto;
    }
    
    .profile img:hover {
        width: 110%;
        height: auto;
        
    }
}

Javascript

function showProfileModal() {
    document.querySelector('.profileModal').style.display = 'grid';
}
function hideProfileModal() {
    document.querySelector('.profileModal').style.display = 'none';
}
[ 0-1. 기본 자바 웹에 스프링 설정하기 ]
☕Java: 콜렉션 프레임워크와 제네릭

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage