수업 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> : dhrudcks01@gmail.com</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 | 이메일 :
dhrudcks01@gmail.com<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';
}
코린이 입니당 :)