웹/HTML & CSS27 [html] table 태그 기본 구조 (접근성, 시맨틱) 테이블 태그는 데이터를 담고 있는 표를 만들기 위한 목적으로 사용하는 태그입니다. 하지만 예전에는 테이블 요소를 레이아웃의 용도로 많이 사용했습니다. 하지만 접근성의 문제가 생기지 않으려면 테이블 요소들은 레이아웃이 아닌 도표의 의미가 필요할 때에만 사용해야 합니다. 홈페이지 전체 구성이나 배치를 위해선 table 태그가 아닌 각각 의미에 맞는 태그를 사용해야 합니다. = 행 = 셀 colspan = 가로로 합치는 것, 열(col)들을 병합(span:걸치다)하는 속성입니다. rowspan = 세로로 합치는 것, 행(row)들을 병합하는 속성입니다. * 이 속성은 th, td에 사용할 수 있으며, 속성 값으로 병합할 셀의 숫자를 적으시면 됩니다. 대신 셀 병합을 할 경우, 병합된 개수만큼의 셀은 빼야 합니.. 2020. 3. 9. [css] scroll bar 디자인 하기 / overflow 속성 scroll bar 디자인 ::-webkit-scrollbar { width: 5.2px; } /* 스크롤 바 */ ::-webkit-scrollbar-track { background-color:#fff; } /* 스크롤 바 밑의 배경 */ ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; } /* 실질적 스크롤 바 */ ::-webkit-scrollbar-thumb:hover { background: #404040; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */ ::-webkit-scrollbar-thumb:active { background: #808080; } /* 실질적 스크롤 바를 클릭할 때 */ ::-webk.. 2020. 3. 3. [font] font 손쉽게 변환해주는 사이트 https://transfonter.org/ https://onlinefontconverter.com/여기 눌러서 바로 변환가능! Online @font-face generator The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their transfonter.org eot , woff 변환 2019. 12. 20. [CSS] flexbox 레이아웃 flexbox 레이아웃 Flex ※ flex 효과를 주려면display : flex값을 주어야 한다. # flex-container flex-direction (row/column/row-reverse/column-reverse) -> 이 속성에 따라서 주축과 교차축이 바뀌게 되니 유의! justify-content (주축기준 , 좌 우)flex-startcenterflex-endspace-between (a,b 사이 공간)space-around (a,b주위의 모든 공간)space-evenly (공간을 동일하게)row(column)-reverse align-content (교차축기준, 상 하)flex-startflex-endcenterspace-betweenspace-aroundstretch flex-w.. 2019. 1. 22. 이전 1 2 3 4 5 6 7 다음