본문 바로가기

전체 글128

[html/css] 반응형을 만들 때 많이 사용되는 상대 단위 1. 퍼센트(%)부모 박스 영역에서 주어진 퍼센트(%) 만큼의 영역을 차지한다. 2. vw, vhviewport width, viewport height의 약자로 보이는 화면을 기준으로 백분율(%)하여 적용한다. 3. vmax, vminviewport의 최대, 최소 넓이를 기준으로 하는 단위로, vw vh를 합친 단위이다.vmax는 vw와 vh 중 더 큰 값을 기준으로 하고, vmin 은 더 작은 단위를 기준으로 한다.위의 세 단위중에서 가장 활용도가 낮은 단위이다. 2024. 6. 10.
[html/css] 박스의 위치를 바꾸는 속성 Order, Align-self 반응형을 만들때 순서를 바꿔가며 만들고 싶을 때가 있다.그때 사용하는 속성으로, 반드시 자식박스에 적용하는 속성들이다.이 속성들도 부모박스에 flex가 적용되어 있어야만 사용할 수 있다.순서를 변경하는 속성 order order를 통해 flex 안쪽의 자식 요소의 순서를 바꿀 수 있다.기본값은 0으로 지정되어 있으며, 양수나 음수로 바꿀 수 있다.적은 수 일수록 나열 순서가 앞으로 온다.속성명{order: 속성값;} 예시로 box1~3을 감싸는 container를 반들어 보았다.부모박스 container에 flex 속성을 준 뒤 자식박스에 order를 적용해 보면 변화를 관찰하겠다. box1에 order 값 5를 주었다.현재 box2와 box3는 기본값으로 0을 가지고 있기 때문에, box1이 가장 우측.. 2024. 6. 10.
[html/css] Align-content 컨텐츠 정렬 속성 align-content 컨텐츠 정렬 속성 align-content는 flex가 적용된 container(부모박스)안에 item(자식박스)들이 많을 경우 사용하는 정렬 속성이다.자식박스들의 크기와 갯수가 많을 경우 여러 줄이 형성되는데, 이 때 각각의 줄들을 하나의 content로 본다.content들을 각각 세로로 정렬하고, 요소 사이와(between) 주위에(around) 동일한 간격을 주어서 배치할 수 있다. ■ align-content: flex-start;  컨테이너의 top에 배치■ align-content: flex-end; 컨테이너의 bottom에 배치■ align-content: center; 컨테이너의 middle에 배치■ align-content: space-between; 컨텐츠 사.. 2024. 6. 10.
[Figma] 메인 컴포넌트(Main component) 와 인스턴스 컴포넌트(Instance component) 메인 컴포넌트(Main component) 인스턴스 컴포넌트(Instance component)컴포넌트(Component)란?반복적으로 사용되는 요소를 재사용하기 위해 사용하는 기능이다.피그마에서 컴포넌트는 디자인 전체에서 재사용 할 수 있는 요소로 정의된다.버튼이나 아이콘 같은 작은 요소부터 레이아웃 전체까지 다양한 범위에서 사용 할 수 있다.핵심은, 컴포넌트의 '재사용성'에 있다.컴포넌트로 요소들을 만들고 반복하여 사용하면, 모든 요소를 한 번에 편집할 수 있기 때문에 유지보수에 용이하다.그렇기 때문에 컴포넌트들은 따로 분류하여 관리하는 것이 좋다. 예시로, 버튼을 하나 만들어보았다.컴포넌트로 만들고 싶은 요소를 클릭한 후 상단 중앙을 보면, Create component 라는 버튼을 발견할 수 있다.. 2024. 6. 5.
[html/css] display 속성 박스를 배치 하거나 고유의 속성을 바꿔주는 display 속성  display는 '보여주다'라는 의미로, block 요소와 inline 요소의 특징을 바꿀 때 사용된다.1. display: block; - 해당 요소를 block 속성으로 바꾼다.2. display: inline; - 해당 요소를 inline 속성으로 바꾼다.3. display: inline-block; - 해당 요소를 inline-block 속성으로 바꾼다.4. display: none; - 해당 요소와 영역을 모두 표현하지 않는다.(숨긴다) html 코드를 아래와 같이 짰을 때, span은 가로로 정렬되고, div는 세로로 정렬되는 것을 볼 수 있다. span-inline span-inline span-inline span-inl.. 2024. 6. 5.
[html, css] 중첩 박스 2024. 6. 4.

티스토리툴바