JuinThyme

caption-side 속성 - 표 제목 위치 정하기 표 제목은 태그를 이용해 캡션으로 표시한다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있다. caption-size: top | bottom 속성 top : 캡션을 표의 윗부분에 표시한다. 기본값이다. bottom : 캡션을 표의 아랫부분에 표시한다. border 속성 - 표 테두리 스타일 결정하기 표도 border 속성을 이용해 테두리를 그릴 수 있다. 표의 바깥 테두리와 셀의 테두리를 따로 지정을 할 수 있다. 프로축구 경기 일정 울산 울산 vs 인천 부산 부산 vs 대구 서울 서울 vs 대구 border-collapse 속성 - 테두리 통합, 분리하기 테두리가 2줄로 표..

IT/HTML 및 CSS 2021. 5. 6. 12:25

column-with - 단의 너비 고정하고 다단 구성하기 한 화면을 여러 단으로 구성할 때 단의 너비를 고정해 놓고 화면을 분할할 수도 있고 단의 개수를 고정해 놓고 화면을 분할할 수도 있다. column-width: | auto 속성 : 단 너비를 직접 지정한다. auto : 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산된다. 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 column-count 속성 - 단의 개수 고정하고 다단 구성하기 다단 화면을 만들 때 단의 개수를 고정해 놓을 수 있다. 단의 개수를 고정하면 브라우저의 너비와 상관없이 단의 개수를 항상 일정하게 유지할 수 있다. column-count: | auto 속성 : 콘텐츠가 들어갈 단의 개수를..

IT/HTML 및 CSS 2021. 5. 3. 18:59

CSS 포지셔닝이란? 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할 지를 결정하는 것이 float 속성과 position 속성이다. 박스 모델의 패딩이나 마진, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 그리고 같은 내용이더라도 어떻게 배치를 하고 어떤 배경과 색상을 사용할 지에 따라 다른 레이아웃으로 만든다. box-sizing 속성 - 박스 너비 기준 정하기 여러 요소를 배치하려면 각 요소의 너비를 계산해야 한다. CSS의 width 속성은 콘텐츠 영역의 너비를 나타낸다. 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 한다. box-sizing: content-box | border-box 속성 content-box : width 속성 값을 콘텐츠 영역 너비 값으로..

IT/HTML 및 CSS 2021. 5. 1. 12:22

margin 속성 - 요소 주변 여백 설정하기 마진(margin)은 현재 요소 주변의 여백이다. 따라서 마진을 이용하면 한 요소와 다른 요소 사이의 간격을 조절할 수 있다. margin-top: | | auto margin-right: | | auto margin-bottom: | | auto margin-left: | | auto margin: | | auto 속성 : 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위로 함께 수치로 지정한다. : 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정한다. auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다. 실행 화면 마진 중첩(margin overlap) 현상 박스 모델의 마진 속성을 ..

IT/HTML 및 CSS 2021. 4. 28. 19:00

border-style 속성 - 테두리 스타일 지정하기 테두리 스타일은 기본적으로 none이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다. border-style: none | hidden | dashed | dotted | double | groove | inset | outest | ridge | solid 속성 none : 테두리가 나타나지 않는다. 기본 값이다. hidden : 테두리가 나타나지 않는다. dashed : 테두리르 짧은 선(점선)으로 표시한다. dotted : 테두리를 점선으로 표시된다. double : 테두리를 이중선으로 표시한다. groove : 테두리를 창에 조각한 것처럼 표시한다. solid : 테두리를 실선으로 표시한다..

IT/HTML 및 CSS 2021. 4. 27. 12:33

블록 레벨 요소와 인라인 레벨 요소 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소다. 인라인 레벨(Inline-level) : 줄을 차지하지 않는 요소다. 종류 블록 레벨 태그 : , ~, , , , , , , , , 인라인 레벨 태그 : , , , , , , , , , 박스 모델(box model) - 박스 형태의 콘텐츠 태그를 사용하는 텍스트 단락을 블록 레벨 요소인데 단락 앞뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 가진다. 이런 박스 형태를 스타일 요소에서는 '박스 모델(box model) 요소'라고 한다. 박스 모델을 잘 알아야 한 줄에 배치할 지, 줄을 바꾸어 배치할 지, 요소와 요소 사이의 간격을 어떻게 조절할 지 결정할 수..

IT/HTML 및 CSS 2021. 4. 26. 18:43

background-color 속성 - 배경 색 지정하기 배경 색을 지정하려면 배경을 넣고 싶은 요소에 속성을 background-color 속성을 넣으면 된다. background-color: background-color: #00ff00; /* 16진수 표현 */ background-color: rgb(0, 255, 0); /* rgb 표현 */ background-color: green; /* 색상이름 */ 배경 색 스타일과 상속 태그 선택자에서 지정하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한, 문서 전체에 똑같이 적용된다. 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르..

IT/HTML 및 CSS 2021. 4. 24. 14:03

list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기 목록 형태에서 스타일을 지정할 수 있다. 순서가 없는 목록인 경우 목록 앞에 다양한 불릿을 넣을 수 있다. 순서 없는 목록에서 불릿 모양 바꾸기 disc (●) : 채운 원 circle (○) : 빈 원 square (■) : 채운 사각형 none : 불릿 없애기 사과 바나나 파인애플 사과 바나나 파인애플 순서 목록에서 숫자 바꾸기 decimal : 1, 2, 3... decimal-leading-zero : 01, 02, 03,,,, lower-roman : i, ii, ii,,, upper-roman: I, II, III,,, lower-alpha 또는 lower-latin : a, b, ,c,,,, upper-alpha 또는 ..

IT/HTML 및 CSS 2021. 4. 23. 12:21