웹개발 1주차 교육 목표
- 서버와 클라이언트의 역할에 대해 이해한다.
- HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
- Javascript 기초 문법을 익힌다.
1) 서버와 클라이언트
아무 홈페이지에서 바꾸고 싶은 곳을 우클릭한 후 '검사' 버튼을 클릭해보자
그리고 바꿔보자 내가 원하는 맛으로
(부트스트랩 Home 버튼 -> 코딩)
바꾸긴했는데, 이거 괜찮나?
괜찮다
바꾼 내용은 내 컴퓨터에서만 식별이되며 새로고침을 하는 순간 원래대로 돌아온다
(새로고침을 하면 원상태로 복귀된다)
이게 과연 뭘까
그렇다
이게 바로 서버와 클라이언트의 관계인 것이다.
클라이언트가 서버에 정보를 요청하면 서버는 해당 정보를 클라이언트에게 보여준다.
2) HTML, CSS의 기초 지식을 이해한다, 부트스트랩을 가져다 쓸 줄 안다!
HTML은 웹 뼈대 제작 / CSS는 웹 꾸미기
CSS는 HTML파일 내 head 태그 안에 style 태그를 넣고 그 안에 작성한다.
<CSS 기초>
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-family
color
간격
margin
padding
이런 것들이 있다.
그 외 구글 폰트 삽입, 주석, CSS파일 분리가 있다.
CSS 파일 분리는 style태그의 길이가 길어지면 가독성이 떨어지기 때문에 해준다.
방법은 쉽다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">이렇게 HTML 파일 head 안에 작성해주면 된다
부트스트랩
예쁜 CSS를 미리 모아둔 것
CSS를 잘 쓰는 것과 예쁜 디자인을 하는 것은 다르기에 사용한다.
<부트스트랩 시작 탬플릿>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</head>이렇게 작성해주고
부트스트랩 홈페이지에서 원하는 양식을 찾아 사용하면 된다.
3) Javascript 기초 문법을 익힌다.
Javascript란 무엇인가?
프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어이다.
"역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있습니다.
Javascript는 기본적으로 HTML파일 내 script태그 안에 작성을 해준다.
<변수>
let a = 2
let b = 3
console.log(a+b) //3출력<리스트>
let name_arr = ['김철수', '박하나', '조은대', '설은대']
for(int i = 0; i<name_arr.length; i++){
console.log(name_arr[i])
}<딕셔너리 + 리스트>
let citizens = [
{'name': '김이나', 'age':29}
{'name': '박푸린', 'age':63}
]
new_name = {'name': '최후방', 'age': 18}
citizens.push(new_name)
//citizens = [
{'name': '김이나', 'age':29}
{'name': '박푸린', 'age':63}
{'name': '최후방', 'age': 18}
]
console.log(citizens[1]['name']
//'박푸린'==> 딕셔너리와 리스트는 가독성이 좋고 환경 변화에 쉽다.
그 외 함수, 반복문, 조건문 등이 있다.
<1주차 완강 후 제출한 과제>
