![]()
# Grid 2차원 레이아웃으로 수직, 수평 정렬을 동시에 할 때 사용 📍 용어 정리 Track : 행(row) 으로 된 한 줄, 열(column)로 된 한 줄을 의미한다. Line : 트랙과 트랙 사이의 간격을 의미한다. Cell : 하나의 칸, 즉 아이템이 배치되는 최소단위의 영역을 의미한다. Area : 여러개의 칸, 즉 하나 이상의 셀로 이루어진 영역을 의미한다. span : 그리드 선을 기준으로 확장하는 것을 의미한다. # Grid Container (부모요소에 적용) 1. display grid inline-grid 💡이 때, 그리드를 설정했다고 끝나는 것이 아닌 몇 개의 열과 몇 개의 행을 만들어 줄 건지 결정해줘야 한다. 2. grid-template-rows, grid-template-c..
![]()
# Flex 1차원 레이아웃으로 수직, 수평 정렬 둘 중 하나만 할 때 사용 flex요소는 계속 중첩해서 사용할 수 있음! 주 축으로 정렬하던 교차 축으로 정렬하던 여백이 있어야 사용 가능하다. # Flex 구분하기 container (부모 요소) item (자식 요소) 정렬을 하기 위해서는 자식 요소를 부모 요소로 감싸주어야 한다. # Flex Container (부모요소에 적용) 1. display flex inline-flex 2. flex-direction (방향) row : Itmes을 수평으로 표시한다. (✨기본값) row-reverse : 수평에서 Itmes의 순서를 역방향으로 표시한다. column : Itmes을 수직으로 표시한다. column-reverse : 수직에서 Itmes의 순서..
![]()
# Styled Componens styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com CSS파일을 따로 만들지 않고 자바스크립트에서 CSS를 사용하게 해주는 라이브러리 CSS-JS 라이브러리 중에 제일 유명함 스타일이 첨부되는 현 컴포넌트에만 영향을 주고 다른 컴포넌트에는 영향을 미치지 못한다. 단점은 자바스크립트내에서 작성하기 때문에 코드가 보다 복잡해질 수 있다. 1. 홈페이지 접속 npm install --save styled-components 설치 2. 사용할 파일에 가서 임포트 ..
![]()
- 옮기기전에 있던 블로그에서 가져오고 싶은 글들을 조금씩 옮겨야겠다. - 배울 때 새롭게 배우면서 웹접근성에 대해 확 이해할 수 있었던 부분! wai-aria (Web Accessibility Initiative Accessible Rich Internet Applications) w3c가 출판한 기술로, 인터넷을 사용하는 사람들이 쉽게 접근할 수 있게 도와주는 장치로 스크린리더를 사용하는 유저들의 접근성을 높인다. 예를들어 rohjs bugless-101 previous 1
