![]()
keyframs 함수 /* 전체 div */ #container { width: 200px; margin: 30px auto; } /* 애니메이션 효과 부여 대상 */ img { /* 외곽선 */ border: 1px solid #cccccc; /* 둥근 사각형 */ border-radius: 50%; /* TODO 애니메이션 효과 부여(함수 사용) */ /* TODO : infinite : 무한정 */ animation: rotateBear 2s infinite; } /* css 함수 */ /* @keyframes 함수명 */ /* from {} : 최초 실행위치 */ /* 50% : 중간 실행위치 */ /* to {} : 마지막 실행위치 */ @keyframes rotateBear { /* TODO ..
![]()
transition 속성 transition-property : 애니메이션 효과를 부여할 속성들을 나열 transition-duration: 속성들의 지속시간(속도) 예제) 박스에 마우스를 올리면 애니메이션 효과가 나타나게 적용 DOCTYPE html> Document .box1 { width: 100px; height: 100px; background-color: cornflowerblue; /* 외곽선 */ border: 1px solid black; /* 바깥여백 */ margin: 20px auto; /* TODO : 애니메이션 추가 박스 클레스에 생성 */ /* transition-property: 애니메이션 효과를 부여할 속성 나열 */ /* 사용법 : transition-property: 속..
![]()
one true layout ? 현대 홈페이지를 만드는 전형적인 구조 사이트 제목 사이드바 본문 꼬리말 /* 여백초기화 */ *{ padding: 0; margin: 0; } /* 전체 페이지 크기 정하기 */ #container{ /* 가로 */ width: 1200px; /* 중앙 정렬 : auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/ /* 사용법 : margin : 상/하 좌/우(auto) */ margin: 20px auto; } /* 머리말 */ #header{ /* 세로 */ height: 120px; /* 임시 */ background-color: gray; } /* 디자인 계산 : 전체 width 1200 == 사이드(300px)+본문(900px) */ /* 사이드 바(..
![]()
DOCTYPE html> Document 로그인 | 회원가입 | 공지사항 HTML | CSS | Javascript | Python | PHP | Java /* 여백초기화 */ * { padding: 0; margin: 0; } /* 리스트 점 없애기 */ li { list-style-type: none; } /* 로고수정 */ #logo { /* 왼쪽배치 */ float: left; /* 바깥여백 */ margin-top: 20px; margin-left: 20px; margin-bottom: 10px; /* 외곽선 */ border: 1px solid red; } /* 소메뉴 수정 */ #top { /* 오른쪽 배치 */ float: right; /* 바깥여백 */ margin-top: 30px; m..
![]()
DOCTYPE html> Document 요소의 중앙 배치 주황색 박스를 중앙으로 위치 시키기 위해서는 position : absolute 를 사용한다 적용했을경우 주황색박스의 왼쪽 상단 꼭짓점이 중앙으로 위치하게 되어 박스의 중심이 화면의 중앙에 위치하지 않게 된다. 이럴 경우 애니메이션 함수를 사용해준다. 박스의 가로/세로 크기의 반만큼 위치이동해야 중심이 중앙에 위치하게 된다. transform: translate(가로크기, 세로크기); body{ background-color: pink; } .container{ width: 500px; height: 250px; background-color: orange; /* position을 이용한 중앙배치 */ position: absolute; /* 왼..
![]()
절대좌표(absolute) 웹브라우저 화면에 좌표가 생김 left / top을 이용해서 태그를 이동시킬 수 있음 참고 position:static(기본, 생략, 좌표없음) DOCTYPE html> Document .box{ width: 100px; height: 100px; background-color: red; /* 절대좌표(absolute)를 설정해야 좌표 설정이 가능 */ position: absolute; /* 왼쪽(x좌표) */ left: 0; /* 위쪽(y좌표) */ top: 0; /* 겹칠때 위에 올라오도록 우선순위를 정하는 속성 */ /* 규칙 : 수치가 클수록 위, 작을 수록 아래로 */ z-index: 30; } .box2{ width: 100px; height: 100px; back..
![]()
/* float 속성 특징 : float 걸린 태그는 떠 있음 */ /* float 밑에 있는 태그들이 높이가 없다고 가정하여 위로 말려 올라옴(겹침현상) */ /* 여백 초기화 */ * { padding: 0; margin: 0; } li { list-style-type: none; } #image { float: left; border: 1px solid red; } #desc { border: 1px solid red; margin-left: 30px; float: left; width: 300px; } #menu { border: 1px solid red; float: right; }
![]()
/* 문제풀이 */ ul{ border: 1px solid #cccccc; border-radius: 10px; background-color: #f5f7e4; width: 640px; padding: 30px; } li{ /* display : 가로배치 */ display: inline-block; /* 앞에 점 없애기 */ list-style-type: none; margin-left: 20px; } li { list-style-type: none; } #v_menu{ width: 150px; } #v_menu li{ border-bottom: 1px dotted black; padding: 5px; } /* 가로 메뉴 디자인 */ /* 후손선택자 */ #h_menu li{ display: inlin..
![]()
/* float : 좌/우 배치 속성, div박스들을 배치, 중앙배치는 없음 */ .box{ /* 가로 */ width: 100px; height: 100px; background-color: red; margin: 10px; /* 왼쪽 배치 */ float: left; } .box2{ /* 가로 */ width: 100px; height: 100px; background-color: blue; margin: 10px; /* 오른쪽 배치 */ float: right; }
![]()
/* inline-block : div 속성 + 줄바꿈 없음(속성) */ /* 활용 : 세로배치 -> 가로배치 디자인 적용하고자 할때 사용 */ /* 예) ul - li (block 속성, 세로메뉴) -> 가로메뉴(위의 속성 고려) */ .box { width: 100px; height: 100px; background-color: red; /* 바깥여백 */ margin: 20px; /* display 속성 */ display: inline-block; } .box2 { width: 100px; height: 100px; background-color: blue; /* 바깥여백 */ margin: 20px; display: inline-block; } .box3 { width: 100px; height..
![]()
display 속성 block inline 속성 변경가능 block -> inline 속성 변경 inline 속성 특징 : width, height 속성무시, 안에 컨텐츠(글)에 따라 크기가 정해짐 DOCTYPE html> Document 홍길동 홍길동 홍길동 [CSS] /* id선택자 : #변수명, class 선택자 : .변수명 , * : 전체선택자, 태그선택자 */ /* div의 특징 : 블럭(block)속성 :: 줄바꿈이 발생함. 블럭속성태그 :: p태그, h1 ~ h6 태그 */ /* span 특징 : 인라인(inline) 속성, 줄바꿈 없음 인라인속성 태그 :: input태그, img태그.... */ .box { width: 50px; height: 50px; background-col..
![]()
DOCTYPE html> 가상 선택자(같은 태그의 첫번째 태그를 선택) /* 가상선택자(같은 태그의 첫번째 태그를 선택) */ img:first-of-type { border: 5px solid red; } DOCTYPE html> 가상 선택자(선택한 것의 반대인 것들을 선택) /* 가상선택자(선택한 것의 반대인 것들을 선택) */ /* not(:가상선택자) : 반대 */ img:not(:first-of-type) { border: 5px solid red; } DOCTYPE html> 가상 선택자(같은 태그 중 마지막 태그를 선택) /* 가상선택자(같은 태그 중 마지막 태그를 선택) */ /* last-of-type : 태그 중 마지막 태그 선택 */ img:last-of-type { border: 5..
