html, 스타일시트(css, scss)42 [html/css] Overflow와 Scrollbar 꾸미기 overflow 박스 안의 컨텐츠가 많아 범위를 넘어갈 때 사용하는 속성이다.hidden, scroll, visible, auto, initial, inherit 과 같은 속성값을 사용해 범위밖을 보여줄 방식을 정한다.overflow: hidden; ★★★ height 속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨긴다. 만약 height 속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰 늘어난다.overflow: scroll; ★★★영역을 벗어나는 부분은 스크롤 바가 나타나게한다.overflow: visible;기본값으로, 영역에서 벗어난 부분을 그대로 보여준다.overflow: auto; ★박스를 넘어가지 않으면 스크롤바가 보이지 않고 넘어가면 보여준다.overflow: initi.. 2024. 6. 11. [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. [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. 이전 1 2 3 4 5 6 7 다음
