position 속성· 웹 문서 안의 요소들의 위치를 자유자재로 배치할수 있는 속성· position 속성은 보통 단독으로 쓰이기 보다는 left, right, top, bottom 속성과 함께 쓰이며 텍스트나 이미지 등 여러 개의 요소를 원하는 위치에 배치할 수 있습니다.· HTML과 CSS를 이용해 웹 문서를 만들 때 많이 사용되어 집니다. 속성값 의미 static · 기본값 · 위치정보를 임의로 설정 해줄 수 없으며 · 요소들를 문서의 흐름에 맞춰 배치할 때 사용합니다. absolute · 절대위치 · 원하는 위치를 지정하여 배치할 때 사용 · 문서 좌측상단을 기준으로 위치정보를 설정하며 스크롤 시 이동합니다. relative · 상대위치 · 이전 요소에 자연스럽게 연결하여 배치할 때 사용 · st..

좌표계스칼라(Scalar; 특정 좌표계와 관련이 없는 양) 순서쌍을 이용해 n차원 공간의 각 지점을 표현하는 방법입니다. 레이아웃각 구성요소를 제한된 공간 안에 효과적으로 배열하는 것을 의미합니다. 레이아웃 위치· 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정하는 것· 절대 좌표와 상대 좌표로 구분할 수 있습니다. 절대좌표(position : absolute) 절대 좌표는 브라우저 왼쪽 상단이 기준점이 되며, 오른쪽 하단의 지정된 좌표로 이동하여 표시됩니다.

clear속성· float 영향을 받는 엘리먼트를 강제로 취소시킬지 아닐지를 지정하는 것· 더 이상 float을 쓰지 않겠다는 의미입니다. 속성 값 설명 none float에서 설정된 값을 clear하지 않을 때 사용 clear: left 왼쪽 float 해제 clear: right 오른쪽 float 해제 clear: both 좌우 양측 모두 float 해제 inherit 부모 또는 상위로 부터 상속받을 때 사용

float 속성· display와 position과 같이 웹 페이지의 레이아웃을 구성할 때 많이 사용하는 속성으로 이미지와 텍스트를 쉽게 배치하기 위해 만들어졌습니다. · float이 선언된 엘리먼트는 왼쪽 또는 오른쪽으로만 위치할 수 있고, 위아래는 불가능합니다. · float 이후에 오는 엘리먼트는 그 주변을 채워나가며 표시됩니다. · float은 이미지와 텍스트를 활용한 레이아웃에서 많이 사용되고, 또한 화면 크기에 따라 동적으로 변할 수 있는 레이아웃 작업에 많이 이용됩니다. 속성 값 설명 left element를 왼쪽방향으로 float된 블록 박스로 만듭니다. right element를 오른쪽방향으로 float된 블록 박스로 만듭니다. none element를 float하지 않습니다. inher..

z-index(제트 인덱스)· 요소를 쌓는 순서를 정할 때 사용하는 속성· CSS에서는 수평이나 수직축으로의 이동할 수 있습니다.· 이 때 한 요소 위에 다른 요소를 쌓는 z축도 고려해야 합니다. z-index 형식· z-index는 값이 작을수록 아래에 쌓이고, 큰 값이 위로 쌓이게 됩니다.· z-index 값을 명시하지 않으면 기본 값으로 z-index: 1으로 설정이 됩니다.

visibility 속성· 요소를 보이게 하거나 보이지 않도록 할 때 사용· 특정 요소를 화면에 보이게 하거나, 보이지 않게 또는 겹쳐 보이도록 설정을 할 수 있습니다.· visibility 속성값으로는 4가지의 종류가 있습니다. 속성값 설명 visible · 기본값 · 요소를 화면에 표시할 때 사용 hidden · 요소를 화면에서 감추고자 사용할 때 사용 collapse · 표의 행렬이나, 행 그룹, 열 그룹 등에서 지정하여 서로 겹쳐 보이도록 할 때 사용 inherit · 부모 요소의 visibility 속성을 상속받을 때 사용