CSS) background-image
1) background-image 요소의 배경에 하나 이상의 이미지를 삽입 속성 값 값 의미 기본값 none 이미지없음 none url("경로") 이미지 경로(URL) 사용법 background-image: url("경로"); .box { background-image: url("../img/image.jpg"); width: 120px; height: 80px; } ※ 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다. .box1 { /* 개별속성 */ background-image: url("../img/image1.jpg"), url("../img/image2.jpg"), url("../img/image3.jpg"); } .box2 { /* 단축속성 */ backg..
1) background 요소의 배경을 설정 속성 값 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; .box { background: red url("../img/image.jpg") no-repeat left top scroll; /* 색상 이미지 반복 위치 스크롤특성 */ } .box2 { background: url("../im..
CSS) font-family float clear .clearfix::after { content: ""; clear: both; display: block;}
1) font-family 요소를 좌우 방향으로 띄움(수평 정렬) ※ 수평정렬을 위해서 더 많이 사용된다. float을 대체하는 flex가 생겼음. 대부분은 flex박스를 사용한다. 속성 값 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 사용법 float: 방향; img { float: left; } ※ 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다. float 적용전 html Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,..
CSS) letter-spacing, word-spacing
1) letter-spacing 문자의 자간(글자 사이 간격)을 설정 속성 값 값 의미 기본값 normal 단어 사이의 일반 간격 normal 단위 px, em, cm html Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry...
CSS) text-decoration text-decoration:line-through; text-decoration:underline text-decoration:overline;
1) text-decoration 문자의 장신(line)을 지정 속성 값 값 의미 기본값 none 선 없음 none underline 밑줄을 지정 overline 윗줄을 지정 line-through 중앙 선(가로지르는)을 지정 html HEROPY1 HEROPY2 HEROPY3 HEROPY4 css .heropy1 { font-size:80px; text-decoration:none; } .heropy2 { font-size:80px; text-decoration:underline; } .heropy3 { font-size:80px; text-decoration:overline; } .heropy4 { font-size:80px; text-decoration:line-through; } 출력결과
CSS) text-indent, text-indent: -9999px;
1) text-indent (첫번째 줄의) 들여쓰기를 지정 ※ 음수 값을 사용할 수 있다. 음수 값을 사용하면 첫번 째 줄은 왼쪽으로 들여쓰기(내어쓰기) 된다. html 와이파이[1](Wi-Fi, WiFi)는 전자기기들이 무선랜(WLAN)에 연결할 수 있게 하는 기술로서, 주로 2.4 기가헤르츠 (12센티미터) UHF 및 5 기가헤르츠 (6센티미터) SHF ISM 무선 대역을 사용한다. 무선랜은 일반적으로 암호로 보호되어 있지만, 대역 내에 위치한 어느 장치라도 무선랜 네트워크의 자원에 접근할 수 있도록 개방도 가능하다. 와이파이 얼라이언스는 와이파이를 전기 전자 기술자 협회(IEEE) 802.11 표준에 기반한 모든 "무선 근거리 통신망"(WLAN) 제품으로 정의하고 있다.[2] 와이파이는 와이파이 얼..
CSS) text-align
1) text-align 문자 정렬 방식을 지정 속성 값 값 의미 기본값 left 왼쪽 정렬 left right 오른쪽 정렬 centerborder-color 가운데 정렬 justify 양쪽 맞춤 ※ direction 속성(텍스트 방향 및 쓰기 방향 지정 / ltr, rtl)의 값에 의해서 text-align 속성의 '기본 값'이 변경될 수 있다. 일반적으로 left가 기본 값으로 사용한다. ※ justyfy는 2줄 이상일때 적용된다. 강제로 글을 2줄로 늘렸을 때가 아닌 텍스트의 양이 2줄 이상이 되었을대 적용되는 것을 주의해야한다. html 와이파이[1](Wi-Fi, WiFi)는 전자기기들이 무선랜(WLAN)에 연결할 수 있게 하는 기술로서, 주로 2.4 기가헤르츠 (12센티미터) UHF 및 5 기가..