HTML CSS border 속성
HTML CSS border 속성 ■ 웹 문서에 어떤 요소를 넣을 때 다른 요소들과 구분하기 위해서 테두리를 만들어주면 보기 좋은데요. 이번에는 테두리에 해당하는 border의 속성들에 대해서 알아보겠습니다. 이것의 속성에는 선의 종류, 두께, 색 등이 있는데 이것들을 따로 사용해서는 나타나지 않다가 모든 속성값이 입력됐을 때 비로소 선이 나타나게 되는데요. ■ 예를 들어 선의 두께만 지정해주면 선은 안보입니다. border-style (선의 종류)를 지정해줘야 비로소 선이 보이게 되구요. 이 이후에 테두리의 색을 지정해줘야 색까지 보이게 됩니다. 하지만 이것들을 한번에 모두 묶어서 표시하면 바로 보이게 되는데요. 이 속성값들을 한번에 묶어서 지정할 때의 형식은 다음과 같습니다. border : (두께)..
CSS3 margin과 padding
CSS3 margin padding ■ 웹 문서를 만들 때 전체적인 구조나 디자인이 중요하고 이것들을 배치할 때 서로 간의 간격을 적절히 유지하는 게 웹 문서의 전체적인 분위기를 좌우하게 되고, 요소 간의 적당한 간격은 가독성에도 많이 도움이 되는데요. 각 요소의 간격을 조절해주는 게 margin과 padding 입니다. 이 두 속성에 대해서 알아보도록 할게요. ■ 먼저 padding과 margin이 뭔지 확실하게 이해하기 위해서 그림을 하나 보겠습니다.■ 이 그림은 현재 본문에 박스를 하나 만들고 그 안에 이미지를 하나 넣은 상태 인데요. 의 테두리를 검은색 실선으로 처리했습니다. 이때 테두리를 기준으로 바깥쪽 그러니까 박스와 웹 브라우저와의 거리가 [margin] 입니다. 그리고 박스 안쪽에 있는 이..
CSS position
CSS position 웹 페이지를 만들 때 어떤 요소를 개발자가 원하는 위치에 마음대로 배치할 수 있는 것이 position 속성인데요. 화면 어디든 배치하고 싶은 곳에 위치를 지정할 수 있습니다. 이 글에서는 position의 속성들을 알아보고 하나씩 예제를 만들어서 확인해보겠습니다. 먼저 posiont의 형식은 다음과 같습니다.▶ aaa {position : 속성} 속성에는 크게 네 가지가 있는데요. static, relative, absolute, fixed입니다. 이것들을 하나씩 적용해서 예제를 만들어 볼게요. 1. static이 속성은 문서의 전체적인 흐름에 맞게 배치하는 형식인데요. 따로 설정하지 않아도 자연스럽게 배치되는 형태라고 생각하시면 됩니다. ■ 간단하게 예제를 만들어서 positi..