뇌 채우기 공간

1. 블록요소 1. div, h1,p 2. 사용 가능한 최대 가로 너비를 사용한다. 3. 크기를 지정할 수 있다. 4. width: 100%, height:0으로 시작한다. 5. 수직으로 쌓임 7. margin, padding 위, 아래, 좌, 우의 여백을 사용 가능하다. 8. 레이아웃을 잡는데 사용한다. 2. 인라인요소 1.span, img 2. 필요한 만큼의 너비를 사용한다. 3. 크기를 지정할 수 없다. 4. width:0, height:0 으로 시작한다. 5. 수평으로 쌓임 6. 줄바꿈을 하면 띄워쓰기가 되고 아니면 띄워쓰기 안됨 7. margin, padding 중 위 아래는 사용할 수 없다. 좌우만 가능하다. 8. text에 주로 사용한다. display: block; 인라인 요소를 block..

페이지의 메뉴 부분 header을 저렇게 만드는 방법을 알아보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Document Personal Open Source Business Explore Colored by Color Scripter cs html구조를 이렇게 짜준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 /* html구조와 유사한 흐름으로 작성 */ body{ margin: 0; padding: 0; } #header{ backg..

예시 요 페이지를 한번 만들어보자 전체적인 레이아웃을 설정할때 크게 곤충처럼 머리 가슴 배로 나누는 것 처럼 헤더, 콘텐츠, 푸터로 나누어 보면 된다. 이렇게 위를 header, 중간을 content , 밑을 footer로 나누었다. 그리고 div태그를 left, center,right로 나누었다. 이제 css를 정리해줄 차례 먼저 전체를 width 1000px로 잡아놓고 가운데 정렬을 해주었다. 그리고 왼쪽의 박스들을 일단 width 150으로 정리해두었고 background color와 border를 정의해주었다. 센터와 오른쪽도 마찬가지다 그리고 div 박스들의 radius를 설정해주었다. border-radius는 상단왼쪽부터 시계방향으로 설정이 된다. 그래서 header에 left_content..

구조 선택자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 Document #content{ width: 300px; } ul li{ list-style: none; padding: 10px; font-size: 20px; font-weight: bold; } ul li a{ color: black; } ul li:nth-child(2n+1){ background-color: pink; } ul li:first-child, ul li:last-child{ backgrou..

input타입에서 focus, enabled, disabled때 속성 추가하는 법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Document input:focus { outline: none !important; border-color: orange; box-shadow: 0 0 10px #719ECE; } input:enabled { color: pink; } input:disabled { color: violet; } 상태선택자 이름 아이디 비밀번호 Colored by Color Scripter cs

마우스 호버 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Document ul>li{ color: orange; font-size: 20px; font-weight: bold; } li:hover{ color: blue; } menu1 menu2 menu3 menu4 menu5 Colored by Color Scripter cs

동위 선택자는 자손이 아니고 위치가 같은 태그를 말한다. 동등한 위치에 있는 태그라는 뜻 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 Document h3~div{ font-size: 10px; color: aqua; } h3+div{ font-size: 20px; color: blue; } #title~div{ background-color: yellow; } 동위 선택자(+,~) div01 div02 div03 div04 div05 Colored by Color Scripter cs h3~div라는 뜻은 h3과 동등한 위치에 있는 div태그를 전부다 선택한다는 뜻 (div01~05가 아쿠아색..

자손과 후손을 알아보자 부를 기준으로 봤을 때 자손은 바로 밑의 자손 아들이고 후손은 아들과 손주까지 다 합친 것이 후손이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Document div li{ background-color: aquamarine; } div> h1{ color: bisque; } LOGO global company 자바칩 프라푸치노 반갑다 Colored by Color Scripter cs 자손을 선택하는 법 : > div > h1 div 태그 바로 밑의 h1에 css를 적용한다 후손을 선택하는 법: 스페이스바 div li div아래의 모든 li에 css를 적..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Document input{ color:green; font-size: 3rem; } input[type=text]{ color: orange; } input[type=tel]{ color: red; } img[src]{ border: 5px black; } 이름: 아이디: 비밀번호: 전화번호: Colored by Color Scripter cs input에서 type이 text인 것만 선택하는 방법 input[type=text]

결과 화면 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Document div{ background-color: #ffd800; } 선택자란? 특정 태그를 선택하여 해당 태그의 속성을 변경하는 목적으로 사용 됩니다. 제목 입니다. 본문 입니다. 제목 입니다. 본문 입니다. Colored by Color Scripter cs head에서 style을 지정해준다 body에 있는 div를 선택해서 속성을 변경해준다. body에 있는 div 모두 선택하는 것이다.