쭈루랩

DOCTYPE html> 트랜지션 /* 트랜지션 - 스타일 속성을 변경시키는 것(배경색 바꾸거나 도형 테두리를 사각형 -> 원형으로 바꾸는 것) 익스플로러 10이상, 엣지, 대부분의 최신 브라우저에서 지원 속성 transition-property - 트랜지션의 대상을 지정 transition-duration - 트랜지션을 실행할 시간을 지정 transition-timing-function - 트랜지션의 실행 형태를 지정 transition-delay - 트랜지션의 지연 시간을 지정 transition - 위 속성들을 한꺼번에 지정 transition-property - 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정 기본형 - transition-property : all | none | 속성값 all..

DOCTYPE html> 애니메이션 /* CSS 애니메이션 속성 @keyframes - 애니메이션이 바뀌는 지점을 지정 animation-delay - 시작 시간을 지정 animation-direction - 종료한 뒤 처음부터 시작할지 역방향으로 시작할지 지정 animation-duration - 실행 시간을 지정 animation-iteration-count - 반복 횟수를 지정 animation-name - 설정해 놓은 중간 상태를 지정 animation-timing-function - 키프레임의 전환 형태 지정 animation - 애니메이션 속성을 한꺼번에 묶어서 지정 @keyframes 속성 - 애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분 기본형 - @keyframes { { } } ..

DOCTYPE html> 연결 선택자 /* 하위 선택자(descendant selector) - 부모 요소에 포함된 하위 요소를 모두 선택 - 자손 선택자라고도 함 기본형 - 상위요소 하위요소 ex) section p {...} 자식 선택자(child selector) - 자식 요소에만 스타일을 적용하는 선택자 기본형 - 부모요소 > 자식요소 ex) section > p {...} */ section p { color: blue; } section>p { color: blue; } 예약 방법 & 사용 요금 아직 온라인 예약 신청이 준비되지 않았습니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일 DOCTYPE html> 가상 클래스 /* 1. :link {} - 방문..

DOCTYPE html> 속성 선택자 /* 특정 속성이 있는 요소를 선택하는 [속성] 선택자 - 대괄호([])사이에 원하는 속성을 입력 */ a[href] { background: yellow; border: 1px solid #ccc; font-weight: normal; } /* 특정 속성값이 있는 요소를 선택하는 [속성=속성값] 선택자 - 주어진 속성과 속성값이 일치하는 요소를 찾아 선택 */ a[target=_blank] { padding-right: 30px; background: url('images/newwindow.png') no-repeat center right; } 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 DOCTYPE html> 속성 선택자 ul { list-style-ty..

DOCTYPE html> 배경색 /* background-color: #008000; background-color: rgb(0, 128, 0); background-color: green; 배경색 적용 범위를 조절하는 background-clip 속성 background-clip 속성값 border-box - 박스 모델에서 테두리까지 적용. 기본값. padding-box - 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box - 박스 모델에서 콘텐츠 부분에만 적용 */ .desc { border: 5px dotted #222; background-color: #ffd9a0; width: 350px; padding: 20px; margin-right: 20px; float: left; }..

DOCTYPE html> 박스 모델 너비, 높이 지정 .box1 { width: 400px; height: 100px; border: 1px solid black; margin-bottom: 100px; } .box2 { width: 50%; height: 100px; border: 1px solid red; } DOCTYPE html> 둥근 테투리 #container { width: 700px; margin: 20px auto; } .br1 { padding: 30px; border-style: solid; border-width: thick; border-color: green; border-radius: 30px; } #circle { border-radius: 50%; } 둥근 테두리 스타일 예제..

DOCTYPE html> CSS float 속성 /* float 속성값 left - 해당 요소를 문서 왼쪽에 배치 right - 해당 요소를 문서 오른쪽에 배치 none - 좌우 어느쪽에도 배치하지 않음. 기본값 */ #tree { float: left; margin-right: 40px; } Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua labo..

DOCTYPE html> 배치 방법 /* display 속성 - 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능 display 속성값 block - 인라인 레벨 요소를 블록 레벨 요소로 만듬 inline - 블록 레벨 요소를 인라인 레벨 요소로 만듬 inline-block - 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있고, 마진과 패딩을 지정할 수 있음 none - 해당 요소를 화면에 표시하지 않음 */ nav ul { list-style: none; } nav ul li { display: inline-block; padding: 20px; margin: 0 20px; border: 1px solid #222; } menu 1 menu 2 menu 3 menu 4

DOCTYPE html> 웹 요소의 위치 지정 /* position 속성 - 텍스트나 이미지 요소를 원하는 위치에 배치 position 속성값 static - 문서의 흐름에 맞춰 배치 relative - 위치값을 지정할 수 있다는 점을 제외하면 static과 동일 absolute - relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 fixed - 브라우저 창을 기준으로 위치를 지정해 배치 */ p { width: 500px; height: 300px; border: 1px solid silver; background-color: #eee; line-height: 2; } #static { position: static; } #relative-1 { position: relative; }..

DOCTYPE html> 패딩 마진 p { background-color: yellow; color: red; font-weight: bold; font-size: 16pt; } p.pad { color: purple; padding: 20px; } p.mar { color: green; margin: 30px; } p.mp { color: blue; padding: 5%; margin: 5%; } 박스의 안쪽 여백과 바깥쪽 여백 지정 (1) 안쪽 여백 지정 - padding 20px (2) 바깥쪽 여백 지정 - margin 30px (3) 안쪽, 바깥쪽 여백 지정 - padding 5%, margin 5% DOCTYPE html> 패딩 마진 여백 네 방향 지정 body { background-color..