스파르타코딩클럽 - 항해99/항해99 Chapter3 - react 주특기 기본

Chapter3 - css파일 만들어서 써보기

Ming 2021. 11. 17. 03:15

 

height: 100vh; /*vh는 화면을 기준으로 높이를 얼마나 줄지 정할 수 있다 vw는 넓이!!! */
이렇게 화면 대비 100%를 줬는데도 밑의 사진과 같이 공백이 남는 현상이 있는데 여백상쇄, 마진 병합 상쇄현상 이라고 부른다.

이는 h1의 자체 스타일(기울어져 있음) display 가 block이어서 발생하는데

h1 자체스타일

밑의 사진과 같이 부모요소의 display를 변경해주거나 직접 그 요소에 직접 바꿔주면 된다.

부모요소의 display 변경

 

 

 

내 코드

App.js
BucketList.js

style.css

.App {
  background-color: #eee;
  height: 100vh; /*vh는 화면을 기준으로 높이를 얼마나 줄지 정할 수 있다. */
  width: 100vw;
  display: flex; /*높이를 센터로 밀어넣어 주기위해 사용 */
}

.container {
  background-color: #fff;
  width: 50vw; /*display: flex를 하면 자식요소가 컨텐츠의 크기로 줄기때문에 넓이를 지정해준다.*/
  max-width: 350px;
  margin: auto; /*높이는 안되고 좌우만 가능 - 가운데로 밀어 넣어주기*/
  height: 80vh;
  padding: 16px;
  border: 1px solid #ddd; /*eee보다 좀 더 진한 회색*/
  border-radius: 5px;
}

.container > h1 {
  color: slateblue;
  text-align: center;
}

.container > .line {
  margin: 16px 0px; /*margin에서 두개만 주면 첫번째는 상하 두번째는 좌우 조절이다*/
}

.list-item {
  padding: 16px;
  margin: 8px;
  background-color: aliceblue;
}

 

결과물