on
[WIL] 웹개발 종합반 1주차
[WIL] 웹개발 종합반 1주차
원래 항해99의 일지는 따로 쓸 생각이 없었는데 스터디를 진행하면서 따로 공간을 뺐다.
[수업 목표]
서버와 클라이언트의 역할에 대해 이해한다. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다! Javascript 기초 문법을 익힌다.
웹의 동작 개념
웹의 동작 개념(HTML을 받는 경우)
우리가 보는 웹페이지는 서버에서 준비해두었던 것을 받아온 것이다.
브라우저가 하는 일은 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내고, 받은 HTML 파일을 그려주는 일을 한다.
웹의 동작 개념(데이터만 받는 경우)
서버로부터 항상 HTML만 받는 것은 아니며, 데이터만 내려 줄 때가 훨씬 많다.
예를 들어 실시간 인기 검색어의 경우 검색어 순위가 바뀔 때 마다 모든 HTML을 다시 받는 것은 비효율적이므로 변경된 데이터만 받아서 끼우게 된다. 데이터를 요청했을 때는 서버에서 DB에 있는 데이터를 꺼내 보내준다.
아래는 JSON 형식의 데이터 형태이다.
HTML, CSS
HTML과 CSS의 개념
HTML은 뼈대, CSS는 꾸미기!
HTML은 구역과 텍스트를 나타내고 CSS는 구역을 꾸며주는 것이다. HTML 코드 내에 CSS 파일을 불러와 적용한다.
HTML 기초
HTML은 크게 head와 body로 구성되며, head 안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
☞ head안에 들어가는 대표적인 요소들 : meta, script, link, title 등
페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다.
☞body 안에 들어가는 대표적인 요소들
나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요?
이 외에도 아주 많으며 필요할 때 마다 찾아서 사용하면 된다.
※ 정렬의 중요성
코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류 해결이 매우 어려워진다.
CSS 기초
먼저 HTML의 부모-자식 구조를 파악해야한다. 부모에게 스타일 속성을 상속받는 자식들이 있기 때문이다.
CSS를 사용할 때는 margin과 padding을 헷갈리지 않는 것이 중요하다.
웹 폰트를 이용하여 페이지의 폰트 속성을 다양하게 줄 수 있으며, 컴퓨터가 아닌 사람을 위해 주석을 달 수도 있다.
또한, link 태그를 이용하여 분리된 CSS파일을 HTML로 불러올 수 있다.
☞ 부트스트랩
부트스트랩을 통해서 예쁜 CSS를 이용할 수 있다.
남이 미리 작성한 CSS를 나의 HTML 파일에 적용한다는 점에서 CSS 파일 분리와 원리가 동일하다. 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다르다.
Javascript
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
Javascript 기초문법
[크롬 개발자도구]를 열어서 console 탭에 작성하여 띄워놓은 페이지에서 자바스크립트를 테스트해볼 수 있다.
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해준다.
console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있다.
변수 & 기본연산
변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
let으로 변수를 선언한다.
사칙연산, 문자열 더하기가 기본적으로 가능하다.
변수명의 경우 알아보기 쉽게 쓰는 것이 중요하다.
리스트 & 딕셔너리 리스트: 순서를 지켜서 가지고 있는 형태 [a, b, c] 딕셔너리: 키(key)-밸류(value) 값의 묶음 {a : 1 , b : 2 , c : 3}
둘은 [{a : 1, b : 2, c : 3}] 형태로 조합해서 사용 가능하다.
딕셔너리를 이용하면 고객 별로 정보를 묶을 수 있으며 리스트를 이용하면 순서를 나타내기에 좋다.
새로운 데이터가 생기더라도 .push 함수를 이용해 간단하게 대응할 수 있다.
사칙 연산 외에도 기본적으로 제공하는 여러 함수들이 존재하며, 필요할 때 마다 구글을 통해 찾아서 이용해볼 수 있다.
함수
// 만들기 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들);
조건문
if, else if, else 를 이용하여 조건을 설정할 수 있고 조건의 경우 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,'남')
반복문
반복문을 이용하면 n번을 반복해야하는 코드를 단 세줄로 출력할 수 있다.
반복문은 주로 리스트와 함께 쓰인다.
for (1. 시작조건; 2. 반복조건; 3. 더하기) { 4. 매번실행 } 1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
1주차 숙제
스파르타코딩클럽 | 부트스트랩 연습하기 .img { width: 500px; height: 500px; margin: auto; background : url("http://touchwarmer.com/web/product/big/201904/19738f4da3179c95d95434e43b62ab78.jpg") no-repeat center / cover; } .information { width: 500px; margin: 30px auto; } .information span { font-size : 17px; margin-left: 10px; } .form { width: 500px; margin: auto; } .btn { display: block; margin: auto; width: 100px; } 양초가격:3000원/개 양초를 팝니다. 주문자 이름 수량 --수량을 선택하세요-- 1 2 3 주소 전화번호
from http://haze-92.tistory.com/60 by ccl(A) rewrite - 2021-10-07 11:01:28