one Book a Day

pointerEvents 쓰면 된다. 마우스 이벤트 특정상황에서 막고 싶을 때. 리액트 스타일에서도 쓸수있음. style={ type !== null ? type === "contest" ? { animation: "1s moveRight1 forwards" } : { animation: "1s fadeout forwards", pointerEvents: "none", } : {} }

//일부 예시일 뿐 공통 컨벤션은 아님.

Clean CSS clean modular Reusable Ready for growth CSS 구축 Think : about Layout of your webpage or app before writimg code Build : your layout in HTML and CSS with a consistent structure fornaming classes Architect : Create a logical architecture for your CSS with files and filders 1. Component-Driven Design(디자인에 대한 Thinking이 먼저.) modular building blocks that make up interfaces(컴포넌트 드리븐 디자인을 통해 페이..

CSS에서 사용하는 unit! 백분율, ems, rems,vh! 픽셀 이외의 단위를 사용할 떄마다 그것이 궁극적으로 px로 변한다는걸 알아야한다. 예측과 제어를 위해. 총 6단계 Declared value(author declared) - 선언된 값(140px, 66%) Cascaded value(after the cascade) - cascading으로 결정된 값 66% / font-size브라우저기본값16px Specified value(defaulting, if there is no cascaded value) 선언이 안된경우 initial value를 줌(padding의 경우 아무것도 원하지 않기 때문에 0px이 부여됨.) 부모에게서 상속 받을 수도 있음. Computed value(convert..

CSS HTML중요. 반응형 디자인 fluid layouts media queys responsive images correct units desktop-first vs mobile-first 유지가능하고 확장 가능한 코드작성 Clean easy-to-understand growth reusable how to organize files how to name classes how to strucure HTML 웹 성능 더 빠르고 크기를 작게 만드는 법.(사용자가 더 적은 데이터를 다운받아야함. Less HTTP requests less code compress code use a css preprocessor Less images Compress images 우리가 프로젝트를 하는동안 항상 자문해야될 것..

Rendering Tree 이후 Website rendering. CSS의 시각적 서식모델은 Dimensions of boxes: the box model Box type: inline, block, inline block Positioning schme: floats and positioning stacking context other elements in the rendertree(형제, 부모등) Viewport size, dimensions of images, etc. Box Model 웹 페이지의 레이아웃을 위해 알아야함. 요소가 어떻게 구성되는지 정의하는 요소 중 하나. 각각의 모든 요소는 웹페이지에서 사각형 상자로 볼수있다. 각 상자는 width height, padding 그리고 border..

-display: 어떻게 표시할 것인가?(상속 안됨) inline? 앞뒤로 줄바꿈 불가.(가로로 늘어섬, 요소 크기만큼만 차지.) block? 앞뒤로 줄바꿈 가능.(세로로 늘어섬, 가로 100%) none? 박스 생성되지 않음.(공간 사라지고 내부 요소만 남음) inline-block? 요소는 inline 내부는 block. = 박스모양이 inline처럼 가로로 늘어섬. (모양은 block 배치는 inline)(float속성 적용한 것처럼 늘어짐. -visibility: 보일것인가 말것인가?(상속 됨) visible? 기본값. 요소 보임 hidden? 요소 안보임. 그러나 공간은 차지(투명) collapse? table에서 사용하는 value. 선택 테이블의 행과 열을 숨김.(그냥 hidden이라 봐도 ..

div는 block. 안에 여러 요소를 넣기위한 영역. span은 inline. , , 과 같이 줄 안에 끼워 넣는 요소. text. inline요소는 문장 속 특정 text강조에 많이 씀.(선택해 지정) block요소는 로 가로 화면 전체 100%를 차지.(넓게 묶어 지정)

position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%) 배치기준이 요소의 왼쪽 위 꼭지점이기 때문에 transform을 통해 요소크기의 -50%만큼 이동시켜주면 수직정렬됨. .flex-container { display: flex; align-items: center; justify-content: center; } 이거도 된다는데 난 안됨.. vertical-align은 inline이나 inline-block에만(text) 적용되므로 div를 이용한 flexbox는 적용안됨. relative한 정렬이므로 그 줄의 line-height나 같은줄 인라인 요소의 크기에 따라 높낮이가 달라질 수 있음.

flex container에서 속성을 부여해 결정함. flex-direction : row, row-reverse, column, column-reverse 초깃값 row flex-wrap : nowrap, wrap, wrap-reverse 줄바꿀꺼냐? - nowrap 안바꾸고 box넘어가도 그냥 삐져나감. wrap: 아래로 줄바꿈, wrap-reverse: 위로 줄바꿈. flex-flow : 두개 동시선언. 특별한거 x order : 숫자(기본값 0) 이건 유일하게 container가 아닌 item에 부여. container의 flex-direction의 배치순서 기준 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치