Programmers

1) position 요소의 위치 지정 방법의 유형(기준)을 설정 ※ 기준이 있어야 배치를 할 수있다. 속성 값 값 의미 기본값 static 유형(기준) 없음 / 배치 불가능 static relative 요소 자신의 기준으로 배치 absolute 위치 상 부모 요소를 기준으로 배치 fixed 브라우저(뷰포트)를 기준으로 배치 sticky 스크롤 영역 기준으로 배치 html css .parent { width: 400px; height: 300px; border: 4px dashed lightgray; position: relative; /* top: 50px; left: 100px; */ } .child { width: 150px; height: 100px; background: tomato; borde..

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) 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 기가..