전체 글 (265) 썸네일형 리스트형 [CSS] clear ▶ clear - float 속성이 적용되지 않도록 지정. - float 속성의 해제. - float이 주변에 더 이상 영향을 미치지 않도록 처리하는 것. [속성 값] - none: 기본값. 요소 띄움 허용. - left: 왼쪽 띄움 해제. - right: 오른쪽 띄움 해제. - both: 양쪽 모두 띄움 해제. [CSS] float의 display 수정 ▶ 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.. [CSS] float ▶ float - 요소를 좌우 방향으로 띄움. 수평 정렬의 기능. - 많은 경우 요소를 부유하는 개념보다는 수평 정렬을 목적으로 사용됨. - 정확히는 요소를 띄우는 기능을 가지고 있지만 이를 이용해 수평 정렬을 시킬 수 있는 것. - CSS3에서는 flex(flexable box)가 도입되면서 float을 대체하는 속성이 나옴. - 근래의 웹사이트들은 수평 정렬에 flex를 사용함에 따라 float의 수평 정렬 기능은 많이 퇴색됨. [속성 값] - none: 요소 띄움 없음. 기본값. - left: 왼쪽으로 띄움. - right: 오른쪽으로 띄움. [사용 방법 및 예시] /* 사용 방법 */ float: 방향; /* 사용 예시 */ float: left; [단순 띄움] - 단순하게 띄우는 개념으로만 사용.. [CSS] word-spacing ▶ word-spacing - 단어 사이(띄어쓰기)의 간격을 지정. - 띄어쓰기의 너비를 설정하는 것. - cf. letter은 자간(글자 사이의 간격)을 지정하는 것임에 유의. [속성 값] - 단위: px, em 등의 단위로 지정. - normal: 단어 사이의 일반 간격. 기본 값. - 단위로 0 지정 시(word-spacing: 0;) nomal로 설정하는 것(word-spacing: norma;)과 동일함. - 0으로 지정한다고 해서 띄어쓰기의 간격이 없어지는 것이 아님. ∴ word-spacing은 기본적으로 가지고 있는 띄어쓰기 너비에서 그에 더해 얼마나 더 간격을 넓힐 것이냐로 이해하는 것이 좋음. [사용 예시] [CSS] letter-spacing ▶ letter-spacing - 문자 사이의 자간(글자 사이 간격)을 설정. [속성 값] - normal: 단어 사이의 일반 간격. 기본값. - normal은 font마다 조금씩 다를 수 있음. 또한 단위로 환산하면 0에 해당. 0에서 출발하는 것. - 단위: px, em 등 단위로 지정 ∴ 자간이 멀다고 느껴질 경우 음수 값 지정도 가능. [사용 예시] [CSS] text-indent ▶ text-indent - 첫 번째 줄의 들여쓰기를 지정. - 음수값을 사용할 수 있음. - 음수 값 사용 시 첫째 줄은 왼쪽으로 들여쓰기(결론적으로 내어쓰기, outdent)됨. [text-indent 사용 예시] - 실무에서 많이 쓰임. - 들여쓰기 개념 자체는 웹에서 필요없을 수 있지만 글자를 밀어낸다는 개념으로는 많이 사용될 수 있음. [CSS] text-decoration ▶ text-decoration - 문자의 장식(line)을 설정. - 여기서의 장식이란 선(line)에 대한 장식을 의미. [속성 값] - none: 선 없음. 기본값. - underline: 밑줄 지정. - overline: 윗줄. - line-through: 중앙선(가로지르는) 지정. [사용 예시] [CSS] text-align ▶ text-align - 문자의 정렬 방식을 지정. - 왼쪽, 가운데, 오른쪽, 양쪽 정렬과 같은 내용을 제공. [속성 값] - left: 왼쪽정렬. - right: 오른쪽 정렬. - center: 가운데 정렬. - justify 양쪽 맞춤 ※ text-align: justify; 사용 시 주의사항 - 한 줄에서는 적용이 되지 않고 두 줄 이상일 경우에만 사용 가능하다는 조건이 있음. - 두 줄 이상인 경우에도 줄 바꿈을 강제적으로 했을 때는 적용되지 않고 작성하다가 공간이 모자라서 아래로 게행되는 경우에만 작동. - 사용 시에는 적용 안 됨. - direction 속성(텍스트 방향 및 쓰기 방향 지정 / ltr, rtl)의 값에 의해 text-align 속성의 기본값이 변경될 수 있음. - 일반적으로.. 이전 1 ··· 16 17 18 19 20 21 22 ··· 34 다음
