Youngble_개발스토리

css-module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다. css-module은 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋다. CRA 에서는 {이름}.module.css 라고 이름을 작성하면 css-module이 된다. 이때 module을 꼭써야 적용됨. 기존 css 같은 경우 예를들어 big 이라는 클래스명 css을 넣어줄려고한다고 생각해보자. css 파일이 2개가 있고 하나는 Box1css 하나는 Box2.css 라고 이름을 붙이고 각각 다음과 같이 css 내용을 작성하고 // Box1.css .big{ width : 200px; } // Box2.css .big{ width : 100; } 이것을 각각의 div에 넣어준다고 생각해보자. import ‘./Box..

overflow-y 속성값 header와 footer 사이의 내용물이 길어질때 해당 영역을 스크롤을 통하여 위치 고정 visible: 기본값으로 내용이 잘리지 않고 넘치는 내용은 밖으로 흘러 넘침 hidden: 내용이 잘리고 스크롤바는 나타나지않음 scroll: 내용이 잘리고 스크롤바가 나타남 auto: 내용이 잘리고 필요할때만 스크롤바가 나타남

box-sizing 을 통해 전체 width, height이 어떤걸 포함한 사이즈인지 결정할수있게 된다. 아래 코드를 보면서 이해해보자. container가 width 500, height 500을 가진 정사각형 사이즈를 만들었고 padding 으로 25px 를 주었다. 이때 box-sizing 설정이 주석처리 되어있기 때문에 어떤 사이즈를 포함하는지 아래를 보자 computed를 보면 500x500이라는 사이즈외에 padding 때문에 상하좌우에 25px씩 늘어졌다. 따라서 이 총 box 사이즈는 550x550 이 되었다. 위와같이 box-sizing을 border-box 라고 해주게되면 padding값이 있더래도 그것과 border(테두리 굵기)까지 포함하여 500x500 사이즈가 된다. 이렇게 되면..