반응형 Front-end/Css13 [CSS] 링크버튼, 박스그림자(box-shadow) box-shadow ★ 요소에 그림자를 설정하는 속성. 주로 블록요소에 설정. ★ box-shadow: 수평수치 수직수치 흐림수치 번짐수치 색상 삽입효과 ★ 흐림(blur) 수치 : 그림자 테두리가 흐려지는 수치 ★ 번짐(spread) 수치 : 그림자 크기 설정 수치 link-button.html 버튼 형태로 작성하는 링크 연결 box-shadow.html 박스 스타일링 1 박스 스타일링 2 박스 스타일링 3 박스 스타일링 4 박스 그림자 특수 효과1 박스 그림자 특수 효과2 2023. 7. 7. [CSS] 글자효과(color, text-align, text-decoration..) 텍스트 관련 속성 콘텐츠에 들어가는 글자(자식요소 포함)에 대한 설정 ★ color : 글자 색상 ★ text-align : 정렬 방식. left(기본값), center, right. ☆ vertical-align : 수직 정렬. 이미지 + 글자일 때 - top : 글자와 이미지를 윗선에 정렬. - middle : 가운데에 정렬. - bottom : 밑선에 정렬. ★ text-decoration : 장식 설정 및 제거. - overline - 윗줄 - underline - 밑줄 - line-through - 취소선(삭제선) ★ text-transform : 글자 변환. - uppercase : 소 -> 대문자로 변환 - lowercase : 대 -> 소문자로 변환 - capitalize : 단어의 첫글자.. 2023. 7. 7. [CSS] 높이, 너비 사이즈 높이(height)/너비(width) 너비부분에 주로 적용하는 속성. ★ max- : 확대될 수 있는 상한 설정 ★ min- : 축소될 수 있는 하한 설정 ※ 예) max-with: 100px; -> 100px까지만 확대됨. max_min_sizing.html 최대 너비 최소 너비 2023. 7. 7. [CSS] 여백(margin, padding) 여백 안쪽여백 - padding, 테두리 안쪽 요소 콘텐츠 바깥쪽의 공간 바깥쪽여백 - margin, 테두리 바깥쪽 부모요소의 안쪽 공간 ★ padding : 요소의 각 면에 안쪽여백을 설정 - padding-top, padding-right, padding-bottom, padding-left - padding: 50px 30px 50px 80px - top > right > bottom > left - top > right/left > bottom - top/bottom > right/left ★ margin : 요소의 각 면에 바깥쪽여뱍을 설정 - padding과 동일하게 각 면의 바깥쪽여백을 설정할 수 있음. ※ 핵심 속성값 : auto. 브라우저가 여백을 계산하여 요소를 배치. 좌우만 적용... 2023. 7. 6. [CSS] 테투리(경계선) 테두리(Border) 요소의 테두리 선을 표현하는 스타일 설정 ★ border-style : 테두리 종류(선의 모양) ★ border-width : 테두리 두께 - 단위 : px(pixel) = 1인치의 1/96 - pt(point) = 1인치의 1/72 - cm = 센티미터 - em = 출판에서 사용하는 문자의 가로 길이(M 문자) - 고정값 : thin(얇은), medium(중간), thick(두꺼운) ★ border-color : 테두리 색상 ★ border-radius : 둥근모서리 설정 ★ border : 위의 개별 속성을 하나로 처리하기 위한 단축 속성 - 두께, 종류, 색상을 하나로 같이 표현 - 순서) 두께 > 종류(필수) > 색상 - 한 방향에 같은 두께, 종류, 색상을 지정할 경우 bo.. 2023. 7. 6. [CSS] 배경 배경(Background) 요소의 배경 효과를 주기위한 스타일 설정 ★ background-color : 배경색상을 지정하는 속성 ★ background-image : 배경 이미지를 지정하는 속성 ★ background-repeat : 배경 이미지의 반복 여부 지정 속성 ★ background-attachment : 배경 이미지의 스크롤 및 고정 여부 지정 ★ background-position : 배경 이미지의 위치 지정 ※ 9곳의 위치 지정 - left : 왼쪽 세로 중앙. - right : 오른쪽 세로 중앙. - top : 위쪽 가로 중앙. - bottom : 아래쪽 가로 중앙. - center : 공간의 정 중앙 - left top : 왼쪽 상단. - left bottom : 왼쪽 하단. - ri.. 2023. 7. 6. [CSS] 색상표현 색상 처리 RGB : rgb(red, green, blue) 함수 각 색상별로 0~255 사이의 수치로 조합 rgba(red, green, blue alpha) 함수 세가지 색상과 알파(투명도) 수치로 색상 표현 알파 채널의 값 범위 : 0.0 ~ 1.0 HEX : 16진수로 색상 지정 예) #ff00ff : purple #abc -> #aabbcc의 단축 표현 HSL : Hue(색조), Saturation(채도), Lightness(밝기/명암) H : 0~360까지의 색상환의 각도로 표현 S : 0~100%의 백분률 값. 0-회색음영, 100-색조의 색 L : 0~100%의 백분률 값. 0-검은색, 100-흰색 예) hsl(0, 100%, 50%) - red colors.html RGB로 색상 지정 H.. 2023. 7. 6. CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) ● 의사 요소 선택자(pseudo-element) ★ 요소의 지정된 부분을 스타일 설정하기 위한 선택자. ※ 종류 ☆ ::first-line - 요소의 첫줄에 스타일을 설정 ☆ ::first-letter - 요소의 첫 글자에 스타일을 설정 ☆ ::before - 요소의 앞에 어떤 내용을 삽입하기 위한 선택자. ☆ ::after - 요소의 뒤에 어떤 내용을 삽입하기 위한 선택자. ★ pesudo_element_selector.html ★ Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu tincidunt lectus. Duis augue quam, tincidunt vel ante faucibus, vest.. 2023. 5. 16. CSS 가상 선택자3(:disabled, :checked) ● 가상 선택자 ★ 의사 클래스 선택자(pseudo-class) - 요소의 특수한 상태를 정의하는데 사용 - 예를 들어, 링크 요소에 마우스가 올라갔을 때, 내려올 때 등. ※ 종류 ☆ :disabled - 요소의 속성 중에 disabled 가 설정될 때의 스타일 설정. ☆ :checked - 체크 요소의 체크가되었을 때의 스타일 설정. ★ pseudo_class_selector3.html ★ 대중교통 자가용 2023. 5. 16. 이전 1 2 다음 반응형
