분류 전체보기57 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. background 속성 background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. ex) body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; } background-color HTML 요소의 배경색을 설정함. ex) p { background-color: #FFFFCC; } background-image HTML 요소의 배경 이미지를 설정함. ex) body { background-image: url("/examples/images/img_background_good.png"); } background-repeat 설정된 배경 이미지의 반복 유무를 설정함. repeat-x; 배경이.. 2021. 4. 24. hover시 background-images 확대하기 background-image를 hover하면 이미지가 커지게 하려고 한다 원본에서는 이미지 뿐만아니라 hover시 글씨와 배경이 같이 깔리도록 작업했는데 정리해 두면 나중에 유용하게 사용할거 같아서 정리해둔다. 윗이미지는 hover전 이미지고 아래 이미지는 hover시 이미지이다. 이미지가 살짝 커지고 그 위로 로고와 배경이 한번 더 깔린다. html. Los Angeles css. .wrapper { padding: 50px 50px; max-width: 1200px; text-align: center; margin-left: auto; margin-right: auto; margin-top: 80px; } .parent { width: 45%; margin: 20px; height: 300px; b.. 2020. 11. 21. 이전 1 ··· 4 5 6 7 8 9 10 다음
