# snippet

9개의 포스트
post-thumbnail

VSCode에서 Snippet 활용하기

이미 아무 것도 안하고 있지만 더 격하게 아무것도 안하고 싶다면

2020년 8월 18일
·
0개의 댓글

개발 검색 팁

보통 공식 문서는 document라는 이름으로 사용되는데 document 객체가 검색될 때가 있어서 -\_- documents로도 검색해 봅니다.<대상> document or <대상> documents<대상> quick reference or <대

2020년 7월 31일
·
0개의 댓글
post-thumbnail

flex로 카드형 디자인 만들기

정말 많이 등장하는 카드형 디자인을 만들어봅시다.예를들면 아래 이미지와 같은 것을 일컫습니다.이미지 출처: https://www.nutrione.co.kr/

2020년 5월 12일
·
0개의 댓글

link styling

꼭 a 태그 뿐만 아니라 hover나 active의 경우에는 focus를 받지 않는 일반 div에도 다 동작합니다.우선 link 상태들에 대한 이해가 필요합니다.Link (unvisited): 아무 곳도 방문하지 않은 기본 상태입니다. :link pseudo class

2020년 4월 7일
·
0개의 댓글

List Styling

태그요소에 기본적인 스타일이 적용되어 있고, 이들을 핸들링하는 css 속성들이 있습니다.그러나, 그 것들은 디자이너가 디자인한 것과 다르기 때문에 대체로 list-style-type:none을 해놓고 li의 ::before요소로 만들어 사용합니다.list-style-t

2020년 4월 6일
·
0개의 댓글

multiline ellipsis

보통 비디오의 제목이나, 상품의 이름 같은 경우 디자인적으로 정한 길이가 넘어가면 넘치는 내용을 자르고 잘렸다는 표시로 '...' 등을 붙입니다.이는 웹킷브라우저에서는 스타일시트만으로 제어가 가능하지만, 우리의 익스플로러는 역시 허락하지 않습니다.우선 스타일시트로 제어

2020년 4월 1일
·
0개의 댓글
post-thumbnail

테이블 디자인하기

테이블은 display속성도 table인 만큼 자신만의 개성이 강합니다.한 번 정리해 보겠습니다.우선 테이블을 웹표준에 맞춰 작성합니다.만드는 자세한 방법은 여기를 참고합니다.테이블을 그냥 만들면 가독성이 무척이나 떨어지고, 폭도 좁고 그냥 보기가 힘들 정도입니다.브라

2020년 3월 30일
·
0개의 댓글

thumbnail wrapper 썸네일 래퍼 만들기

프로필 이미지, 상품 이미지 등 우리는 이미지를 잘라서 특정영역에 맞춰 넣을 경우가 종종 존재합니다.이럴 때, 원하는 의미에 맞춰서 이미지를 컨테이너 안에 넣어야 하는데요. 이를 위해 html 구조를 2단으로 가져갑니다.이미지를 어떤 방식으로 컨테이너에 맞춰 넣을것인가

2020년 3월 23일
·
0개의 댓글
post-thumbnail

vscode 에디터 단축키

터미널탭 켜기 ctrl + shift + back quote( 영어로 바꾼후 ~표시) 작업중인 창 prev, next option + command + left option + command + right 에디터 창 분할 ctrl + command + right

2020년 1월 13일
·
0개의 댓글