포지셔닝 관련 CSS - position position 속성은 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성으로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하게 사용하는 속성 중 하나입니다. 기본형 : position : static / relative / absolute / fixed position 속성을 이용하면 텍스트나 이미지를 나란히 배치할 수 있고 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수도 있습니다. 속성 값 설명 static 요소를 문서의 흐름에 맞추어 배치합니다.(기본 값) relative 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다. absolute 원하는 위치를 지정해 배치합니다. fixed 지정한 위치에 고정해 배치합니다.. 화면에서..
포지셔닝 관련 CSS - clear float속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배칯하면 그 다음에 넣는 다른 요소들에게도 똑같은 속성이 전달됩니다. 따라서 float 속성이 더이상 유용하지 않다고알려 주는 속성이 필요한데 그것이 바로 clear 속성입니다. 기본형 : clear: none / left / right / both float : left를 이용해 왼쪽으로 배치했다면 clear : left로 종료하고 float : right를 사용했다면 clear : right를 사용해 무효화 시킵니다. float 속성이 left인지 right인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear : both라고 하면 됩니다. 보편적으로 float값을 일일이 기억하기 번거로워 clear..
포지셔닝 관련 CSS - float float 속성은 웹 요소를 문서 위에 떠 있게 만듭니다. 여기서 '떠 있다'라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻입니다. float : left / right / none float 속성에서 사용할 수 있는 값에는 왼쪽(left)과 오른쪽(right), 그리고 좌우 어느 쪽도 아닌 것(none)이 있습니다. 속성 값 설명 left 해당 요소를 문서의 왼쪽으로 배치합니다. right 해당 요소를 문서의 오른쪽으로 배치합니다. none 좌우 어느 쪽으로도 배치하지 않습니다. float : left나 float : right를 지정하면 너비 값은 콘텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워둡니다. 이미지와 텍스트..
포지셔닝 관련 CSS - box-sizing 포지셔닝이란 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것입니다. CSS 포지셔닝을 이용해 웹 문서의 레이아웃이 만들어집니다. 브라우저에서 박스모델의 width와 height 속성은 박스 모델 전체의 너비와 높이가 아니라 박스 모델 안에 있는 콘텐츠 부분의 너비와 높이입니다. 웹 문서에 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야 하는데 width 속성 값이 콘텐츠 영역의 너비만 나타내기 때문에 패딩이나 테두리는 따로 계산해야 합니다. 이 때 box-sizing 속성을 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할지, 패딩이나 테두리까지 포함시켜 사용할지 결정할 수 있습니다. 기본형 : box-sizing :..
여백 관련 CSS - margin margin은 현재 요소 주변의 여백이므로 한 요소와 다른 요소 사이의 간격을 조절할 때 사용합니다. 기본형 : margin-top : / / atuo margin-right : / / atuo margin-bottom : / / atuo margin-left : / / atuo margin : / / atuo margin-left와 margin-right를 auto로 지정하면 요소의 너비 값을 뺀 나머지 공간의 좌우 마진을 똑같이 맞춥니다. 이 방법은 웹 요소를 중앙에 배치하려고 할 때 자주 사용합니다. 속성 값 설 명 너비..
테두리 관련 CSS - border-radius border-radius 속성을 이용하면 박스 모서리 부분을 손쉽게 다양한 형태로 처리할 수 있습니다. 기본형 : border-top-left-radius : / border-top-right-radius : / border-bottom-right-radius : / border-bottom-left-radius : / border-radius : / 둥글게 만들고 싶은 박스 모서리의 두 방향과 반지름을 뜻하는 radius를 사용해 속성을 표기합니다. 속성 값 설명 둥글게 처리할 반지름 크기를 px이나 em 같은..
테두리 관련 CSS - border 속성 border 속성은 테두리 스타일을 묶어서 한번에 지정할 수 있습니다. 기본형 : border-top : / / border-right : / / border-bottom : / / border-left : / / border : / / border 속성을 지정할 때 두께와 색상, 스타일의 순서는 상관 없습니다. 테두리 관련 CSS - box-shadow 속성 box-shadow 속성은 이미지뿐만 아니라 div 전체 등 지정하는 것에 따라 그림자 효과를 나타낼 수 있습니..
테두리 관련 CSS - border-width 속성 border-width 속성은 박스 모델에서 테두리의 두께를 지정할 때 사용합니다. border-width : / thin / medium / thick border-top-width : / thin / medium / thick border-right-width : / thin / medium / thick border-bottom-width : / thin / medium / thick border-left-width : / thin / medium / thick 테두리를 지정할 때 1px나 5px처럼 크기를 직접 입력할 수도 있고 thin, medium, thick 같은 키워드 중에서 ..