본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브

Reference/CSS119

font-style 속성은 폰트의 스타일을 설정합니다. Reference/CSS font-style 속성은 폰트의 스타일을 설정합니다. by @webs 2022. 12. 8. font-style font-style 속성은 폰트의 스타일을 설정합니다. 특징 설명 기본값 font-style : normal 적용 font 버전 CSS1 사용성 ★★★★☆ 정의(Definition) font-style 속성은 폰트의 스타일을 설정합니다. 폰트와 관련된 속성 font 속성은 폰트에 관한 설정을 일괄적으로 설정합니다. font-family 속성은 폰트 종류를 설정합니다. font-size 속성은 폰트 사이즈 속성을 설정합니다. font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. font-style 속성은 폰트의 스타일을 설정합니다. font-.. 2022. 12. 8.
font-size 속성은 폰트 사이즈 속성을 설정합니다. Reference/CSS font-size 속성은 폰트 사이즈 속성을 설정합니다. by @webs 2022. 12. 8. font-size font-size 속성은 폰트 사이즈 속성을 설정합니다. 사이즈는 키워드를 사용할 수 있지만, 잘 사용하지 않습니다. 사이즈는 CSS 단위를 통해 주로 설정하는 편이며, 반응형 작업시 em, rem, vw를 많이 사용합니다. 특징 설명 기본값 font-size : medium 적용 font 버전 CSS1 사용성 ★★★★☆ 정의(Definition) font-size 속성은 폰트 사이즈 속성을 설정합니다. font-size 속성은 키워드 또는 CSS 단위로 설정할 수 있습니다. 일관된 크기의 폰트를 작성하려면 px 단위를 사용하지만, 상대적으로 변해야 하는 사이즈라면,.. 2022. 12. 8.
font-family 속성은 폰트 종류를 설정합니다. Reference/CSS font-family 속성은 폰트 종류를 설정합니다. by @webs 2022. 12. 7. font-family font-family 속성은 폰트 종류를 설정합니다. 사용자 컴퓨터에 폰트가 설치되어 있다면, 폰트가 구현됩니다. 만약 폰트가 없다면 나오지 않지만, 웹폰트(@font-face)를 설정한다면, 자동으로 다운받고 브라우저에 해당 폰트를 구현할 수 있습니다. 사용자마다 폰트가 없을수도 있기 때문에 여러가지 폰트 설정이 가능하며, 쉼표(,)를 통해 연속적으로 작성하면 됩니다. 폰트 이름이 한글이거나 빈칸이 있다면, 오류를 일으킬 수 있으니 큰따옴표("")로 감싸주면 됩니다. 특징 설명 기본값 font-family : 폰트 이름 적용 font 버전 CSS1 사용성 ★★★★☆.. 2022. 12. 8.
border-collapse 속성은 표의 테두리 분리 여부를 설정합니다. Reference/CSS border-collapse 속성은 표의 테두리 분리 여부를 설정합니다. by @webs 2022. 12. 7. border-collapse border-collapse 속성은 표의 테두리 분리 여부를 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고, 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 ,.. 2022. 12. 7.
border-spacing 속성은 표의 테두리 간격을 설정합니다. Reference/CSS border-spacing 속성은 표의 테두리 간격을 설정합니다. by @webs 2022. 12. 7. border-spacing border-spacing 속성은 표의 테두리 간격을 설정합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다. 테이블은 제목을 표시하기 위해 을 사용하고, 셀 요소를 그룹화하기 위해 과 을 사용합니다. 테이블 전체 구조를 분리하기 위해 , , 를 사용하며.. 2022. 12. 7.
text-shadow 속성은 텍스트 그림자를 설정합니다. Reference/CSS text-shadow 속성은 텍스트 그림자를 설정합니다. by @webs 2022. 11. 30. text-shadow text-shadow 속성은 텍스트 그림자를 설정합니다. x축, y축 길이를 통해 그림자의 길이를 설정하고, blur를 통해 뿌연 정도를 컨트롤 할 수 있습니다. 다중 속성을 이용하여 실제 느낌의 그림자 연출도 가능합니다. 특징 설명 기본값 text-shadow : none 적용 text 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) text-shadow 속성은 텍스트 그림자를 설정합니다. text-shadow 속성의 blur는 뿌연 정도를 나타내는 속성입니다. text-shadow 속성의 color를 설정하지 않으면 기본 컬러색으로 설정됩니다. 비.. 2022. 11. 30.
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.

티스토리툴바