본문 바로가기

전체 글291

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.
[Application Layer]email - mail access protocol 수신자 쪽 메일서버에서 수신한 유저가 메일 메세지를 가져오는 프로토콜에 대해서 살펴보자. POP(Post Office Protocol)에 대해서 살펴보겠다. 메일박스가 있는 메일서버가 서버 역할이 되고 유저가 클라이언트 역할이 된다. TCP로 연결된 후에 POP 프로토콜을 사용하여 가져오는 과정이 된다. 초기 POP에서는 모든 메세지를 유저의 하드디스크에 저장하고 서버의 메일박스는 지우는 형태(download-and-delete)였다. 이후 메일박스에 메세지의 카피본을 저장해두는 방식(download-and-keep)으로 변화하였다. POP3가 작동할 때 클라이언트의 command와 서버의 response를 주고 받는 일련의 과정이다. 크게 2단계의 phase이 있다. authorization phase.. 2020. 5. 17.
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.

티스토리툴바