[스파르타코딩클럽 | 웹개발종합반] 1주차: HTML / CSS / JavaScript

[스파르타코딩클럽 | 웹개발종합반] 1주차: HTML / CSS / JavaScript

1. 서버/클라이언트/웹의 동작 개념

- 브라우저

1) API로 요청을 보냄

2) 받은 HTML 파일 나타냄

HTML : 뼈대 CSS : 꾸며주는 것(디자인) Javascript : 움직이는 것(액션)

2. HTML, CSS

- HTML: 구역과 텍스트를 나타내는 코드

ㄴ head(페이지의 속성 정보)와 body(페이지의 내용)로 구성

스파르타코딩클럽 | HTML 기초 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요?

- CSS: 구역을 꾸며주는 것

ㄴ HTML 내 style 속성으로 꾸미기 가능 → 이를 모아 CSS 파일

로그인페이지 * { font-family: 'East Sea Dokdo', cursive; } .mytitle { background-color : green; width : 300px; height: 200px; color : white; text-align : center; background-image : url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"); background-size : cover; background-position : center; border-radius : 10px; padding-top : 20px; } .wrap { width : 300px; margin : auto; } .mybtn { width : 100px; margin : auto; display : block; } .login { display : block; width : 200px; margin : auto; } 로그인 페이지 아이디, 패스워드를 입력해주세요. ID: PW: 로그인하기

* 폰트 : https://fonts.google.com/?subset=korean

* 컨트롤+슬래시 → 주석 처리

* HTML/CSS 파일 분리 → css 파일을 같은 폴더에 만들고 head 태그에서 불러오기

3. Bootstrap

https://getbootstrap.com/docs/5.0/getting-started/introduction/

스파르타코딩클럽 | 부트스트랩 연습하기 * { font-family: 'Stylish', sans-serif; } .wrap { width : 880px; margin : auto; } .comment { color : blue; font-weight : bold; } .posting-box { width : 500px; margin : 0px auto 20px auto; padding : 50px; border : 2px solid black; border-radius : 5px; } function hey() { alert('안녕!!'); } 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 박스 열기 아티클 URL 간단 코멘트 기사저장 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다.

포스팅 박스 열기 → '안녕!!' 경고 알림창 뜸

여기 기사 제목이 들어가죠 → 네이버로 연결

4. Javascript

// 변수, 자료형, 함수, 조건문, 반복문

// alert

// console.log

1) 변수(숫자, 문자열) 및 자료형

- let

>> let first_name = 'subin'

>> let last_name = 'lim'

>> first_name + last_name

>> 'subinlim'

- 리스트 [], push/pop → 순서 !!

>> let a_list = ['수박', '참외', '배']

>> a_list[0]

<< "수박"

>> a_list.push('감')

>> a_list[3]

<< "감"

- 딕셔너리 {}, key:value

>> let a_dict = {'name':'bob', 'age':27}

>> a_dict['name']

<< "bob"

>> a_dict['fruits'] = a_list

>> a_dict

<< {name: "bob", age: 27, fruits: Array(4)}

- split

>> let myemail = '[email protected]'

>> myemail.split('@')

<< ["sss", "gmail.com"]

>> myemail.split('@')[1].split('.')

>> a_dict

<< ["gmail", "com"]

2) 함수

- 만들기 → function

function sum(num1, num2) {

return num1+num2

}

- 사용하기

>> sum(2,3)

<< 5

>> let result = sum(2,3)

>> result

<< 5

3) 조건문

- if / else if

- and(&&) / or(||)

- 예제

>> function is_adult(age) {

if (age>20) {

alert('성인이에요')

}

else {

alert('청소년이에요')

}

}

>> is_adult(25)

4) 반복문

- 예제1

for (let i=0; i<10; i++) {

console.log(i)

}

- 예제2

let people = ['철수', '영희', '민수', '형준', '기남', '동희']

for (let i=0; i

console.log(people[i])

}

5. 숙제: 원페이지 쇼핑몰 HTML+CSS 만들기

스파르타코딩클럽 | 부트스트랩 연습하기 * { font-family: 'Song Myung', serif; font-family: 'Stylish', sans-serif; } .photo { text-align : center; } .content_title { padding : 20px 300px 0px 300px; } .content_order { padding : 20px 500px 0px 300px; } .title { font-size : 50px; font-weight : bold; } .size { width : 200px; height : 20px; float : right; } .button { width : 200px; margin : auto; display : block; } function order() { alert('주문이 완료되었습니다.'); } 상품제목 가격: 10,000원 / 개 집안을 밝게 비춰주는 형광등이 꺼지고, 방 안에 어둠이 내릴 때, 은은한 빛으로 따뜻하게 공간을 감싸주는 무드등 하나 만으로 집안 분위기가 바뀔 수 있다. 주문하기 주문자 성함: 수량: 주소: 전화번호: 주문하기

기본화면

수량 선택 주문하기

from http://sssbin.tistory.com/67 by ccl(A) rewrite - 2021-09-13 00:00:57