html+css24 box model 속성 (content, padding, border, margin, outline) content 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. ex) div { background-color: red; padding: 50px; border: 20px solid maroon; margin: 50px; } padding 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left ex) div.four { padding: 10px 20px 30px 40px;} = padding-top: 10px; padding-right: .. 2021. 4. 25. 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. 이전 1 2 3 4 다음