태그 태그는 대표적인 공간 분할 태그입니다. block형식으로 공간을 분할합니다. 태그는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됩니다. 또한, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용됩니다. 태그의 스타일은 여러 가지 변경 가능한 요소가 존재합니다. width: 가로 크기를 정해줍니다. height: 세로 크기를 정해줍니다. border: 테두리의 굵기를 정해줍니다. 숫자가 클수록 굵어집니다. background-color: 태그의 배경 색상을 정하는 속성입니다. float: div의 좌우 정렬을 하는 속성입니다. 가운데 정렬은 안됩니다. (설명 바로가기..
position 속성은 웹문서 안의 요소들을 자유자재로 배치해주는 속성으로 HTML과 CSS를 이용해 웹문서를 만들 때 중요하게 사용하는 속성 중 하나입니다. position 속성을 이용하면 텍스트나 이미지를 나란히 배치할 수 있고 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수도 있습니다. 이렇게 요소를 다양하게 배치하려면 position 속성에서 사용하는 속성 값의 특성을 이해하고 필요에 따라서 값을 선택해야 합니다. position 속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있습니다. 이때 위치는 top과 bottom, left, right로 지정합니다. top 위쪽으로부터 얼마나 떨어져 있는지를 나타냅니다 bottom 아래쪽으로부터 얼마..
float속성은 웹 요소를 문서 위에 떠있게 만듭니다. 여기서 떠있다 라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻입니다. float속성에서 사용할 수 있는 값은 왼쪽(left)과 오른쪽(right), 그리고 좌우 어느 쪽도 아닌 것(none)이 있습니다. float속성-왼쪽이나 오른쪽으로 배치하기 float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. 다음 예제는 이미지를 왼쪽에 떠있게 하는것으로 float속성을 사용하면 그 주변 다른 요소가 감쌉니다. 따라서 이미지와 텍스트를 나란히 표시하려고 할때는 이미지에 float속..
박스 모델의 여백인 마진과 패딩을 조절해 디자인하는 방법에 대해 알아보도록 하겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용합니다. margin과 padding은 두 속성 다 여백을 주는 의미에서는 같지만 분명 다른 점도 존재합니다. margin은 Object와 화면과의 여백(외부 여백)을 말하며 Padding은 Object내의 내부 여백을 의미합니다. margin이란 현재 요소 주변의 여백을 뜻하며 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 따라서 마진을 이용하면 한 요소와 다른 요소 사이에 간격을 조절할 수 있습니다. 마진 속성은 나열한 손서대로 요소의 바깥 위쪽 마진, 오른쪽 마진, 아래쪽 마진, 왼쪽 마진을..
:가 붙으면 특정 이벤트마다 적용할 스타일을 설정할 수 있습니다. 가상 선택자는 웹 문서 소스에는 존재하지 않으나 필요에 의해 임의로 지정하여 사용하는 것을 말합니다. 이미지 위에 마우스를 올렸을 때 발생하는 이벤트가 대표적인 사용 예입니다. :link 선택자 방문하지 않은 링크를 선택하고 스타일을 지정하는 역할을 합니다 이미 방문한 링크의 스타일은 지정되지 않습니다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 a:link { background-color: yellow; color: red; text-decoration: underline; } } 네이버 방문하기 다음 방문하기 Colored by Color Scripter cs 방문하지 않은 링..
CSS에서 선택자는 스타일을 지정할 요소를 선택하는 데 사용되는 패턴입니다. 이를 통해 특정 요소를 선택하여 스타일을 적용할 수 있게 됩니다 [속성] 선택자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 a[target] { background-color: yellow; } naver.com daum.net president.go.kr Colored by Color Scripter cs a태그의 [target] 속성을 선택합니다. = daum.net president.go.kr [속성=값] 선택자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 a[target="_blank"] { background-color: yellow; } a[target="..
CSS박스 모델이란 웹문서의 내용을 박스 형태로 정의하는 방법을 가리킵니다. 이 박스 모델들이 모여 웹문서를 이루며 그 안에는 마진과 패딩, 테두리 등 여러 겹의 박스가 들어있습니다. 이 개념은 CSS에서 자주 사용되는 개념이므로 잘 기억해두어야 합니다. 블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다. 그러므로 먼저 블록 레벨 요소와 인라인 레벨 요소에 대해 알아보도록 하겠습니다. 블록 레벨(block-level)요소란 태그를 사용해 요소에 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다. 즉, 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 ..
CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. CSS는 다양한 장치 및 화면 크기에 대한 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다. 다시 말해 문서 작성과 디자인을 분리하여 살펴본다면 하나의 웹 문서에서 문서 작성은 HTML이, 디자인은 CSS가 담당한다고 생각하면 됩니다. CSS를 사용하는 이유 앞서 설명했던것 처럼 HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다. 이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 ..
