css
-
[CSS]CSS Grid가 뭘까? 이 글로 종결한다 - CodeHan의 코딩공부FrontEnd/CSS 2022. 8. 17. 16:03
CSS Grid Flex는 한 방향 레이아웃 시스템이고 Grid는 두 방향(가로 - 세로) 레이아웃 시스템이다. Grid의 기본적인 구조 A B 부모 요소인 div.container를 Grid컨테이너라고 부르고, 자식 요소인 div.item들을 Gid Item이라고 부른다. Grid Track : grid의 행 또는 열 Grid Cell : 그리드의 한 칸을 가리킨다 Grid Line : 셀을 구분하는 선(세로선) Grid Number : Grid라인의 각 번호(가로선) Grid Gap : Grid 셀 사이 간격 Grid Area : Grid라인으로 둘러싸인 사각형 영역으로, 셀의 집합이다. grid-templete-row, grid-templete-columns : 그리드 형태 정의 columns와 r..
-
[CSS]CSS 꿀팁 정리! - CodeHan의 코딩공부FrontEnd/CSS 2022. 8. 3. 05:22
독후감인데 유용한 팁들을 적었다. 책에서 본 내용을 간략하게 요약해놨으니 유용하게 사용하길 바란다. 책에서 알게된 새로운 내용들을 많이 옮겨놨다.! img width와 max-width 차이 - width속성이 사용되면 자신의 크기에 상관없이 지정된 width로 표시된다. 따라서 이미지를 포함하는 컨테이너가 이미지보다 클 경우 이미지를 본래 크기보다 더 크게 확대시킨다는 점이 있다. 브레이크 포인트는 인기있는 디스플레이에 맞추기보다 콘텐츠와 디자인에 따라 적당한 브레이크 포인트를 결정하자. flex : 0 0 auto 첫번째 숫자는 flexbox사이에서 비율을 의미한다 1 1이면 같은 비율 2 1이면 첫번째 박스가 2번째 박스보다 2배로 크다. 두번째 숫자는 shrink로 여유 공간이 없을때 항목이 수축..
-
[CSS]CSS 기본 지식을 알아보자 - CodeHan의 코딩공부FrontEnd/CSS 2021. 11. 22. 12:59
CSS란? : Cascating Style Sheet의 약자로 HTML이나 XML로 작성된 문서의 표시방법을 표기하기위한 Style sheet이다. CSS적용 Rule Author Style > User Style > Browser와 같은 순서로 Style이 지정된다. CSS Selector 1. Universial : * / 모든 태그를 지정하는 것 2. Type : Tag / 태그를 고르는 것 3. ID : #id / 해당하는 ID만 고르는 것 4. Class : .class / 해당하는 Class만 고르는 것 5. Attribute : [] / 해당하는 속성만 고르는 것 CSS Layout 1. Block : 하나의 큰 상자같은 개념으로 1줄에 1개만 놓을 수 있다. 2. inline : 상자 안에..