-
1주차[스파르타코딩클럽] 웹개발 종합반 2022. 7. 10. 20:57
1. 웹 동작 원리
HTML 뼈대
CSS 꾸미기 (폰트, 사이즈 등)
JavaScript 움직이는 것
→ frontend
내가 보는 웹페이지는 서버에서 미리 준비해둔 것을 받아서 그려주는 것
브라우저는 요청을 보내고, 받은 HTML 파일을 그려주는 일만 한다.
새로고침은 새로 받아온다는 의미!
2. HTML
head + body
head: 페이지의 속성 정보(meta, script, link, title 등)
body: 페이지의 내용
3. CSS
<head> <style> </style> </head>
margin은 바깥 여백, padding은 안쪽 여백
4. Javascript
웹서버의 표준 언어
Java와 Javascript는 전혀 관련이 없다!
<head> <script> </script> </head>
alert("Hello World!"); // 팝업으로 뜬다. 개발할 때 활용하기에는 불편 console.log("Hello World!"); // 콘솔창으로 결과가 출력되어 개발할 때 활용각종 자료형 선언
let num = 20 let a_list = [] let a_dic = {} // 딕셔너리 key + value함수 선언
function sum(num1, num2) { console.log('숫자', num1, num2); return num1 + num2; } sum(3, 5); // 8조건문 & 반복문
let scores = [ {'name':'철수', 'score':90}, {'name':'영희', 'score':85}, {'name':'민수', 'score':70}, {'name':'형준', 'score':50}, {'name':'기남', 'score':68}, {'name':'동희', 'score':30}, ] for (let i = 0 ; i < scores.length ; i++) { if (scores[i]['score'] < 70) { console.log(scores[i]['name']); } } // 점수가 70점 미만인 사람들의 이름만 출력* 응용 *
부트스트랩 https://getbootstrap.com/docs/5.0/forms/floating-labels/
이모지 입력 https://kr.piliapp.com/facebook-symbols/
코드 체크 https://www.diffchecker.com/
구글 웹폰트 https://fonts.google.com/?subset=korean
단축키
코드정렬: Ctrl + Alt + L
주석: Ctrl + /
폰트 적용
<title>title</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet"><style> * { font-family: 'Gowun Dodum', sans-serif; } </style>배경 이미지 가져오기
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://www.msbsound.com/wordpress/wp-content/uploads/2016/06/2021%EC%84%A0%EC%9A%B0%EC%A0%95%EC%95%84homepage-1024x737.jpg"); background-position: center 20%; // % 앞 숫자를 바꿔주면 이미지 위치 조절 가능 background-size: cover;배경 이미지 가져오기
display: flex; flex-direction: column; justify-content: center; align-items: center;모바일 고려하기
max-width: 500px; // 최대 가로길이 width: 95%; // 화면 비율에 맞게 조절
1주차 숙제 팬명록 완성! * 1주차를 마치며 *
웹 개발은 처음 해보았는데 바로바로 페이지가 바뀌는 것을 확인할 수 있어 재미있었다. 결과가 바로 바뀌는 게 신기하고 재밌다. 초등학교 때 홈페이지 만들기를 잠깐 배운 적이 있는데 내용이 어느정도 연결이 되는 것 같다. 매우 내용이 많아 상황에 맞게 적절한 태그를 찾아서 활용하는 능력이 중요하다는 생각을 했다.
Javascript는 처음 사용해보았는데 C언어, python과 틀이 비슷해 자료형, 함수, 조건문, 반복문은 쉽게 이해했다. 세부적인 문법이 조금씩 달라 헷갈리지 않게 잘 정리해둘 필요가 있을 것 같다.
코드를 직접 짜는 능력이 가장 중요하다고 생각했는데 이미 만들어져 있는 코드를 적재적소에 활용하는 능력도 중요하다는 생각을 했다. (특히 부트스트랩,, 평소에 사용하는 웹페이지에서 많이 본 서식들이라 잘 익혀두고 나중에 활용해야지 했음) 만들어진 코드를 활용하기 위해서는 코드의 기본적인 구조를 이해하고 적절하게 수정할 수도 있어야 한다.
2주차도 힘내서 잘 수강해야지!
'[스파르타코딩클럽] 웹개발 종합반' 카테고리의 다른 글
3주차 (0) 2022.07.21 2주차 (0) 2022.07.17