[스파르타]웹개발 종합반

[스파르타]웹개발 종합반 - 1주차

혬코 2021. 12. 20. 12:38

※ 2021년 11월 1일에 다른 곳에 작성했던 내용을 포스팅했습니다.

내일배움단 9회차를 10월 11일부터 참여하여 12일부터 11일 완주 챌린지에 도전했다.
하필이면 챌린지 기간 동안 여러 일들이 많이 생긴 바람에 개발 일지를 쓰지 못해서, 11일 완주 챌린지가 끝나고 복습하면서 뒤늦게 개발 일지를 적는다.

Pycharm 단축키

전체 선택 : Ctrl + A
코드 정렬 : Ctrl + Alt + L
주석 : Ctrl + /
들여쓰기 : Tab
내어쓰기 : Shift + Tab

HTML/CSS

HTML은 뼈대=구조를 잡는 코드, CSS는 꾸미는 코드(디자인적으로 아름답게 하는 코드)이다.

HTML의 <head>

HTML의 <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> 
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요 
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a> 
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> 
input 태그입니다: <input type="text" /> 
button 태그입니다: <button> 버튼입니다</button> 
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>

CSS 기초

CSS는 <head> 부분에 <style></style> 안에 작성한다.

<!-- 사이즈 --> 
width: 100px; 
height: 100px; 

<!-- 폰트 --> 
font-size: 10px; 
color: red; 
font-weight: bold; 
/* normal : 보통(400), bold : 굵게(700), bolder : 상속된 값보다 굵게, lighter : 상속된 값보다 얇게, number : 100~900 */ 
font-family /* 글씨체 설정 */ 

<!-- 여백 --> 
margin: 20px; /* 바깥 여백 */ 
padding: 20px; /* 안쪽 여백 */ 

<!-- 배경 --> 
background-image: url(""); 
background-position: center; 
background-size: cover; 
/* 위의 3개는 세트로 자주 쓰임 */

background-color: green; 
border-radius: 10px; /* 모서리 각도(둥글게) */

강의가 진행되면서 HTML/CSS를 활욯하여 아래와 같은 로그인 페이지를 만들며 실습하는 시간도 있었다.

※ 중앙 배치
1. width 설정해주기
2. margin: auto;
(그래도 안되면) 3. display: block;

※ margin: auto 20px auto auto;
- 정중앙 상태에서 오른쪽으로 20px 여백 더 줌(위 오른쪽 아래 왼쪽 : 시계 방향 순서)

폰트 적용

구글 폰트

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

원하는 글씩체 선택 - Select this stlye 클릭
오른쪽 탭에서 <link> 복사하고 <title> 태그 아래에 붙여넣기

[CSS rules to specify families] 코드 복사

* { 
   font=family: 'Gothick A1', sans-serif; 
} 
/* "*"은 모든 태그에 적용하는 것 */

주석

코드 설명 혹은 임시로 코드가 작동하지 못하게 하고 싶을 때 사용한다.
블럭 설정 후 Ctrl + /

파일 분리

Stylesheet 파일 생성 후 붙여넣기 후 저장
원래 파일에 <title> 태그 아래 코드 입력

<link rel=stylesheet" type="text/css" href="(css파일 이름).css">

부트스트랩

일종의 CSS 모음집

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

남이 미리 작성한 CSS를 내 HTML 파일에 적용하는 것!(=위의 파일 분리와 원리 똑같음)
다만, 파일 분리는 CSS 파일이 내 컴퓨터에 저장되어있지만, 부트스트랩은 인터넷 어딘가에 CSS 파일이 존재한다.
--> 그렇기에 부트스트랩 시작 템플릿 코드를 꼭 써줘야 사용가능하다

부트스트랩 시작 템플릿

<!-- 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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>

시작 템플릿은 <head></head> 안에 작성하고, <body></body> 안에 사용 원하는 부트스트랩 코드 붙여넣기

부트스트랩을 활용하여 아래와 같은 메모장 만들어 보기!

Javascript - 맛보기

<head> 부분에서 <script></script> 안에 작성한다.
EX) 버튼에 함수 연결하기 - onclick="함수이름()"

<script> 
   function hey() { alert('안녕!'); }
</script> 

<body>
   <button onclick="hey()" type="button">내용을 입력하세요</button> 
</body>

Javascript 기초 문법

※ 실습은 크롬 - 검사(개발자 도구) - console 탭 활용

1) 변수 let 변수명 = 변수값
let a = 5
let first_name = 'ari'

※ Naming 규칙
- Snake case : 공백 대신 "_" 사용 ex) naming_rule, NAMING_RULE
- Camel case : 공백 대신 뒤에 오는 첫글자를 대문자로 표신 ex) namingRule
- Paskal case : 시작 글자를 대문자로 표시 ex) NamingRule
- Kebab case : 공백 대신 "-" 사용 ex) naming-rule, NAMING-RULE

2) 자료형
(1) 리스트 - 순서를 지켜서 가지고 있음
let 리스트명_list = [리스트1, '리스트2', ...] : 리스트 선언
리스트명_list : 전체 리스트 출력
리스트명_list[n] : (n-1)번째 리스트 출력(0부터 시작)
리스트명_list.length : 리스트 길이 출력(1부터 시작)
리스트명_list.push(리스트) : 리스트 추가

(2) 딕셔너리 - 'Key':'value' 묶음
let 딕셔너리명_dict = {'key':'value', 'key':'value'} : 딕셔너리 선언
딕셔너리명_dict : 전체 딕셔너리 출력
딕셔너리명_dict['key'] : key와 맞는 value값 출력
딕셔너리명_dict['key']=value : 딕셔너리 추가

※ 딕셔너리에 리스트 추가

※ 리스트 + 딕셔너리 - 딕셔너리가 하나의 리스트가 될 때
리스트명=[{딕셔너리1}, {딕셔너리2}] : 리스트 선언
새로운 리스트명={딕셔너리3} : 새로운 리스트 선언
리스트명.push(새로운 리스트명} : 리스트 추가

(3) 연산
- 나머지 : %

- 등호 <, >, <=, >=, ==(같다), !=(같지 않다)

(4) 문자열 나누기 - 변수명.split('나누는 기준')

여기서 "naver.com"을 "."을 기준으로 또 다시 나눈다면,

"myemail.split('@')"을 하나의 변수로 설정해 타이핑 수를 줄일 수도 있다.

(5) 문자열 합치기 - 변수명.join('대체 문자열')

3) 함수

function 함수 이름(변수들) {
함수 결과
}

ex) 두 수의 합을 함수로 만든 경우

4) 조건문

if(조건) {
true일 경우 원하는 수행 조건 or 값
} else {
flase일 경우 원하는 수행 조건 or 값
}

ex) 조건 : 나이가 20살 이상이면 성인, 미만이면 청소년 - 주어진 나이 : 24

* console.log는 콘솔창에 바로 결과값을 나타내는 명령어

- 조건을 하나 더 추가 하는 경우는 else if(조건) 추가
if(조건1) {
조건1 true일 경우 원하는 수행 조건 or 값
} else if(조건2){
조건2 true일 경우 원하는 수행 조건 or 값
} else {
flase일 경우 원하는 수행 조건 or 값
}

ex) 조건1 : 20세 이상이면 성인, 조건2 : 20세 미만 7세 초과면 청소년 아니면 아동 - 주어진 나이 : 17