2023.08.01(화) 슈퍼코딩 부트캠프 신입연수원 Day2 중간보고

✔ 오늘의 다짐

작은 것에 감사하세요

​

✔ WHAT TO DO

• 10:00 Daily Scrum
• Day2 입사 가이드 교육
• 13강 CSS 박스모델 ~ 18강 클론코딩(당근마켓) 수강

​

✔ 배운 내용 요약 정리

​

- Display 속성 중 Inline과 block의 차이

div와 span의 차이: 안에 내용이 없어도 div는 공간을 차지하지만(width, height), span은 그렇지 않음.

이때 인위적으로 display 속성을 설정해주면 바꿀 수 있다!

div는 block, span은 inline이 디폴트값

​

(예시)

<style>

div {

display: inline;

width: 100px;

height: 100px;

background-color: aqua;

}

span {

display: block;

width: 100px;

height: 100px;

background-color: aqua;

}

​

그러나, 굳이 바꾸지 않고 적절히 div와 span을 사용하는 것이 더 좋음!

​

- CSS 박스 모델

div 내 contents(width x height) - padding - border - margin

(예시)

div {

width: 100px;

height: 100px;

background-color: aqua;

padding: 30px;

margin: 20px;

border: 1px solid black;

}

​

margin-bottom, margin-left 같이 방향을 지정하여 크기를 설정할 수도 있음

(떨어뜨려서 배치시킬 때)

padding, border도 마찬가지로 방향 지정 가능!

​

- flexbox와 position

flexbox는 상위 요소에 옵션을 주게 되면 내부의 요소들이 특정 배치를 갖게 됨

상위 요소 display: flex;

화면에 맞게 반응형으로 배치 됨!

​

(예시)

<style>

body{

display: flex;

flex-direction: column; // 위에서 아래로 배치됨

justify-content: center; // 가로축 기준 정렬 (main axis)

align-items: center: // 세로축 기준 정렬 (corss axis)

}

div{

width: 50px;

height: 50px;

margin: 5px;

background-color: yellowgreen;

}

​

position: absolute;

상위 요소 중에서 relative 속성을 가진 요소를 기준으로 배치됨

-> position: relative;

​

스크롤 내려도 우측 밑에 버튼 있는 경우! position: fixed;

보여지는 화면 기준 배치 -> 스크롤을 내려도 위치는 그대로

​

- id와 class

id는 하나만 지정하여 스타일을 줌 (단 하나의 요소 적용)

#으로 선택

한 문서에 단 하나의 요소에만 적용

특정 요소에 이름을 붙이는 데 사용

​

class는 한 번에 스타일을 줌 (여러 개의 요소 적용)

.으로 선택

동일한 값을 갖는 요소 많음

스타일의 분류(classification)에 사용

​

button:nth-child(#) (#은 내가 지정할 숫자)로

특정 버튼 중에서 n번째 버튼을 선택할 수도 있음!

​

- CSS 의사 클래스 (pseudo class)

(예시)

button:active{ // 마우스 클릭했을 때

background-color: tomato

}

button:hover{ // 마우스 올려두었을 때

background-color: tomato

}

​

<a href="http.naver.com">네이버</a>

네이버로 이동되는 태그

a:visited{ // 방문한 경우

color: green

}

​

- 크롬 색상 추출 후 지정

:root {

--main-color: rgb 복붙;

--sub-color: rgb 복붙;

}

변수로 지정해 놓으면 나중에 가져다 쓰기 쉬움!

background-color: var(--main-color);

​

- 변화를 부드럽게 이어주는 transition

(예시)

transition: all 1s ease-in-out;

​

- 특정 요소를 변화시킬 수 있게 만드는 transform

애니메이션 사용

​

@keyframes moving-logo {

0% {

transform: scale(0.2);

}

25% {

transform: scale(2) rotateX(360deg);

}

...

​

- 미디어 쿼리

opacity는 투명도. 0이면 보이지 않음.

-> 300px보다 작다면 div가 보이지 않게 설정

​

프레임워크?

개발을 도와주는 도구 세트

기본적인 구조와 코드 제공

개발 속도를 높이고 효율적으로 일하기 위함

​

bootstrap

tailwindcss