📕 첫 일지
[일지 내용]
- 서버와 클라이언트의 역할에 대해 이해
- HTML, CSS의 기초 지식을 이해한다. (부트스트랩)
- Javascript 기초 문법
먼저 서버/클라이언트/웹의 동작 개념을 네이버 홈페이지를 조작해 봄으로써 원리를 간략히 이해했다.
💡 웹의 동작 개념(HTML을 받는 경우)
우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서, "그려주는" 것
즉, 브라우저가 하는 일은 1. 요청을 보내고, 2. 받은 HTML 파일을 그려주는 일 뿐
요청은 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것
위 그림처럼 이루어진다.
💡 웹의 동작 개념(데이터만 받는 경우)
항상 HTML만 내려주는것이 아니라 데이터만 내려 줄 때가 더 많다.
예를 들어 상황 하나를 말해보자면
공연 티켓을 예매하고 있는 상황에서 좌석이 차고 빌때마다 보고있는 페이지가 리프레시 된다면 곤란하기 때문에
이럴 경우에는 데이터만 받아서 데이터만 리프레시 해준다.
데이터만 내려올 경우는, 위처럼 생겼다.
이런 생김새를 JSON 형식이라고 합니다.
💡 HTML, CSS 기본 내용
HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 쉽게 생각한다.
또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
💡 HTML 기초
HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.(head 안에 들어가는 대표적인 요소들: meta, script, link, title 등)
<!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>
기본 틀 정도의 코드이고 이 외에도 아주 많으며, 개발자들도 모두 외우고 있지 않는다. 필요할 때마다 찾아서 사용하면 된다.
html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다.
그림과 같이 구역을 이해하는것이 중요하다.
💡 CSS 기초
css는 head ~ /head 안에 style ~ /style 로 공간을 만들어 작성합니다.
또는 따로 css파일을 만들어 사용할 수도 있습니다.
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy
color
간격
margin
padding
💡 자주 쓰이는 CSS 연습하기
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, paddingmargin과 padding ( → 헷갈리지 말기!)
- margin은 바깥 여백을, padding은 내 안쪽 여백을
만든 무언가를 화면 가운데로 가져오려면 아래와 같이 해준다.
width를 주고, margin: auto를 사용하자!
그래도 안되면? display:block을 추가!
💡 폰트, 주석, 파일분리
구글 웹폰트를 사용해보았다.
https://fonts.google.com/?subset=korean 이 링크로 접속하면 사이트가 나온다.
순서는 아래와 같다.
1. 마음에 드는 폰트를 클릭합니다.
2. [ + Select this style ]을 클릭합니다.
3. 우측 상단의 모음 아이콘을 클릭합니다.
4. Embed 탭을 클릭합니다.
5. link 태그를 복사해서 head ~ /head사이에, CSS를 복사해서 style ~ /style 사이에 넣습니다.
주석은 언제 사용하냐면
1. 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
2. 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)
💡 CSS 파일 분리
html파일에 css코드가 너무 길어질거 같다면 따로 css파일을 만들어 사용해준다.
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">위와 같이 연결해서 사용해주면 된다.
💡 부트스트랩, 예쁜 CSS 모음집
bootstrap이란❓
예쁜 CSS를 미리 모아둔 것 CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.
bootstrap - 시작 템플릿
bootstrap사이트 https://getbootstrap.com/docs/4.0/components/alerts/
남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일하다.
다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐이다.
<!--bootstrap 기본 사용코드이다.-->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>만약 복사해오는 내용 중 form 태그(form.../form)가 있다면,
form태그를 div 태그(div.../div)로 바꿔주세요
→ form태그 안에 버튼이 있으면, 자동으로 새로고침이 됩니다.
💡 Javascript 맛보기
자바스크립트란❓
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.
[잠깐 상식!]
Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요?
A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML, CSS, Javascript를 주게 되어있죠.
Java와 Javascript는 어떤 차이가 있나요❓
인도와 인도네시아..
바다와 바다코끼리..
아무 관련 없습니다.
💡 Javascript 기초 문법
리스트 & 딕셔너리
리스트: 순서를 지켜서 가지고 있는 형태입니다.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력딕셔너리: 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'리스트와 딕셔너리가 필요한 이유
순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데. 변수만을 사용한 모습은 다음과 같다.
let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘듭니다.)
👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]
✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
💡 Javascript 기초 문법2
함수 예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
조건문 예시
20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
AND 조건과 OR 조건!
// AND 조건은 이렇게
function is_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
is_adult(25,'남')
반복문 예시
예를 들어 0부터 99까지 출력해야 하는 상황이라면!
for (let i = 0; i < 100; i++) {
console.log(i);
}
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.감사합니다😀