list-style 속성 ① list-style-type ② list-style-image ③ list-style-position CSS list-style 속성 속성 설명 list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음 list-style-type 리스트 요소의 마커(marker)를 설정 list-style-image 리스트 요소의 마커로 사용할 이미지를 설정 list-style-position 리스트 요소의 위치를 설정 list-style-type 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 함 list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있음 none 지정하지 않음 disc 검은 원형 ..

박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분 ① 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 ② 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않음 ③ 테두리(border) : 내용와 패딩 주변을 감싸는 테두리 ④ 마진(margin) : 테두리와 이웃하는 요소 사이의 간격 마진은 눈에 보이지 않음 height와 width 속성의 이해 CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(con..

text-align block요소 안에 있는 inline 요소를 정렬 ① 부모블럭요소에 text-align 속성을 지정하면, 자식 inline 요소가 정렬됨 block 요소에만 text-align 속성을 적용할 수 있음(정렬 대상은 inline 요소) ② 태그안의 컨텐츠, img태그, span태그가 해당 ③ hn태그 안의 텍스트 역시 정렬됨 left 왼쪽 정렬 right 오른쪽 정렬 center 중앙 정렬 justify 왼쪽과 오른쪽 열에 맞춰 화면을 늘어뜨림 참고 사항 div를 text-align으로 정렬할 수 있을까? div 자체는 정렬되지 않고 div 안의 inline 요소만 정렬 span 태그안의 inline 요소 정렬? span 태그는 block 요소가 아니기 때문에 text-align 속성이 ..

CSS text 속성 속성 설명 color 텍스트의 색상을 설정 direction 텍스트가 쓰이는 방향을 설정 letter-spacing 텍스트 내에서 문자 사이의 간격을 설정 word-spacing 텍스트 내에서 단어 사이의 간격을 설정 text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정 text-align 텍스트의 수평 방향 정렬을 설정 text-decoration 텍스트에 여러 가지 효과를 설정하거나 제거 text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정 line-height 텍스트의 줄 간격을 설정 text-shadow 텍스트에 그림자 효과를 설정 unicode-bidi direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정 vertical-a..

font-style 글꼴의 스타일로 주로 이탤릭체를 설정하기 위해 사용 normal 기본 italic 이탤릭체 font-weight 글꼴의 두께로 미리 정의된 단어나 100~900 사이의 숫자를 통해 설정 100 lighter 200 300 400 normal 500 600 700 bold 800 900 bolder font-size 글자 크기로 절대값과 상대값 설정이 가능함 절대값 : 고정된 크기 상대값 : 상대적인 크기로 장치에 따라 크기 조절이 가능 웹 문서의 경우 기본글꼴은 %(예 : body의 글꼴), 그 외 css작성은 em으로 사용할 것을 권장 px 절대값으로 1px은 컴퓨터 화면에서 점 1개와 같음 pt 절대값으로 주로 인쇄매체에서 사용 em 상대값. 웹 문서에서 사용되는 단위로 컴퓨터 외..

selector(선택자) 전체 선택자 * { color: red; } HTML 요소 선택자 h2 { color: teal; text-decoration: underline; } 아이디(id) 선택자 #idName{ color: sandybrown; text-decoration: line-through; } 클래스(class) 선택자 .className{ color: deepskyblue; text-decoration: overline; } 그룹(group) 선택자 h2, h3, p { background-color: lightgray; } css3에서 새롭게 정의된 선택자 선택자 설명 일반 동위 선택자 해당 요소와 동위 관계에 있으며, 문서의 위치에서 해당 요소보다 뒤에 위치한 모든 특정 요소를 선택함 ..