Programmers

1) clear float 속성이 적용되지 않도록 지정(해제) 속성 값 값 의미 기본값 none 요소 띄움 허용 none left 왼쪽 띄움 해제 right 오른쪽 띄움 해제 both 양쪽(왼쪽, 오른쪽) 모드 띄움 해제 사용법 clear: both; ※ 보통은 clear: both;를 사용한다. 1. clear: both; 적용전 html 1 2 3 1 2 3 css .box { width: 100px; height: 100px; margin: 10px; background: tomato; float: left; } .box2 { width: 100px; height: 100px; margin: 10px; background: green; /* clear: both; */ } 출력결과 2. clear:..

1) display 수정 float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정됨 사용법 1. float 속성 추가전 html 1 2 3 css span { width: 100px; height: 100px; margin: 10px; background: tomato; } 출력결과 2. flaot 속성 추가 후 html 1 2 3 css span { width: 100px; height: 100px; margin: 10px; background: tomato; float: left; } 출력결과 주의사항 지정값 변화값 inline block inline-block block inline-table block table-row block table-row-group 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,..

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...

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; } 출력결과

1) text-indent (첫번째 줄의) 들여쓰기를 지정 ※ 음수 값을 사용할 수 있다. 음수 값을 사용하면 첫번 째 줄은 왼쪽으로 들여쓰기(내어쓰기) 된다. html 와이파이[1](Wi-Fi, WiFi)는 전자기기들이 무선랜(WLAN)에 연결할 수 있게 하는 기술로서, 주로 2.4 기가헤르츠 (12센티미터) UHF 및 5 기가헤르츠 (6센티미터) SHF ISM 무선 대역을 사용한다. 무선랜은 일반적으로 암호로 보호되어 있지만, 대역 내에 위치한 어느 장치라도 무선랜 네트워크의 자원에 접근할 수 있도록 개방도 가능하다. 와이파이 얼라이언스는 와이파이를 전기 전자 기술자 협회(IEEE) 802.11 표준에 기반한 모든 "무선 근거리 통신망"(WLAN) 제품으로 정의하고 있다.[2] 와이파이는 와이파이 얼..

1) color 문자의 색상을 지정, 요소의 속성이 아닌 글자의 색상을 바꿀 때 사용하는 속성 속성 값 값 의미 기본값 색상 문자의 색상을 지정 reb(0, 0, 0) 색상 표현 표현 의미 예시 색상이름 브라우저에서 제공하는 색상의이름 red, blue Hex 색상코드 16 진수 색상(Hexadecimal Colors) #000000 RGB 빛의 삼원색 rgb(255, 255, 255) RGBA 빛의 삼원색, 투명도 rgba(255, 0, 0, .5) HSL 색상, 채도, 명도 hsl(120, 100%, 50%) HSLA 색상, 채도, 명도, 투명도 hsla(120, 100%, 50%, .3) ※ 위 표는 색상을 이용하는 모든 속성(property)의 값으로 사용할 수 있습니다. RGBA: Red, Gr..

1) font-family 글꼴(서체) 지정 속성 값 값 의미 기본값 글꼴이름 글꼴(서체) 후보 목록을 지정 serif 글꼴 계열 이름을 지정 sans-serif monospace cursive fantasy 사용법 font-family: [글꼴후보1, 글꼴후보2...], 글꼴 계열; .box { font-family: Arial, "Open Sans", "돋움", dotum, sans-serif; } ※ 글꼴 계열은 필수로 입력해야 한다. 이유: 원래는 사용자브라우저에서 웹사이트로부터 폰트를 다운받아서 사용해야 한다. 하지만 폰트는 용량이 크기 때문에 웹사이트에서 사용자브라우저로 폰트를 보내는 것 보다 폰트의 목록들을 주고 사용자브라우저의 운영체제에 있는 폰트를 사용하도록 명시함으로써 다운받아야 하는 ..