테두리 관련 CSS - border-style 속성 border-style 속성은 기본 값이 none이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다. 따라서 테두리를 그리기 위해서는 맨 먼저 테두리 스타일을 지정해야 합니다. 기본형 : border-style : none / hidden / dashed / dotted / double / groove / inset / outset / ridge / solid border-style 속성은 실선이나 점선, 이중선 등 테두리의 스타일을 지정합니다. 속성 값 설명 none 테두리가 나타나지 않습니다. (기본 값) hidden 테두리가 나타나지 않습니다. border-collapse : collapse일 ..
레이아웃 관련 스타일 CSS - display 속성 display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있습니다. display 속성은 세로로 표시되는 목록을 가로 내비게이션으로 바꿀때, 한 줄로 표시되는 이미지에 여백과 테두리를 추가해 갤러리로 표시 할 때 등 에 사용하지만 원래 속성은 해당 요소가 화면에 어떻게 보일지를 지정할 때 사용합니다. 기본형 : display : none / contents / block / inline / inline-block / table / table-cell 등 display : block 속성 display : block 으로 지정하면 해당 요소를 블록 레벨로 지정합니다. 태그나 < ..
레이아웃 관련 스타일 CSS - 박스 모델 블록 레벨 요소나 인라인 레벨 요소처럼 스타일 시트에서 박스 형태인 요소를 박스 모델 요소라고 합니다. 웹 문서 안에서 여러 요소들을 원하는 위치에 배치하려면 CSS 박스 모델에 대해 잘 알고 있어야 한줄에 배치할지, 줄을 바꾸어 배치할지, 요소와 요소 사이의 간격을 어떻게 조절할지 결정할 수 있습니다. 박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니다. 마진이나 패딩은 웹 문서에 하나의 콘텐츠만 표시한다면 반드시 필요하지 않을 수도 있지만 다른 콘텐츠들과의 간격이나 배치 등을 고려한다면 필요한 박스 모델의 중요한 개념입니다. 레이아웃 관련 스타일 C..
레이아웃 관련 스타일 CSS - 블록 레벨 / 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이므로 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 합니다. 태그나 태그 등이 블록 레벨 요소를 만드는 대표적인 태그입니다. 인라인 레벨 요소는 줄을 차지하지 않는 요소입니다. 즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다. 인라인 레벨 요소는 한줄에 ..
배경 스타일 CSS - background-origin background-origin 속성은 배경 이미지를 배치할 기준이 필요할 때 사용합니다. 기본형 : background-origin : border-box / padding-box / content-box 속성 값 설명 border-box 박스 모델의가장 외곽인 테두리가 기준이 됩니다. podding-box 박스 모델에서 테두리를 뺀 패딩이 기준이 됩니다. (기본 값) content-box 박스 모델에서 내용 부분이 기준이 됩니다.
배경 스타일 CSS - background-position background-position 속성을 이용하면 배경이미지가 표시되는 위치를 조절합니다. 기본형 : background-position : / ; 수평 위치 : left / center / right / / 수직 위치 : top / center / bottom / / background-position 속성에서는 수평 위치값과 수직 위치 값을 함께 표시하는데 값을 하나만 지정할 경우, 그 값은 수평 위치 값으로 간주하고 수직 위치 값은 50%나 center로 간주합니다. background-position 속성 값을 두개 지정한다면 앞의 값은 수평 ..
배경 스타일 CSS - background-size background-size 속성을 사용하면 배경 이미지를 여러 크기로 조절할 수 있습니다. 기본형 : background-size : auto / contain / cover / / 속성 값 설명 auto 원래 배경 이미지만큼 표시됩니다.(기본값) contain 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소합니다. cover 배경 이미지로 요소를 모두 덮도록 이미지를 확대/ 축소합니다. 너비 값과 높이 값을 지정합니다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정합니다. 배경 이미지가 들어갈 요소의 크기를 기준으로..
배경 스타일 관련 CSS - background-image background-image 속성은 배경 이미지를 넣을 때 사용합니다. 기본형 : background-image : url(파일 경로) 배경 이미지에는 웹에서 사용 가능한 파일인 jpg나 gif, png 파일을 사용하며 이것을 'url(파일 경로)' 형식으로 사용합니다. 배경 색과 마찬가지로 문서 전체의 배경 이미지를 지정하려면 태그에 지정하고 특정 영역에 배경 이미지를 만들고 싶다면 클래스 선택자나 id선택자를 이용해 태그에 배경 이미지를 지정하면 됩니다. 파일 경로는 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 절대 경로를 사용할 수도 있습니다. 배경 이미지는 여러 개를 사용할 수 있는데 이럴 경우 첫번째 이미지부터 순..
배경 스타일 관련 CSS - background-color 배경 색을 지정하려면 배경을 넣고 싶은 요소의 속성에 background-color 속성을 넣으면 됩니다. 기본형 : background : 색상을 세밀하게 조절하고 싶다면 16진수값을 사용하고 투명도도 함께 조절하고 싶다면 rgba 표기법을 사용하면 됩니다. 빨간색이나 파란색 등 알고 있는 몇 가지 원색만 사용하겠다면 기억할 수있는 색상 이름을 사용하는 것이 편리합니다. 세가지 중 어느 방법을 선택하든 브라우저에는 동일한 색이 나옵니다. 배경색을 초록색으로 지정할 때 아래의 표기는 모두 동일한 색이 브라우저에 나타납니다. background-color : #00ff00; (16진수 : 세밀히 색상 조절) background-colo..