아 오늘 금요일인 줄 아 오늘 금요일인 줄

▶ position - 요소의 위치 지정 방법의 유형/기준을 지정. - 요소를 특정 위치에 배치하기 위해서는 기준이 필요함. - 이때 position을 통해 직접 배치하는 것은 아니고 기준을 설정하는 것. [속성 값] - static: 유형(기준) 없음. 배치 불가능. 기본값. - 모든 요소는 배치할 준비가 안 되어 있는 상태. - 배치를 위해서는 아래의 값들을 사용해야 함. - relative: 요소 자신을 기준으로 배치. - absolute: 위치상 부모 요소를 기준으로 배치. - fixed: 브라우저(뷰포트)를 기준으로 배치. - sticky: 스크롤 영역 기준으로 배치. - position: absolute; 사용. - 부모 요소를 기준으로 배치됨. - 이때 부모 요소인 .parent에는 posi..

▶ clear - float 속성이 적용되지 않도록 지정. - float 속성의 해제. - float이 주변에 더 이상 영향을 미치지 않도록 처리하는 것. [속성 값] - none: 기본값. 요소 띄움 허용. - left: 왼쪽 띄움 해제. - right: 오른쪽 띄움 해제. - both: 양쪽 모두 띄움 해제.

▶ CSS float 참조: developing-move.tistory.com/123 - float 속성이 추가된 요소는 display 속성의 값이 대부분의 경우 block으로 수정됨. - 의 전형적인 inline 속성. - 에 display: block; 적용 시 결과 화면. - float: left; 사용. - display: block;과 마찬가지로 요소의 가로/세로 크기를 가질 수 있게 되고 margin이 적용됨. - 대부분의 경우 display 속성의 값이 변경되는 것으로 그렇지 않은 값들도 있음. 지정 값 변화 값 inline block inline-block block inline-table block table-row block table-row-group block table-column..

▶ float - 요소를 좌우 방향으로 띄움. 수평 정렬의 기능. - 많은 경우 요소를 부유하는 개념보다는 수평 정렬을 목적으로 사용됨. - 정확히는 요소를 띄우는 기능을 가지고 있지만 이를 이용해 수평 정렬을 시킬 수 있는 것. - CSS3에서는 flex(flexable box)가 도입되면서 float을 대체하는 속성이 나옴. - 근래의 웹사이트들은 수평 정렬에 flex를 사용함에 따라 float의 수평 정렬 기능은 많이 퇴색됨. [속성 값] - none: 요소 띄움 없음. 기본값. - left: 왼쪽으로 띄움. - right: 오른쪽으로 띄움. [사용 방법 및 예시] /* 사용 방법 */ float: 방향; /* 사용 예시 */ float: left; [단순 띄움] - 단순하게 띄우는 개념으로만 사용..

▶ word-spacing - 단어 사이(띄어쓰기)의 간격을 지정. - 띄어쓰기의 너비를 설정하는 것. - cf. letter은 자간(글자 사이의 간격)을 지정하는 것임에 유의. [속성 값] - 단위: px, em 등의 단위로 지정. - normal: 단어 사이의 일반 간격. 기본 값. - 단위로 0 지정 시(word-spacing: 0;) nomal로 설정하는 것(word-spacing: norma;)과 동일함. - 0으로 지정한다고 해서 띄어쓰기의 간격이 없어지는 것이 아님. ∴ word-spacing은 기본적으로 가지고 있는 띄어쓰기 너비에서 그에 더해 얼마나 더 간격을 넓힐 것이냐로 이해하는 것이 좋음. [사용 예시]

▶ letter-spacing - 문자 사이의 자간(글자 사이 간격)을 설정. [속성 값] - normal: 단어 사이의 일반 간격. 기본값. - normal은 font마다 조금씩 다를 수 있음. 또한 단위로 환산하면 0에 해당. 0에서 출발하는 것. - 단위: px, em 등 단위로 지정 ∴ 자간이 멀다고 느껴질 경우 음수 값 지정도 가능. [사용 예시]

▶ text-indent - 첫 번째 줄의 들여쓰기를 지정. - 음수값을 사용할 수 있음. - 음수 값 사용 시 첫째 줄은 왼쪽으로 들여쓰기(결론적으로 내어쓰기, outdent)됨. [text-indent 사용 예시] - 실무에서 많이 쓰임. - 들여쓰기 개념 자체는 웹에서 필요없을 수 있지만 글자를 밀어낸다는 개념으로는 많이 사용될 수 있음.

▶ text-decoration - 문자의 장식(line)을 설정. - 여기서의 장식이란 선(line)에 대한 장식을 의미. [속성 값] - none: 선 없음. 기본값. - underline: 밑줄 지정. - overline: 윗줄. - line-through: 중앙선(가로지르는) 지정. [사용 예시]