[TIL-57~59] 스파르타 코딩클럽 웹개발 종합반 1주차 개발일지

2021.11.08 내일배움단 시작

0. 튜토리얼

1. HTML, CSS, JS

HTML

html은 문서의 형태
태그
- <div> : 구역을 묶어주는 태그.
- <h1> : 제목 태그. 그냥 큰 글씨 같지만 페이지마다 하나씩 있는 게 검색할 때 걸리기 좋음.
- <hr> : 가로선.
ctrl + alt + L : 전체선택해서 이 단축키 쓰면 태그들 정렬.
퀴즈
- <p> : 단락 구분 태그. 줄바꿈 됨.

CSS

class : 명찰. 어떤 태그에 적용할지 지목하는 기능.
- 클래스 중첩 가능 : class=" " 안에 띄어쓰기해서 또 쓰면 됨.
<div>는 보이지 않으니 background-color 깔아두고 작업.
배경에 이미지 넣기 : 세 줄이 세트! 이미지 위치를 잘 잡아줘야 함.
- background-image: url(" ");
- background-size: cover;
- background-position: center;
모든 요소들을 가운데로 가져오기
- <div>로 모든 요소들을 묶음.
- 가운데에 있다는 건 양쪽 여백이 최대라는 뜻.
  - background-color로 확인해보면 폭을 다 차지하고 있음. 여백을 줄 수가 없음.
  - 일단 폭 줄임. width: 300px;
  - 그리고 양쪽 여백 줌. margin: auto;
- 안 움직이는 경우 : 글 속성, 박스 속성이 다르기 때문. 박스는 가로 세로가 있지만 글 속성은 그런 거 없음. 글 속성이면 이렇게 해도 안 움직임. 강제로 박스 속성으로 바꿔줘야 함.
  - display: block;
폰트 적용
- 구글 폰트에서 원하는 폰트를 html 파일에 연결하고, css로 원하는 곳에 적용.
- * : 모든 태그

부트스트랩

남이 만들어놓은 예쁜 CSS 모음집
https://getbootstrap.com/docs/4.0/components/alerts/ 부트스트랩에서 제공하는 css 연결하고 여기서 원하는 디자인 찾아서 긁어오면 됨!
components에서 cards, forms 등을 이용하면 됨.
css 검색할 때는 w3school, mdn 참고.
아래 박스는 위(input)랑 다르게 생김. 더 세로로 길고 왼쪽 아래 모퉁이에 빗금 있음. 부트스트랩에서 찾아보니, <textarea>라는 태그 사용. 이 태그 안의 row(줄) 속성의 값을 몇으로 하냐에 따라 높이 달라짐.

자바스크립트

html 파일 <head> 안에 <script> 태그 만들어서 쓰면 됨.
- function 함수명() {
  작동할 내용;
  }
- 함수 적용할 태그 안에 다른 속성들처럼 onclick="함수"
브라우저에서 검사로 들어간 콘솔은 보고 있는 페이지와 연결됨.
- 콘솔에 치는 건 이어지는 코드인 셈.
- 그래서 콘솔에 html 파일에서 작성한 자바스크립트 함수 쓰면 실행 가능.
- [꿀팁] 화살표 ↑ 키 누르면 이전에 쓴 코드 다시 나옴. 여러 번 누르면 이이이전 나옴.
변수 : 박스
- let 변수명 =
자료형
- 리스트 : let list = [ 1, 2, 3 ]
- 딕셔너리 : let dict = { "name": "bob", "age": 27, "fruits": list }
  - 리스트도 안에 넣을 수 있음.
함수
- 유용한 기능
  - 나머지 구하기 : %
  - 글씨 분리 : let myemail = "...@..." / myemail.split(@)
- 함수 : 부르면 정해진 기능을 함.
조건문 : if {}, elseif {}, else {}
반복문
- for (let i = 0; i < 10; i++) {
  console.log(i)
  }
- i를 0이라 한다; i가 10보다 작으면; i에 1을 더한다

숙제

가치 있는 개발자 되기