HTML&CSS/CSS
-
글자 속성, 텍스트 속성, 웹에서 스타일 속성 정리HTML&CSS/CSS 2023. 1. 29. 18:09
글자와 관련된 속성 종류 설명 font-family 글꼴 종류를 지정 font-size 글자 크기를 지정 font-style 글자를 이텔릭체로 표시할지 지정 font-weight 글자의 긁기를 지정 텍스트 스타일 속성 종류 속성 color 글자색을 지정한다 text-decoration 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정합니다 text-transform 텍스트 전체, 또는 첫 글자를 대문자료 표시 text-shadow 텍스트에 그림자를 추가 letter-spacing 글자 사이의 간격을 지정 word-spacing 단어 사이의 간격을 지정 text-align 텍스트 정렬 방법을 지정 line-height 줄 간격을 조정 웹에서 색상을 지정하는 방법 방법 설명 16진수 rgb, rgba hsl,..
-
표 스타일HTML&CSS/CSS 2023. 1. 29. 18:04
표 제목의 위치는 정해주는 caption-side속성 caption-side top | bottom top bottom 표에 테두리를 그려 주는 border 속성 border: 너비 | 스타일 | 색 셀 사이의 여백을 지정하는 border-spacing속성 border-spacing: 수평거리 수직거리 표와 셀 테두리를 합쳐주는 border-collapse 속성 border-collapse: separate | collapse 종류 설명 collapse separate 표와 테두리를 따로 표시합니다. default
-
목록스타일HTML&CSS/CSS 2023. 1. 29. 17:51
불릿 모양과 번호 스타일을 지정하는 list-style-type 속성 종류 설명 예시 disc 채운 원 모양 circle 빈 원 모양 square 채운 사각형 모양 decimal 1부터 시작하는 10진수 decimal-leading-zero lower-roman upper-roman lower-alpha 또는 lower-latin upper-alpha 또는 upper-latin none 불릿 대신 이미지를 사용하는 list-style-image 속성 list-style-image :url('이미지경로') 목록을 들여 쓰는 list-style-position 속성 list-style-position: inside | outside; 종류 설명 inside 불릿이나 번호를 기본 위치보다 들여 씁니다 outs..
-
텍스트 관련 스타일HTML&CSS/CSS 2023. 1. 26. 19:54
글자색을 지정하는 color 속성 기본형 color: - 16진수로 표현하는 방법 ex) #RRGGBB, #000000, #fffff - hsl과 hsla로 표현하는 방법 ex) hsl 은 hue(색상), saturation(제도), lightness(명도)의 줄임말. hsla은 hsl에 alpha(불투명도)를 추가한 것을 의미 - 색상을 영문명으로 표현하는 방법 텍스트를 정렬하는 text-align 속성 text-align: start | end | left | right | center | justify | match-parent 줄 간격을 조절하는 line-height속성 텍스트의 줄을 표시하거나 없애 주는 text-decoreation속성 텍스트에 그림자 효과를 추가하는 text-shadow속성 ..
-
글꼴 관련 스타일HTML&CSS/CSS 2023. 1. 21. 23:24
글꼴을 지정하는 font-family 속성 font-family:|[, ] 예시 body{ font-family: '맑은 고딕', 돋움, 굴림 } // 텍스트 지정을 할때 맑은 고딕은 두 단어 이상이기 때문에 ""(큰따옴표)로 감싸준다 글자크기를 지정하는 font-size 속성 font-size: 값1 | 값2 | 값3 font-size: | | | - 키워드를 사용해서 글자 크기 지정하기 - 단위를 사용해서 글자 크기 지정하기 종류 설명 em rem ex px pt 이탤릭체로 글자를 표시하는 font-style속성 font-style: normal | italic | oblique 글자 굵기를 지정하는 font-wieght속성 font-weight: normal|bolder|lighter|100|200..
-
스타일 우선순위 & 스타일 상속HTML&CSS/CSS 2023. 1. 20. 22:52
웹 브라우저에서는 웹 브라우저 사용자가 지정한 스타일과 웹 문서를 제작한 제작자의 스타일, 그리고 웹 브라우저가 기본으로 정해 놓은 스타일, 3가지 스타일을 함께 사용한다 가장 중요한 것은 사용자가 지정한 스타일. 그리고 제작자 스타일, 마지막으로 브라우저 기본 스타일 - 스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용한 스타일일수록 우선순위가 높아진다 !important 인라인스타일 id스타일 클래스스타일 타입스타일 - 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다 레드향 // important태그 (brown) 껍질에 붉은 빛이 돌아 레드향이라 불린다. // inline태그 (red) 레드향은 한라봉과 귤을 교배한 것으로 // p태그 (blue) 일반 귤보다 2~3배 크고, 과육..