본문 바로가기
CSS HTML JAVASCRIPT

Reference/CSS119

text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. Reference/CSS text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. by @webs 2022. 11. 29. text-emphasis-color text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. text-emphasis-style을 속성을 설정하고, 색상을 표시합니다. 특징 설명 기본값 text-emphasis-color : currentcolor 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다. 비교(Compare) text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. text-emphasis-style .. 2022. 11. 30.
text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. Reference/CSS text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. by @webs 2022. 11. 29. text-emphasis-position text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. 이 속성은 아시아권 언어(일본어, 한국어, 중국어 등)를 위한 강조 표시이며, 가로 모드일 때에는 left, right 속성으로 컨트롤 할 수 있습니다. 특징 설명 기본값 text-emphasis-position : over right; 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. text-emphasis-pos.. 2022. 11. 30.
text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. Reference/CSS text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. by @webs 2022. 11. 29. text-emphasis-style text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. 글씨를 강조하고 싶을때 글시 위에 강조 표시를 설정할 수 있으며, 위치, 색상, 스타일을 설정 할 수 있습니다. 특징 설명 기본값 text-emphasis-style : none 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다. 비교(Compare) text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. text.. 2022. 11. 30.
text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. Reference/CSS text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. by @webs 2022. 11. 29. text-emphasis text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. 색상 변경은 text-emphasis-color, 위치 변경은 text-emphasis-position, 모양 변경은 text-emphasis-style로 설정이 가능합니다. 특징 설명 기본값 text-emphasis: text-emphasis-style | text-emphasis-color 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다. text-emphasi.. 2022. 11. 30.
hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. Reference/CSS hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. by @webs 2022. 11. 19. hyphens hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. 단어에서 줄바꿈이 될때 하이픈(-)으로 연결해주는 작업을 설정하는 방법입니다. 특징 설명 기본값 hyphens : manual 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 여부를 설정합니다. word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. overflow-w.. 2022. 11. 21.
overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. Reference/CSS overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. by @webs 2022. 11. 19. overflow-wrap overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. 태그와 동일한 기능입니다. 한국어는 적용되지 않으며, 영어에 적용됩니다. 특징 설명 기본값 overflow-wrap : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. overflow-wrap 속성은 한국어에는 적용되지 않습니다. overflow-wrap 속성은 태그와 기능이 동일합니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 .. 2022. 11. 21.
word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. Reference/CSS word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. by @webs 2022. 11. 19. word-break word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. 줄바꿈을 할 때 단어를 기준으로 할지 말지 여부를 설정 할 수 있으며, 한국어를 기준으로 word-break: keep-all; 속성만 사용 가능합니다. 특징 설명 기본값 word-break : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. 줄바꿈과 관련된 속성 및 태그 white-space 속성은 줄바꿈, 공백 여부를 설정합니다. word-brea.. 2022. 11. 21.
white-space 속성은 줄바꿈 및 공백을 설정합니다. Reference/CSS white-space 속성은 줄바꿈 및 공백을 설정합니다. by @webs 2022. 11. 19. white-space white-space 속성은 줄바꿈 및 공백을 설정합니다. white-space: pre 속성은 태그와 기능이 동일합니다. 마크업의 공백은 화면으로 표현될 때 한칸의 공백으로 인식합니다. white-space 속성 마크업상의 공백을 화면에 그대로 표현해 주며, 줄바꿈이나 줄 속성도 설정 할 수 있습니다. 특징 설명 기본값 white-space : normal 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) white-space 속성은 줄바꿈, 공백을 설정합니다. white-space : pre 속성은 태그와 기능이 동일합니다. whit.. 2022. 11. 21.
text-overflow 속성은 텍스트가 영역을 벗어 났을 때 속성을 설정합니다. Reference/CSS text-overflow 속성은 텍스트가 영역을 벗어났을 때 속성을 설정합니다. by @webs 2022. 11. 16. text-overflow text-overflow 속성은 텍스트가 영역을 벗어났을 때 속성을 설정합니다. 텍스트가 줄바꿈이 없이 한줄이고 지정한 영역 이외에는 안보이도록 설정해야 text-overflow 속성 설정이 가능합니다. 보통 한줄 효과를 쓸 때 많이 사용합니다. 텍스트가 줄바꿈이 없이 한줄로 표현하려면, white-space: nowrap을 설정하고, 지정한 영역 이외에 안보이도록 설정하려면, overflow: hidden을 설정해야 합니다. 특징 설명 기본값 text-overflow : clip 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(D.. 2022. 11. 16.
text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. Reference/CSS text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. by @webs 2022. 11. 16. text-justify text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. 양쪽 정렬을 할 경우 간격 등에 문제가 생길 수 있기 때문에, 이 부분을 단어 또는 글자 사이에 간격을 조정하여, 정렬을 깔끔하게 할 수 있습니다. 일반적인 영어 보다는 아랍어나 일본어 등에 미세한 조정이 필요할 때 사용합니다. 특징 설명 기본값 text-justify : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정합니다. text-justify 속성은 tex.. 2022. 11. 16.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다. Reference/CSS text-indent 속성은 문단 들여쓰기 속성을 설정합니다. by @webs 2022. 11. 15. text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다. 한글에서 들여쓰는 문단의 첫 번째 줄에 빈칸을 만들어 문단이 시작되는 것을 말합니다. text-indent 속성은 빈칸 부분을 설정해 주는 역할을 하며, text-indent: -9999px 속성을 이용하여 글씨를 숨길때 쓰기도 했습니다. 하지만 이 방법은 접근성에 맞지 않으므로 추천하지 않습니다. 특징 설명 기본값 text-indent : 0 적용 text 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) text-indent 속성은 문단 들여쓰기 속성을 설정합니다. text-inde.. 2022. 11. 16.
text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. Reference/CSS text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. by @webs 2022. 11. 9. text-underline-offset text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. 텍스트에 underline 속성이 설정된 경우와 텍스트 언더라인 스타일이 solid, double, dotted, dashed, wavy인 경우에 설정 가능합니다. 특징 설명 기본값 text-underline-offset : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-underline-offset 속성은 언더 라인의 오프셋 값을 설정합니다. 텍스트 라인과 관련된 속성 text-decorat.. 2022. 11. 15.
text-underline-position 속성은 언더 라인의 위치를 설정합니다. Reference/CSS text-underline-position 속성은 언더 라인의 위치를 설정합니다. by @webs 2022. 11. 13. text-underline-position text-underline-position 속성은 언더 라인의 위치를 설정합니다. text-underline이 설정되어 있는 경우 라인의 위치를 under로 설정할 수 있으며, left와 right속성은 글씨가 세로 모드일 경우에 적용이 됩니다. 특징 설명 기본값 text-underline-position : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-underline-position 속성은 언더 라인의 위치를 설정합니다. text-underline-position 요.. 2022. 11. 13.
text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. Reference/CSS text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. by @webs 2022. 11. 9. text-decoration-skip-ink text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정합니다. 글씨와 라인이 겹칠 때 어떤 부분을 우선순위로 할지 정해줍니다. 라인의 종류에는 solid, double, dotted, dashed, wavy가 있으며, 글씨 크기나 라인의 크기에 따라 글씨가 겹쳐서 안보이는 경우 설정하기 좋습니다. 특징 설명 기본값 text-decoration-skip-ink : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-decoration-skip-i.. 2022. 11. 12.
text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. Reference/CSS text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. by @webs 2022. 11. 11. text-decoration text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. 라인의 굵기를 설정하고 싶다면, text-decoration-thickness 속성을 사용하고, 라인의 색상을 설정하고 싶다면, text-decoration-color 속성을 사용하고, 라인의 종류를 설정하고 싶다면, text-decoration-style 속성을 사용하고, 라인의 위치를 설정하고 싶다면, text-decoration-line 속성을 사용합니다. 여러개의 효과를 동시에도 사용이 가능합니다. 특징 설명 기본값 text-decoration-co.. 2022. 11. 11.
text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. Reference/CSS text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. by @webs 2022. 11. 9. text-decoration-thickness text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. text-decoration: underline을 설정해야, 굵기 조절이 가능합니다. 특징 설명 기본값 text-decoration-thickness : auto 적용 text 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정합니다. text-decoration-thickness 속성은 text-decoration-line .. 2022. 11. 11.
text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다. Reference/CSS text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다. by @webs 2022. 11. 9. text-decoration-line text-decoration-line 속성은 라인의 위치를 설정합니다. 언더라인을 아래, 위 또는 중간에 설정할 수 있으며, 여러가지 라인을 동시에도 설정할 수 있습니다. 라인의 컬러, 종류, 굵기도 설정이 가능하며, 글씨와 라인의 겹칩 현상, 포지션 값 등을 디테일하게 수정할 수 있습니다. 특징 설명 기본값 text-decoration-line : underline 적용 text 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) text-decoration-line 속성은 글자 라인의 위치 속성을 설정합니다. 텍.. 2022. 11. 10.
text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. Reference/CSS text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. by @webs 2022. 11. 9. text-decoration-color text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. 컬러 속성을 적용하기 위해서는 기본적으로 text-decoration-line: underline이 설정 되어 있어야 합니다. 언더 라인의 위치와 색상, 종류 등도 세부적으로 변경이 가능합니다. 특징 설명 기본값 text-decoration-color : currentcolor 적용 text 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. te.. 2022. 11. 9.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. Reference/CSS text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. by @webs 2022. 11. 4. text-align-last text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. 특징 설명 기본값 text-align-last : auto 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다. text-align-last : start 속성은 left와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-align-last : end 속성은 right와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-al.. 2022. 11. 8.
text-align 속성은 텍스트 정렬 방식을 설정합니다. Reference/CSS text-align 속성은 텍스트 정렬 방식을 설정합니다. by @webs 2022. 7. 4. text-align text-align 속성은 텍스트 정렬 방식을 설정합니다. start와 end 속성은 텍스트의 방향이 다를 경우 left와 right의 차이점을 알 수 있습니다. 특징 설명 기본값 text-align : left 적용 text 버전 CSS1 사용성 ★★★★★ 정의(Definition) text-align 속성은 텍스트 정렬 방식을 설정합니다. text-align : start 속성은 left와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-align : end 속성은 right와 같아 보이지만 글씨의 방향이 반대라면 차이가 납니다. text-alig.. 2022. 11. 5.
animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. Reference/CSS animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. by @webs 2022. 11. 4. animation animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animati.. 2022. 11. 4.
animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. Reference/CSS animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. by @webs 2022. 7. 4. animation-timing-function animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-timing-function : linear; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-timing-fun.. 2022. 11. 3.
animation-play-state 속성은 애니메이션 진행상태를 설정합니다. Reference/CSS animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. by @webs 2022. 7. 4. animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-name : none; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션과 관련된 속성.. 2022. 11. 2.
animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. Reference/CSS animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. by @webs 2022. 7. 4. animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-name : none; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션과 관련된 속성.. 2022. 11. 1.
animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. Reference/CSS animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. by @webs 2022. 7. 4. animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-iteration-count : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-iteration-count .. 2022. 11. 1.
animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. Reference/CSS animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. by @webs 2022. 7. 4. animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-fill-mode : none 적용 animation 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정.. 2022. 10. 31.
animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. Reference/CSS animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. by @webs 2022. 7. 4. animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-duration : 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. animation-.. 2022. 10. 29.
animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. Reference/CSS animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. by @webs 2022. 7. 4. animation-direction animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-direction : normal; 적용 animation 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. a.. 2022. 10. 28.
animation-delay 속성은 애니메이션 지연 시간을 설정합니다. Reference/CSS animation-delay 속성은 애니메이션 지연 시간을 설정합니다. by @webs 2022. 7. 4. animation-delay animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. 특징 설명 기본값 animation-delay: 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션과 관련된 속성(Animation Relat.. 2022. 10. 26.

티스토리툴바