HTML&CSS
-
css 실습 - 순서없는목록만들기HTML&CSS/실습 2023. 2. 2. 23:52
// 조건 1. 순서없는 목록의 불릿을 없앤다 2. 각 항목의 줄 간격을 글자 크기의 2배로 지정한다 3. 각 항목에서 진하게 표시된 부분의 글자색을 #ad3000로 수정한다 나의풀이 최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 페럴랙스 스크롤링 - 동적인 효과로 강한 인상을 웹 폰트 - 웹 타이포그래피를 받쳐주는 기술 해설풀이 최신 웹 디자인 트렌드 반응형 웹 디자인 - 다양한 화면 크기에 최적화하다 플랫 디자인 - 입체에서 평면으로 풀스크린 배경 - 콘텐츠에 집중 원 페이지 사이트 - 한 페이지에 모든 내용을 담다 패럴랙스 스크롤링 - 동적인 효과로 강한..
-
글자 속성, 텍스트 속성, 웹에서 스타일 속성 정리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속성 ..