웹개발 종합반 1주차

1. 프로그램언어는 아래 5가지만 알면 된다

변수, 자료형, 조건문, 반복문, 함수

2. Google Pont 사용하기

Google Pont는 < head >의 < title >아래에 붙여넣기
CSS 파일은 < style >아래에 넣기

3. 자동정렬 단축키

Cmd+alt+L
Tab / Shift+Tab

4. 백그라운드 (항상 3개 같이 쓰임)

background-image: url(.....);
background-position: center;
background-size: cover;

5. 디스플레이 자동정렬 (항상 3개 같이 쓰임)

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

6. 이미지 색상조절

linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
url앞에 ,하고 붙여 넣기 하면 됨

7. 두개의 차이점 확인하기

margin -> 박스 밖의 너비 설정
padding -> 박스 안의 너비 설정

8. 백그라운드를 CSS로 설정된 < div >에 색상 추가해서 시작

background-color: green;을 넣어서 진행하는 습관 있으면 좋음

9. Mobile/창조절 설정

max-width: 000px;
width: 95%;

10. Mobile 설정 Chrome에서 확인하는 방법

마우스 오른쪽 클릭 -> inspect -> 왼쪽 상단에 모바일 버튼 클릭

11. 마우스 오른쪽 클릭 -> inspect -> console

이것은 Javascript의 script창이랑 동일하다.

12. 사진 조정 할 때 사용 할 수 있는 기능

background-position: center 00%;

13. 각각 팬명록 (Row Digga, Huckleberry P, Swings) 공간 주기

.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}

.mycards > .card로 진행 가능

14. CSS 새로운 스크립트에 작성 후 html에 외부로 지정하기

css 스크립트 생성 후 CSS 정보를 저장
html 스크립트에서 css 스크립트 불러오기
<link rel="stylesheet" type="text/css" href = "mystyle.css">