내일배움캠프 TIL

230921 내일배움 사전캠프 19일차

낭 콩 2023. 9. 21. 21:02

코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

 

1-11) [추억앨범] 프로젝트1

배경 이미지 설정할 때 3줄 무조건 사용한다고 보면 됨.

background-image: url(이미지 url 주소)

background-position: center -> 이미지를 가운데로 정렬해줌.

background-size: cover -> 이미지를 화면에 딱 맞게 맞춰줌.

 

 

 

-> 이정도가 많이 쓰이는 CSS 요소들이라고 보면 됨.

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

 

- 클래스에 포함된 요소 나타낼때 .mytitle > button 이렇게 써주면

mytitle 클래스 하위에 있는 버튼을 나타냄.

 

- alt + shift + f : ctrl + a 로 모든 코드 긁은 후 정렬 가능 (내 컴에서는 저장하면 저절로 줄이 맞춰져서 사용은 안함)

 

- 부트스트랩 이용하는데 위에 링크 안 걸어 놓고 왜 안되지 .. 이러고 있었음. 구글 폰트나 부트스트랩 등 이용할 때에는 link 또는  import 잘 되어 있는지 확인하기 !!

 

1-12) [추억앨범] 프로젝트 2

 

 

 

-> 박스에 그림자 넣어주기.

box-shadow : 그림자의 위치, 그림자 길이, 그림자 시작위치, 그림자 색상

 

2-2) [스파르타플릭스] 프로젝트 1

 

- 부트스트랩 jumbotron 가져오기: 페이지 검사 -> 원하는 부분 우클릭 후 edit as HTML 누르고 코드 가져오면 됨.

 

2-6) JS 기초문법 1

 

js 코드는 <script>라는 태그 안에 만들어줌.

 

2-7) JS 기초문법 2

 

리스트 : 순서가 중요 []

딕셔너리 : key-value {}

 

2-8) JS 기초문법 3

 

조건문 : if-else

반복문 : 리스트 같은 꾸러미와 같이 쓰임. 각각의 요소에 반복을 해줘야 하니까.

 

js를 쉽게 사용하기 위해 라이브러리로 만들어 놓은 것 -> jquery