html+css23 Image Sprite 속성 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다. 이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다. .. 2021. 4. 24. table 속성 border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음. 이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 됨. 태그와 태그가 각각 자신만의 테두리를 가지고 있기 때문에 두줄로 나타남. ex) table, th, td { border: 2px solid orange; } border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함. ex) table, th, td { border: 2px solid orange; } table { border-collapse: collapse; } border-spacing 테이블 요소(th, td)간의 여백을 설정함. ex) table, th, td { border: 1px solid black; } tabl.. 2021. 4. 24. list-style 속성 list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음. ex) ul { list-style: square inside url("/examples/images/img_list_marker.png"); } list-style-type 리스트 요소의 마커(marker)를 설정함. circle : ○ 속이 빈 원형 square : 속이 채워진 사각 upper-alpha : 알파벳 대문자 lower-roman : 아라비아 숫자 ex) .circle { list-style-type: circle; } list-style-image 리스트 요소의 마커로 사용할 이미지를 설정함. ex) .imageMarker { list-style-image: url("/examples/imag.. 2021. 4. 24. link 속성 링크(link)에는 color, font-family, background 속성 등 CSS의 다양한 속성들을 적용할 수 있습니다. 또한, text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거할 수도 있습니다. link 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태. ex) a:link { color: olive; } visited 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태. ex) a:visited { color: brown; } hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태. ex) a:hover { color: coral; } active 사용자가 마우스로 링크를 .. 2021. 4. 24. font 속성 CSS에는 두 가지의 글꼴 집합(font family)이 존재합니다. - generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등) - font family : 특정 글꼴 집합 ("Times", "Courier" 등) font 모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음. font-family 텍스트의 글꼴 집합(font family)을 설정함. ex) .serif { font-family: "Times New Roman", Times, serif; } font-style 주로 이탤릭체를 사용하기 위해 사용함. normal : 텍스트에 어떠한 스타일도 적용하지 않음. italic : 텍스트를 이탤릭체로 나타냄. oblique : 텍스트를 .. 2021. 4. 24. text 속성 color 텍스트의 색상을 설정함. ex) body { color: red; } direction 텍스트가 쓰이는 방향을 설정함. 기본적으로 왼쪽에서 오른쪽 방향으로 써집니다. left-to-right(ltr):텍스트가 왼쪽에서 오른쪽 방향으로 써짐 right-to-left(rtl):텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써짐. ex) .rightToLeft { direction: rtl; } letter-spacing 텍스트 내에서 문자 사이의 간격을 설정함. ex) .incLetterSpacing { letter-spacing: 10px; } word-spacing 텍스트 내에서 단어 사이의 간격을 설정함. -문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정 ex) .incWordSpac.. 2021. 4. 24. 이전 1 2 3 4 다음