배치 방법 결정하는 속성 display 속성 display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수 있음 자주 사용하는 display 속성값 block : 인라인 레벨 요소를 블록 레벨 요소로 만듦 inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦 inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있음 none : 해당 요소를 화면에 표시하지 않음 -(예시) : 예시 1 예시 2 예시 3 예시 4 -(결과) : 왼쪽이나 오른쪽으로 배치하는 속성 float 속성 태그는 블록 레벨 요소..
요소 주변의 여백을 설정하는 속성 margin 속성 요소와 요소 사이의 간격을 조절 할 수 있음 4개 방향에 똑같이 지정할 수 있고, margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어를 사용해서 특정 방향에만 지정할 수도 있음 기본형 : margin: | | auto margin 속성값 : 너비값이나 높이값을 px이나 em 같은 단위와 함께 수치로 지정함 : 박스 모델을 포함한 부모 요소를 기준으로 너비값이나 높이값을 퍼센트(%)로 지정함 auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함 마진 속성을 사용하여 웹 문서를 가운데 정렬하기 margin 속성을 사용하여 웹 문서의 내용을 화면 중앙에 배치하려면 배치할 요소의 너비값이 정해져 있어야 함 margin-l..
박스 모델의 방향 top : 윗 부분 right : 오른쪽 bottom : 아랫 부분 left : 왼쪽 테두리 스타일을 지정하는 속성 border-style 속성 기본값은 none border-style 속성값 none : 테두리가 없음 / 기본값 hidden : 테두리를 감춤 / 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않음 solid : 테두리를 실선으로 표시함 dotted : 테두리를 점선으로 표시함 dashed : 테두리를 짧은 직선으로 표시함 double : 테두리를 이중선으로 표시함 / 두 선 사이의 간격이 border-width 값이 됨 groove : 테두리를 창에 조각한 것처럼 표시함 / 홈이 파인 듯 입체 느낌 inset : 표에서 border..
박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라짐 블록 레벨 요소 블록 레벨 요소 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 한 줄을 차지한다 = 해당 요소의 너비가 100% ∴ 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음 대표적인 태그로 , , 등이 있음 -(예시) : 예제 예시 1 예시 2 예시 3 예시 4 예시 5 -(결과) : 인라인 레벨 요소 인라인 레벨 요소 한 줄을 차지하지 않음 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 ∴ 한 줄에 인라인 레벨 요소를 여러 개 표시할 수 있음 대표적인 태그로 , , 등이 있음 -(예시) : 예제 예시 1 예시 2 예시 3 예시 4 예시 5 -(결과) : 박스 모델 박..
표 제목의 위치를 정해 주는 속성 caption-side 속성 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 사용하면 표 아래쪽으로 옮길 수 있음 기본형 : caption-side: top | bottom ┌ top : 캡션을 표 윗부분에 표시함 / 기본값 └ bottom : 캡션을 표 아랫부분에 표시함 표에 테두리를 그려 주는 속성 border 속성 표 바깥 테두리와 셀 테두리를 각각 지정함 -(예시) : 예제 예제 예시 1 예시 2 예시 3 예시 4 A B C D 가 나 다 라 -(결과) : 셀 사이의 여백을 지정하는 속성 border-spacing 속성 셀과 셀 사이의 여백을 조절할 수 있음 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1..
불릿 모양과 번호 스타일을 지정하는 속성 list-style-type 속성 순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있음 순서 있는 목록에서는 번호 스타일을 지정할 수 있음 list-style-type의 속성값 : ┌ disc : 채운 원 모양 ( ● ) ├ circle : 빈 원 모양 ( ○ ) ├ square : 채운 사각형 모양 ( ■ ) ├ decimal : 1부터 시작하는 10진수 ( 1, 2, 3, ... ) ├ decimal-leading-zero : 앞에 0이 붙는 10진수 ( 01, 02, 03, ... ) ├ lower-roman : 로마 숫자 소문자 ( ⅰ, ⅱ, ⅲ, ... ) ├ upper-roman : 로마 숫자 대문자 ( Ⅰ, Ⅱ, Ⅲ, ... ) ├ lo..
