내 회사 홈페이지 내가 해킹하기
웹개발종합반 1주차
매번 보는 웹사이트,, 이곳을 내가 해킹하는 것이 첫수업이라니 참 귀엽고 재미진 것이 세상이노라 ~
인터넷은 꺼졌는데 왜 이 화면은 살아있는가!
- 이미 내 컴퓨터에 받아온 화면이기 때문이다
- 브라우저란 네이버 서버에 요청해서 받아온 화면을 띄우는 것
- 요청하는 것
- 가져와서 보여주는 것
새로고침의 의미
- 새로 받아온다.
뭘 받아?
- HTML = 뼈대 (로고 옆에 뭐가 있어, 사전 옆에는 뉴스가 있어)
- CSS = 꾸미기
- Javascript = 움직이는 것들, 몇초마다 어떤 동작을 하게 하거나, 뭘 눌렀을 때 뭐가 나오게 하는 것들
대장정의 시작!
HTML, CSS
뭔가 저지르고 실습한 뒤 왜 되지?
HTML - head - body
head : 파비콘, 구글검색엔진이 내 웹사이트를 더 잘 긁어가게 해주는 속성등 (즉 body에 안들어가는 것들)
오우,,! 기초 이렇게 한번에 보기 아주 깐지나
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>CSS
= cascading style sheet
뭔가를 꾸미려면, 가리킬 수 있어야 한다
class="mytitle"폰트, 주석, 파일분리
"*" - 모든 태그에 다 먹이겠다.
Html/CSS/JS 마다 주석 방식이 달라서, "Cmd+/" 만 기억하면 됨
- background image 넣을 때 따라다니는 삼형제
background-image: url("");
background-position: center;
background-size: cover;- 정렬할 때 따라다니는 사형제
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;- 배경 이미지 어둡게 하기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))- 코드 자동 정렬 (제일 많이 쓰고 있음)
command + option + L
- 이모티콘 소스
소스 내에 복붙하면 그대로 나온다는 것은 아주 신기해.
https://kr.piliapp.com/facebook-symbols/
미션에서 틀렸던 부분
정렬 다 해놓고 버튼 간의 간격을 틀렸다.
style 주기 위해 정의 내린 항목 하위를 불러와서 스타일을 줘야한다.
Javascript 기초문법
모든 인터넷이 javascript만 쓰자고 약속.
- 변수, 자료형, 함수, 조건문, 반복문
변수 = 값 담기
let a = 2
let first_name = 'Amber'
let last_name = 'lee'
자료형 = 숫자니 문자니?
함수 = something()
조건문 = if() else()
반복문 = 계속 반복하자!
Dictionary
함수, 조건문, 반복문
계속 알림이 뜨게 하면 불편하므로, 다음과 같이 콘솔에 로그를 띄워서 확인하는 방법도 있음.
그렇게 하려면,
다음과 같이 alert를 console.log으로 바꿈으로써 해결 가능함.
i가 0부터 하나씩 커지도록 하라, a_list의 길이만큼, 하나씩 더해지게 하고 그 결과값을 콘솔에 반복해서 도출되게 하라.
- 만약 score만 도출되고 싶게 하고 싶다면
console.log(scores[i]['score'])추가해주면 'score'만 나오게 로그에 명령
-
만약 score가 특정 점수보다 클 경우 도출되게 하고 싶다면
(반복되면서(돌면서) 70보다 큰 점수를 가진 이름만 도출되게 됨)
-
다량의 데이터에서 특정 수치가 특정 값보다 큰 경우에 특정 항목을 도출되게 하고 싶다면
