A sentimental robot

클래스 속성은 같은 클래스명을 가지고 있는 요소에 일괄적인 스타일을 적용하고 싶을 때 쓰이는 속성이다. 클래스명은 대소문자를 구분한다. (case-sensitive) 클래스명은 한 개 이상을 가질 수 있다. 각 클래스명은 공백으로 구분된다. 아이디는 클래스와 다르게 html 문서에서 고유한 값을 지녀야 한다. 아이디 값은 대소문자를 구분한다. 아이디 값은 한 개만 가질 수 있으며 공백을 포함하지 않는다. 아이디는 북마크의 지표로도 사용된다.

모든 html 요소는 기본적인 배치 값이 존재한다. 배치 값은 크게 block과 inline으로 나뉜다. Block level element block 수준 요소는 새로운 라인에서 배치되며 가능한 한 최대 너비를 차지한다. 대표적인 block 요소로는 - 등 이 있다. Inline element inline 요소는 새로운 라인에 배치되지 않고 자신을 표현할 때 필요한 너비만 차지한다. 대표적인 inline요소로는 popular element div 요소는 보통 다른 html 요소들은 감싸기 위한 용도로 쓰인다. span 요소는 보통 문자열을 감싸기 위한 용도로 쓰인다. 부분적인 문자열에 특정 스타일을 입힐 때도 자주 쓰인다.

순서가 없는, 정렬이 필요없는 리스트는 태그를 사용한다. (acronym for unordered list) 순서가 있는 리스트는 태그를 사용한다. 두 태그의 자식으로서 정렬될 각 리스트 아이템은 태그이다. 태그 속성 list-style-type 속성은 리스트 아이템 마크 스타일을 정의한다. 마트 스타일은 기본적으로 검정색으로 채워진 원(disc)이다. disc 외에도 circle(채워지지 않은 원), square, none 이라는 값이 있다. 태그 속성 type 속성은 리스트 아이템 마크 타입을 정한다. 기본적으로 숫자인데, 다른 값으로는 A ,a , I , i 가 있다. start 속성은 리스트가 시작할 값을 정의한다. 태그 각 용어에 대한 설명을 나열하는 리스트이다. 태그의 자식으로는 태그와 태그가..

border-collapse 속성 테이블 전체의 테두리와 각 셀의 테두리가 겹쳐 의도치 않은 두 개의 테두리가 생길 때 쓰이는 유용한 속성인 border-collapse, 값을 collapse를 해두면 테두리 겹침 현상을 해결할 수 있다. table, th, td { border: 1px solid black; border-collapse: collapse; } border-spacing 속성 셀 사이에 여백을 주고 싶을 때 사용하는 속성이다. 테이블의 테두리가 겹쳐져 있다면 (has collapsed border) 적용되지 않는다. border-spacing 속성은 테이블에 적용한다. table { border-spacing: 5px; } colspan,rowspan 속성 셀이 하나 이상의 열/행을 차..