배운것 :

html

태그로 이루어져 있으며, 모두 외우지 않는다. 필요할 때 구글링으로 대처

CSS

- 화면을 꾸며주는 역할을 한다. -

배경화면에 이미지를 맞추는데 사용하는 태그 3가지

함께 뭉쳐서 사용하는 태그들

background-image: url(");

background-position: cover;

background-size: center;

글씨를 가운데로 맞추는데 사용하는 태그 4가지

diaplay: flex;

flex-direction: column (coluumn은 아래로 정렬, row는 옆으로 정렬)

justify-cintent: center;

align-items:center;

기본 CSS

width - 너비, height - 높이, border: 1px solid white - 1px 박스 치고 흰색선

vorder-radius: 10px - 모서리를 둥글게

.mytitle > button:hover {border: 2px solid white} - 위에 mytitle class에 button위에 커서가 올라갈때(=hover) 스타일을 꾸며주는 CSS

- 기타 유용한 스킬 -

화면을 더 어둡게 하여 흰글씨를 더욱 잘 보이게 하는 방법

background-img:과 url 사이에 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 추가

반응형으로 모바일 버전을 생각하여 width값을 설정하는 방법

max-width: 500px;

width: 95%

너비 500px까지는 95% 유지하되 그 이상은 고정된다.

구글 폰트 입히기

https://fonts.google.com/?subset=korean 에 들어가서

'link'로 시작하는 태그를 복사해서 title아래에 붙이고

CSS rules to specify families의 태그를 style영역에 *{}안에 입력한다.

유용한 이모티콘 태그 사용하기

kr.piliapp.com/facebook-symbols/

Javascript

프로그래밍 언어로 모든 웹브라우져에서 작동하는 언어이다.

알아야 할 것은, 변수, 리스트, 딕셔너리, 조건문, 반복문

변수 - let a = 2

리스트 - a_list = ["배", "사과", "감"]

딕셔너리 - b_dict = {"name": "bob", "age": 27}

조건문 - if (b_dict["age"] < 20){alert="청소년입니다."}

반복문 - for(let i =0; i = a_list.length; i++) {print(i)}

Bootstrap

개발자를 위한 디자인 모음 사이트

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