협업경험을 쌓고 기본기를 다지고 싶어 부트캠프를 시작하게 되었습니다. 기존에 알고 있던 내용 중 새로이 알게 된 내용들 위주로 작성하게 될 것 같습니다.
1_1주차에 배운 내용입니다.
1. 정렬
- 파이참의 정렬은 ->
ctrl + alt + L(Intelli J와 동일하다.) 실무에선 정렬시 tab도 많이 활용한다고 한다.
2. CSS
- margin, padding
이건 이전에도 애매하게 알고 있던 상태로 사용해왔었다.margin은 바깥여백, padding은 안쪽여백이다. - CSS작업시 태그영역에 대해 헷갈린다면, background-color를 활용해보자.
- 배경이미지 삽입시 사용되는 코드 (아래 코드가 자주 함께 쓰임)
background-image: url(이미지주소); //배경 이미지를 가져옴 background-position: center; //배경 이미지의 위치를 조절함 background-size: cover; //배경 이미지의 크기를 설정함 - 폰트 사이트(구글웹폰트)
원하는 폰트를 정한 뒤, html head태그 내에 link해주고 전반적으로 폰트를 적용하기 위해 css에* { font-family: ~;}를 삽입한다. - 이미지 어둡게 하기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))옵션을 넣는다. - 이모티콘 모음(⭐링크⭐)
- 화면 폭이 375px보다 작으면 너비의 95%만 보여주고, 넘으면 375px로 보여주게 하려면?
width: 95%; max-width: 375pxmax-width는 요소의 최대너비 - 요소들을 자유자제로 위치 시키는 flex (아래 코드가 자주 함께 쓰임)
flexbox 설명링크display: flex; flex-direction: column; //or row, flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정 align-items: center; //align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정 justify-content: center; //justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.
3. JS
- 크롬의 콘솔탭은 script태그의 이어진 부분이다. (ide로 바꾸어가며 볼 필요가 없었던 것)
참고자료
