CODING FACTORY
Navigation
  • HTML
    • HTML Tutorial
    • HTML Reference
  • CSS
    • CSS Tutorial
    • CSS Reference
  • jQuery
    • jQuery Tutorial
    • jQuery Reference
  • PHP
    • PHP Tutorial
    • PHP Reference
  • MariaDB
    • MariaDB Tutorial
    • MariaDB Reference
  • Tools
    • Visual Studio Code
  • Uncategorized

Category : CSS

CSS / Reference / accent-color

accent-color는 HTML의 폼 요소에 사용되는 강조 색상을 정하는 속성입니다. 기본적으로 브라우저는 사용자 인터페이스 요소에 특정한 시스템 색상을 사용하지만, accent-color를 사용하면 이러한 요소들의 강조 색상을 커스터마이즈할 수 있습니다.

CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법

blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.

CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법

placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.

CSS / Reference / list-style-type

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

  • <
  • 1
  • …
  • 6
  • 7
  • 8
CSS Tutorial
  • 기초
    • CSS를 HTML에 적용시키는 방법
    • 문법
    • 선택자
    • !important
    • 상속
  • 글자와 문단
    • 양쪽 배분(균등 분할) 정렬 방법
  • 양식 꾸미기
    • placeholder 꾸미는 방법
  • 표 꾸미기
    • 정렬
    • 크기
    • 테두리
    • 배경색
  • 박스 모델
    • 안쪽 여백과 바깥 여백
  • 예제
    • 링크 꾸미기
    • 인용문 꾸미기
    • 마우스 호버 효과 / 이미지 확대
    • 마우스 호버 효과 / 이미지 교체
    • 마우스 호버 효과 / 텍스트 출력
    • 마우스 호버 효과 / 서서히 길어지는 선
    • 구분선 만들기
    • 원 또는 타원 만들기
    • 삼각형 만들기
    • 마름모 만들기
    • 문자열 자르기
  • TIP
    • position 값이 fixed일 때 가운데 정렬하는 방법
    • 변수 사용하는 방법
    • 유튜브 동영상을 반응형으로 삽입하는 방법
    • ul, ol 가운데 정렬하는 방법
    • 세로 가운데 정렬하는 방법
CSS Reference
  • accent-color
  • align-content
  • aspect-ratio
  • backface-visibility
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-collapse
  • border-spacing
  • border-style
  • border-width
  • box-shadow
  • box-sizing
  • calc()
  • caption-side
  • clip
  • color
  • content
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • opacity
  • overflow
  • quotes
  • tab-size
  • text-align
  • text-decoration
  • text-indent
  • text-shadow
  • white-space
  • word-break
  • word-spacing
  • word-wrap

Copyright © CODING FACTORY All Rights Reserved.