본문 바로가기

웹(web)136

CSS text-overflow(텍스트 잘리는 부분 처리) 아래 사진처럼 공간이 부족한 경우 ... 으로 처리하는 예시이다. 단독으로 text-overflow을 사용하면 "..." 처리가 되지 않는다. 아래 두 가지 속성을 함께 사용해야 한다. overflow: hidden white-space: nowrap 또한 당연한 얘기지만 글자가 width의 좌우 넓이를 넘쳐야 한다. 2020. 5. 8.
CSS Text 관련 속성 mozilla에 css fonts, css text라고 검색하면 관련 속성이 30개가 넘게 나온다. 외울 수 없으니 자주 사용하는 것만 간단히 파악하고 다른 것들은 필요할 때 찾아서 쓰도록 하자. 한글이나 워드 프로그램에서 글자를 꾸며 보았을 것이다. 대표적으로 글자 크기 변경, 정렬, 글자 색 변경 이 있다. 이런 기능들을 css를 활용하여 적용하는 작업인 셈이다. 아래 설명할 것들은 글자가 들어가는 태그라면 가능하다. , 과 같은 것들에서 글자를 사용하기 때문이다. font 관련 속성 (글자 레벨에서의 속성) font-size : 글자의 크기를 조정 font-weight: 글자 굵기 조정 font-style: font 스타일로 normal | italic | oblique 등이 있음 color: 글자.. 2020. 5. 6.
CSS Box align, content align 레이아웃을 구성하면서 정렬의 사용 빈도가 높다. 정렬의 종류는 두 가지이다. 하나는 박스를 정렬하는 방법이고 다른 하나는 박스 안의 컨텐츠를 정렬하는 방법이다. 박스를 화면 상에서 가운데 정렬하는 방법은 display 속성에 따라 다르다. block : width를 지정 후 margin: auto; inline: 부모 태그에 text-align: center; inline-block : inline과 동일 박스 내부의 컨텐츠를 정렬하는 방법은 display 속성에 따라 다르다. block: text-align: center; inline: 박스 자체를 정렬하는 방법을 이용 inline-block: text-align: center; 정리하면 1.박스 자체 정렬 1.1. block인 경우 width 지정 .. 2020. 5. 6.
CSS Float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. mozilla에서 float을 위와 같이 정의한다. 보통, 단어 뜻 그대로 '떠다닌다' 하면 뭘 어떻게 떠다닌다는 것인가? 라는 의문이 들기 마련이다. float은 인라인 요소가 float속성이 적용된 요소를 감싸는 효과라고 생각하면 된다. left - 부모요소의 left side부터 차례대로 위치된다. right- 부모요소의 right side부터 차례대로 위치된다. none- float형태로 적용되나 다음에 오는 element의 좌우 크기가 남은 공간보다 크면 다음 줄에.. 2020. 5. 6.

티스토리툴바