안녕하세요. 이번 포스팅에서는 css 속성 중 position 속성에 대해서 알아보겠습니다. position 속성은 html 요소의 위치를 지정하는 속성으로 대표적으로 자주 사용하는 속성값으로 absolute, relative, static 속성값이 있습니다. 하나씩 알아보도록 하죠. 특정 요소의 위치는 요소가 시작하는 좌상단의 좌표를 지정함으로써 원하는 위치에 두는 게 가능합니다. 결국 position이라는 속성은 요소의 좌상단 좌표를 어떤 방식으로 설정할지를 결정할 수 있는 속성입니다. 이제 position 속성에 사용되는 중요 속성값들에 대해 하나씩 알아보도록 하겠습니다. 1. absolute 속성 값 먼저 absolute 속성값입니다. absolute는 자신의 현재 상위태그에 해당하는 요소에서 특..
이번 포스팅에서는 html 요소에 테두리를 지정하는 border 속성에 대해서 알아보도록 하겠습니다. 1. border 속성 border 속성은 요소의 테두리를 지정할 때 사용하는 속성입니다. CSS로 border 속성을 지정하는 형태는 아래와 같습니다. ▼ 첫 번째 요소에는 테두리 두께가 오고 두 번째 요소에는 테두리 스타일 세 번 째 요소에는 테두리 색깔이 옵니다. 특정 요소의 4가지 방향에 대해서 각각 다르게 border 속성을 부여하는 것이 가능합니다. 각 방향에 대한 속성명은 아래 그림과 같습니다.▼ 요소에서 각 영역의 위치는 4가지로 구분이 가능합니다. top, right, bottom, left 영역으로 나누어지고 각 영역에 대해 다르게 border 속성 적용이 가능합니다. 아래 샘플 예제를..
CSS 속성 강좌 3번째 포스팅입니다. 오늘 포스팅 할 내용은 box-sizing 속성인데요. 해당 속성은 특정 엘리먼트의 크기를 어떻게 결정 할 것인지를 선택 할 수 있도록 해주는 속성입니다. div 태그로 정의 된 박스형태의 레이어가 있고 CSS 속성부여로 박스 영역의 width와 height 크기를 각각 200px로 지정하였다고 가정 해보겠습니다. 이 때 box 영역 사이즈에 영향을 끼칠 수 있는 border 값과 padding 값도 지정을 하였다면 border값과 padding 값도 전체 영역 크기에 포함이 되면서 의도했든 의도하지 않았든 200px 보다 더 큰 width와 height 크기를 가지는 영역이 설정이 됩니다. box-sizing 속성은 padding이나 border 값을 전체 영역크..
안녕하세요. 오늘은 CSS 속성 중 margin과 padding에 대해서 포스팅을 하고자 합니다. margin과 padding 속성의 경우 웹 페이지의 요소 배치와 관련해서 아주 중요한 속성이라고 할 수 있습니다. 반드시 margin과 padding 속성에 대해 정확히 알고 두 속성의 차이점에 대해서도 반드시 이해를 하셔야 합니다. margin과 padding은 html 요소사이의 간격을 설정 할 수 있는 속성인데 적용이 되는 형태에 차이가 있습니다. 아래 그림을 참고해주세요. ▼마치 붉은색 사각형 영역안에 파란색 사각형이 들어간 형태로 보이지만 사실 붉은색 영역은 공백영역이라고 생각하시면 됩니다. 먼저 왼쪽 영역의 파란색 사각형을 original size라고 생각하고 보시길 바랍니다. 상하좌우 각각 5..
안녕하세요. 저번 포스팅을 마지막으로 CCS 선택자에 대해 공부를 했습니다. 사실 제가 포스팅한 내용 말고도 다른 선택자들이 더 많습니다만 사용 빈도가 높지 않다고 판단하여 따로 포스팅을 하지 않을 생각입니다. 이번 포스팅부터는 CSS 속성에 관해 포스팅을 이어 나갈 생각입니다. 오늘 다룰 내용은 CSS 속성 중 display / opacity / visibility 속성이 되겠습니다. 하나씩 알아보도록 하죠. 1. display 속성 display 속성은 태그가 화면에 어떤 식으로 보이는지를 지정하는 속성입니다. 앞서 div 태그와 span 태그의 차이를 다루는 포스팅에서 언급한 적이 있는 내용인데요. display 에 사용되는 속성값은 여러개가 있지만 중요한 속성 3개 값만 살펴 보겠습니다. 속성값 ..