IT탐험

간단한 애니메이션 효과를 만들 때조차 자바스크립트를 사용해야 했으나 CSS3 등장으로 디자인과 기능적인 부분을 쉽게 표현할 수 있게됨 transform 선택된 태그의 각도를 조정하고 크기를 변경하고 위치를 옮길 때 사용함 rotate, scale, skew, translate 등의 속성값이 존재함 transform: rotate(각도deg); 선택된 태그의 각도를 평면적으로 조정함 0~360 범위에서 선택, 양수일때 시계 방향, 음수일때 시계 반대 방향으로 회전함 transform: scale(width, height); 선택된 요소의 크기를 비율로 조정함 원본 크기를 숫자 1을 기준으로 1보다 크면 확대, 작으면 축소함 transform: skew(x, y); 선택된 태그의 각도를 입체적으로 조정함 x..

z-index 3차원 요소를 갖는 position 속성의 속성값은 레이어 높낮이에 영향을 주는 z축을 가짐 z축은 z-index 속성으로 레이어 높낮이를 조정함 형제간에 3차원 특징을 갖는 속성을 적용하면 나중에 적용된 HTML 요소가 상위 레이어에 위치하는데 z-index 속성으로 바꿀 수 있음 float 선택된 HTML 태그를 띄워서 부모의 공간을 기준으로 왼쪽 끝이나 오른쪽 끝에 배치할 때 사용함 float: left; 왼쪽 끝부터 순서대로 정렬 float: right; 오른쪽 끝부터 순서대로 정렬 clear clear 속성은 float 속성의 기능을 제어하는데 사용 clear: [left, right, both]

차원이란 기하학적 도형에서 한 점의 위치를 나타내는 데 필요한 숫자의 개수를 의미함 1차원 : x, 2차원 : x, y, 3차원 : x, y, z 웹 사이트는 2차원으로 보이지만 3차원이 혼합되어 있는 상태임 position 속성은 태그의 상태를 2차원또는 3차원으로 지정할 수 있음 속성값 : static, fixed, relative, absolute 모든 HTML태그는 기본적으로 position: static; 상태임 차원 2차원 3차원 2,3차원 3차원 속성값 static fixed relative absolute 부모 자식 간 마진 병합 현상 유무 O X O X top, right, bottom, left 속성 적용 유무 X O O O (부모의 position 상태에 따라 기준점이 달라짐) 부모가..

마진 병합이란 인접한 공간에 margin-bottom 과 margin-top 속성을 적용할 경우 두 속성중 큰 속성값이 작은 속성값을 병합하는 현상을 의미함 형제간 발생하는 마진 병합, 부모 자식간 발생하는 마진 병합이 있음 마진 병합은 block 요소의 상하에서만 일어나는 현상으로 margin-left or right에서는 발생하지 않음 웹 사이트 레이아웃 작업 시 margin-top 과 margin-bottom 속성이 적용되지 않을 경우가 있는데 이는 마진 병합 현상 때문임 형제간 마진 병합 현상 상단 영역에 margin-bottom: 100px; 하단 영역에 margin-top: 50px; 적용 시 150px의 공백이 아닌 100px의 공백이 생김 부모 자식간 마진 병합 현상 자식 영역에 margi..

display 속성인 block요소와 inline요소에는 세 가지 차이가 있음 줄 바꿈 현상 유무 width와 height 속성 적용 유무 margin-top, margin-bottom, padding-top, padding-bottom 속성 적용 유무 block inline 줄 바꿈 현상 유무 O X width와 height 속성 적용 유무 O X margin-top or bottom, padding-top or bottom 적용 유무 O X block 요소와 inline 요소의 종류 block 요소 - ~, , , , , , , inline 요소 - , , block 요소를 inline 요소로 변경할 수 있고, 반대의 경우도 가능함 display : block or inline; 적용 줄 바꿈 현상은..