개발에 도움이 되는/CSS (4) 썸네일형 리스트형 박스 모델(Box Model) - 박스 모델 (Box Model) 모든 HTML 요스는 box 모양으로 구성되며, 이것을 박스 모델이라고 부름 박스 모델은 HTML 요소를 padding, border, margin, content로 구분 1. content : text나 image가 들어있는 박스의 실질적인 내용 부분 2. padding : content와 border 사이의 간격 3. border : content와 padding 주변을 감싸는 테두리 4. margin : border와 이웃하는 요소 사이의 간격 - HTML 요소의 높이와 너비 관계 너비 = width + left padding + right padding + left border + right border + left margin + right margin 높이 .. Canvas (React version) - Canvas : 테두리(border)도 컨텐츠(content)도 없는 단순한 흰 도화지 같은 사각형의 공간으로 다양한 그래픽 요소를 만들 수 있다. 간단한 도형을 그리는 것은 물론 데이터 시각화, 애니메이션, 웹 게임 등을 만들 수 있다. - 기본 Step 1. tag 생성 const canvasRef = useRef(null); useEffect(() => { canvasRef.current.width = window.innerWidth; canvasRef.current.height = window.innerHeight; }, []); canvas의 크기는 반드시 태그 속성으로 해주거나 useRef를 통한 DOM 접근으로 설정해준다. CSS 사용시 화면 왜곡 및 깨짐이 발생할 수 있다. 위 사진의 .. Flex - Flex FlexBox라고도 부르며, 레이아웃 배치 전용 기능으로 고안됨. container와 item으로 구분함. direction에 따라 main axis과 cross axis가 바뀐다. - 속성 1. container 적용 속성 1) display : flex 설정 - flex : 기본 flex 설정 - inline-flex : container가 들어있는 item 크기만큼 크기 설정 2) flex-direction : 정렬 방향 - row : 가로축 기준 정렬, 기본 값 - row-reverse : row 순서를 반대로 - column : 세로축 기준 정렬 - column-reverse : column 순서를 반대로 3) flex-wrap : Wrapping(줄 넘김) 여부 - nowrap :.. 가상 요소(Pseudo Element) - 가상 요소 (Pseudo Element) 의사 요소라고도 불리며, 일반적인 CSS 선택자로는 지정할 수 없는 미세한 영역을 선택하기 위해 사용한다. 요소에 따라 적용되는 효과가 다르며, 사용하는 방법은 CSS3을 기준으로 선택자 앞에 ::사용할 요소 이름을 붙여서 사용한다. (: 하나도 가능) ex) .div::before - 가상 요소의 종류 1. ::before : 선택자의 내용(content) 바로 앞쪽에 내용(content)을 삽입한다. 2. ::after : 선택자의 내용(content) 바로 뒤쪽에 내용(content)을 삽입한다. 3. ::first-letter : 선택자의 내용 첫 글자를 선택한다. 4. ::first-line : 선택자의 첫 번째 줄을 선택한다. (반응형에 따라 바뀜).. 이전 1 다음
