본문 바로가기
300x250

css5

[CSS] Flex 아이템에 적용하는 속성들(1) Flex 아이템에 적용하는 속성들 flex - basis - 유연한 박스의 기본 영역 flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이). .item { flex-basis: auto; /* 기본값 */ /* flex-basis: 0; */ /* flex-basis: 50%; */ /* flex-basis: 300px; */ /* flex-basis: 10rem; */ /* flex-basis: content; */ } flex-grow 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다. -여백의 비율이다... 2021. 8. 3.
[CSS] FLEX -컨테이너에 적용하는 속성 컨테이너에 적용하는 속성 1) flex vs inline-flex .container { display: flex; //한줄을 차지 /* display: inline-flex; */ //인라인 속성처럼 플렉스아이템의 너비의 합까지만 차지 } 2)) flex-direction - 배치방향설정 .container { flex-direction: row; 가로(행 방향) 왼->오 // flex-direction: column; 세로(열 방향) 위->아래 // flex-direction: row-reverse; 반대 가로 왼 위 } 3) flex-wrap -줄넘김 처리 .container { flex-wrap: nowrap; //기본값 줄넘김x // flex-wrap: wrap; // flex-wrap: wra.. 2021. 8. 2.
[CSS] grid 개념정리(1) grid란? css는 레이아웃과 스타일을 정의할 때 사용되는 언어입니다. 그 중 grid(그리드) 레이아웃의 끝판 왕이라고 할 수 있다. Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) Grid 용어정리 그리드 컨테이너 (Grid Container) => display: grid를 적용하는, Grid의 전체 영역 그리드 아이템 (Grid Item) => Grid 컨테이너의 자식 요소 그리드 트랙 (Grid Track) => Grid의 행(Row) 또는 열(Column) 그리드 셀 (Grid Cell) => Grid의 한 칸을 가리키는 말 그리드 라인(Grid Line) => Grid 셀을 구분하는 선 그리드 번호(Grid Number) => G.. 2021. 7. 27.
[CSS] 구조적인 CSS 작성에 대한 발전 과정 Component-Driven Development(CDD) 부품 단위로 UI컴포넌트를 만들어 나가는 개발 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야할 팀원 수도 많아짐에 따라 CSS를 작성하는데 일관된 패턴이 필요해졌다. 또 다양한 디바이스들과 디스플레이를 커버해야 하기 때문에 css는 더욱 복잡해졌다. 이러한 문제점을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 나타났다. css를 작성할 때는 많은 반복적인 작업을 요구한다. color값을 찾는 일, tag를 닫는 일 등 뿐만 아니라 클래스의 상속과 같은 사항으로 css의 문서는 점점 양이 많아지고 유지관리에 많은 영향을 끼친다. CSS 전처리기 자체만으로는 웹서버가 인지하지 못하기 때문에 각 css전처리기에 맞.. 2021. 6. 1.
HTML 필수 태그 정리(2)_리스트, 정의, 인용,list,ul,ol,li,description list,div,span,quotations html 태그 정리 두번째 입니다. 오늘은 tag 크게 5개의 태그를 준비했습니다. 첫번째. lists 리스트 입니다. ul은 unordered list로 순서가 상관없을때 쓰고 ol은 order list 로 순서가 필요할때 사용합니다. ul과 ol의 자식요소로 li (list item)이 있습니다. 사용법도 간단합니다. ul 태그를 사용한 경우 오른쪽의 결과를 가집니다. ol 태그를 사용할 경우 오른쪽의 결과를 가집니다. 두번째. description list 정의 리스트 입니다. 이것은 용어를 정리할 때 사용하며, 로 정보제공할때 사용합니다. 은 정의리스트를 쓰겠다고 말하는 태그이다. 이 안에 정의 내리려는 이름 태그와 정의의 밸류값 태그 이다. 다음과 같이 사용한다. 세번째. Quotations 인.. 2021. 5. 3.
반응형

티스토리툴바