오늘도 삽질중

컴포넌트 기반 CSS 작성에 적합한 Styled-Component import styled from "styled-components"; // 태그를 렌더링 할 title component를 만듭니다. const Title = styled.h1` font-size: 1.5em; text-align: center; color: teal; `; // 태그를 렌더링 할 Wrapper component를 만듭니다. const Wrapper = styled.section` padding: 4em; background: tomato; `; const Siv = styled.button` background: ${(props) => (props.red ? "palevioletred" : "white")}; color..

html ... css #label.center{...} // id가 label이며서 동시에 class가 center인 엘리먼트를 선택한다. 셀렉터 h1 {} div {} 전체 셀렉터 * {} Tag 셀렉터 section, h1 {} ( 쉼표(,) 는 section 과 h1을 다중으로 선택한다) ID 셀렉터 #only {} class 셀렉터 .widget {} .center {} 후손 셀렉터 header h1 {} 자식 셀렉터( 후손 셀렉터와의 차이를 반드시 기억하자) header > p {} 인접 형제 셀렉터 section + p {} 형제 셀렉터 section ~p {} html ... css #label.center{...} // id가 label이며서 동시에 class가 center인 엘리먼트를 ..

CSS( = Cascading Style Sheet) 시맨틱 태그 background와 background-color 차이 em과 rem css 내용 분해하기(셀렉터와 선언블록 , css 파일 추가하는법) class와 id HTML안에 CSS를 정의하는것을 권장하지 않는 이유 -하나에 집중하기 위해 파일,구간을 구분하는 관심사 분리 측면에서 권장하지 않음. 시맨틱 태그 -이름에 의미를 붙여 부르는 태그. - class 와 id id class # . 한 문서에 하나의 요소에만 적용(유일하다) 여러개 가질 수 있음 특정 요소에 이름을 붙이는데 사용 스타일의 분류에 사용 개인정보 처리방침 이용 약관 법적 고지 .personal_information{ font-size: 30px; } .how_to_use{ ..

margin padding border margin: box의 border(경계)의 바깥에 있는 공간 html{ background-color: darkblue; } body{ background-color: darkgrey; } div{ width: 30px; height: 30px; background-color: lightcoral; } coallpsingmargin padding: box의 경계로부터 '안쪽'에 있는공간

block Inline block에서 inline으로, inline에서 block으로 user agent stylesheet Block : 옆에 다른요소들이 올 수 없다.(대부분의 box는 block 이다) - box이다. (box는 margin, padding, border 을 갖는다.) - 넓이, 높이 가진다. 대표적인 예) div, header, p Inline: 옆에 다른 요소들이 올 수 있다.(In the same line) - box 아니다 -넓이(width)와 높이(height)를 가질 수 없다. => 목차 block에서 inline으로, inline에서 block으로 대표적인 예) span, a, image, code ... 예시 //block //inline hello hello hell..