DEVELOPMENT RECORD

리엑트 CSS 사용하기 개인 프로젝트를 만드려고 하는데 어디에 CSS를 두는지 몰라서 구글링을 해보았다. 기존 마크업하는 방식과 똑같았다! 1) 단순 인라인 스타일 적용 : 태그가 선언된 그자리에 바로 스타일을 지정 2) sass 파일 스타일 적용법 (css-module 방식) : CSS파일을 따로 모아두고 import 해서 스타일을 적용하는 방식 "sass": "sass --watch src/styles/scss:src/styles/css" 3) 스타일 컴포넌트 적용 : 실무에서 CSS팀이 없다면 스타일 컴포넌트로 한다. 개발자들은 이게 편함 출처 https://www.hides.kr/965 React.js SCSS 적용하는 방법 CSS는 참 애매한 존재이다. 보통 CSS로 스타일링을 하게 되면 코드가..

flex를 계속 사용해왔는데 자식요소의 크기 정하는 개념을 정확하게 이해하지 않은 상태에서 사용을 하니깐 비율 계산이 잘안됐다. flex 아이템에 적용하는 속성들 flex-basis (유연한 박스의 기본 영역) : flex 아이템의 기본 크기를 설정한다. - 각종 단위의 수가 들어간다. flex-grow (유연하게 늘리기) : flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. - flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다. flex-shrink (유연하게 줄이기) : flex-grow와 쌍을 이루는 속성, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. 단축 속성

position : 요소의 위치를 정의한다. top, bottom, left, right 좌표 프로퍼티와 함께 사용하여 위치를 지정한다. 1) static (기본위치) : position의 기본값 2) relative (상대위치) : static을 기준으로 좌표 프로퍼티를 사용하여 위치를 이동시킨다. static과의 차이점은 좌표 프로퍼티 동작 여부 뿐이다. 3) absoute (절대위치) : 부모 요소 또는 가장 가까이 있는 조상요소를 기준으로 좌표 프로퍼티만큼 이동한다. 즉, relative,absolute,fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다. 4) fixed (고정위치) : 부모 요소와 관계없이 브라우저 viewport를 기준으로 좌표프로퍼티를 사용하..

반응형 웹에서 div의 너비 높이 비율을 유지하는 방법 width 는 % position 1. 더미 이미지 만들기 : 단점 이미지를 사용해야함. 1) 비율을 유지하는 더미 이미지(png)를 만든다. div에 태그 이미지 넣어주기. 2) 클래스를 준다. cover-dummy { max-width : 100%; height : auto; (이미지 특성상 높이 auto) } -> 가변으로 사이즈 줄어든다. - 2. paading-top 이용 : 부모의 너비를 padding-top: % 으로 로 가져옴. 1) 부모 { 너비 } 2) 자식 {padding-top : &; (세로사이즈 / 가로사이즈);}

왜 클리어픽스를 사용해야 하는지 먼저 알아볼까요? HTML 문서 구조에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다. 이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 합니다. /* clearfix */ .clearfix{*zoom:1;} .clearfix:before, .clearfix:after {display: block; content: '';li..