웹(web)/프론트엔드-css27 CSS white-space(white-space을 처리하는 방법) html에서 가장 중요한 것은 컨텐츠를 이루는 텍스트이다. 텍스트를 작성하다 보면 space, new line , tab을 많이 사용하는데 이것을 브라우저에서 곧이 곧대로 표현해주진 않는다. space, new line, tab를 모두 white-space라고 가정하겠다. white-space: normal (default) css에서는 default로 여러개의 white-space를 하나의 space로 인식한다. 그리고 글자가 들어갈 영역에 맞춰서 개행이 이루어진다. 예를 들면 space+tab+newline을 만나면 브라우저에서는 space 하나로 처리하는 것이다. 아래 사진과 같이 영역에 맞춰서 개행이 이루어진다. 네 번째 줄에서 'ullamco~~' 다음에 띄어쓰기, 탭, 엔터를 쳤지만 띄어쓰기 .. 2020. 5. 25. CSS ::before ::before는 css를 통해 html 구조는 변경하지 않고 디자인을 추가함과 동시에 text도 쓸 수 있는 기능을 제공한다. 선택한 태그의 시작부분에 새로운 가상의 요소가 생긴다고 보면 된다. 단, content 속성은 꼭 넣어주어야 한다. 다음은 mdn의 before 설명이다. In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. p::before{ content: 'hi '; } bob 위와 같은 cs.. 2020. 5. 18. CSS vertical-align(inline 요소 세로 정렬) vertical-align을 사용해서 inline 요소를 vertial에서 정렬할 수 있다. 생각보다 굉장히 복잡하다. 자식 태그들의 공간에 따라 linebox 크기가 정해진다. 참고 사이트 http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align https://wit.nts-corp.com/2017/09/25/4903 https://www.w3schools.com/cssref/pr_pos_vertical-align.asp https://aboooks.tistory.com/171 https://www.w3.org/Style/XSL/TestSuite/results/4/XEP/baseline-shift.pdf http://www.myf.. 2020. 5. 18. CSS animation by before 박스를 색칠하는 애니메이션을 만들려면 어떻게 해야할까? 답은 ::before를 활용하여 구현한다. 핵심 아이디어는 다음과 같다. before와 색칠할 박스의 width, heigth를 동일하게 설정 position: absolute 사용하여 layer를 위로 이동 초기 width는 0으로 해두고 호버시 100%로 변경 색칠할 때 왼쪽에서 부터 오른쪽까지 채워지는 형태를 생각해볼 수 있다. 예시 코드) a:before{ width:0; height:100%: display:block; position:absolute; content:''; background-color: black; transition: all 1s; } a:hover:before{width:100%} 2020. 5. 15. 이전 1 2 3 4 5 6 7 다음
