본문 바로가기

분류 전체보기83

미디어쿼리 기본 미디어쿼리란? - 미디어의 상태를 미디어에게 물어봐서 상태에 따라 다른 디자인을 할 수 있게 하는 것 - 미디어에 적합한 디자인, 적합한 표현을 할 수 있게 해주는 기술, 반응형 디자인 - 화면의 크기에 능동적으로 디자인이 반응해 최적화된 모습을 보여줌 미디어쿼리에서의 캐스케이딩 -> 500px 이하는 배경색을 빨강색으로, 501px부터 600px이하일 때 배경색을 녹색으로 하고 싶을 때 아래의 코드를 작성하면 500px 이하일때도 녹색이 된다. -> 캐스케이딩 때문 DOCTYPE html> @media screen and (max-width: 500px) { body { background-color: red; } } @media screen and (max-width: 600px) { body { b.. 2023. 11. 24.
flex - 기타 속성들 flex-wrap 랩을하면 컨테이너의 크기보다 아이템들의 크기가 크다면 아이템들의 크기의 합이 크다면, 그 아이템은 줄바꿈이 돼서 아래 줄로 내려간다는 의미 기본값은 no-wrap이다. aling-items 수직과 관련된 정렬의 결정을 한다. 기본값은 stretch가 기본값 컨테이너의 아이템들이 있고, 컨테이너가 플렉스 되는 순간에 아이템들은 컨테이너의 높이 값과 같아진다. (스트레치 상태) 자신의 컨텐트 크기만에 될려면 flex-start ,flex-end, center baseline -콘텐트들에 가상의 줄을 맞추는 것 justify-content 수평과 관련됨 flex-start ,flex-end, center - 왼쪽, 오른쪽, 가운데 alingn-content alingn-items는 컨테이너 .. 2023. 11. 24.
flex - holy grail layout holy grail (성배) Layout 아래와 같은 레이아웃을 holy grail 레이아웃이라고 한다. - 성배를 찾는 것과 같은 노력을 해서 지어진 이름 DOCTYPE html> .container { display: flex; flex-direction: column; } header { border-bottom: 1px solid gray; padding-left: 20px; } footer { border-top: 1px solid gray; padding: 20px; text-align: center; } .content { display: flex; flex-direction: row; } .content nav { border-right: 1px solid gray; } .content a.. 2023. 11. 24.
flex - grow & shrink 아이템(자식)에게 주는 속성들 1. felx-basis - flex의 기본 방향에 해당되는 엘리먼트의 크기를 지정하는 것 .item:nth-child(2) { flex-basis: 300px; /* basis - 기본 */ /* flex의 방향에 해당되는 엘리먼트의 크기를 지정하는 것 */ /* flex-grow: 2; */ } 2. flex-grow - 각각의 엘리먼트들이 여백을 채울수 있을까? - 각각의 엘리먼트들에게 커지게하는 값을 주면 여백의 공간이 각각의 엘리먼트에 1/n씩 나누어 가지는 것 - 공평하게 여백 전체를 item요소들이 나누어 가지는 것 - 1/5 씩 나눠가지계됨 여기서 2번만 2만큼 더 가지게 하고 싶다면? -> flex-grow: 2; 적용 - 1, 3, 4, 5는 1/6을 가지.. 2023. 11. 24.

티스토리툴바