web study

png이미지를 갖다 쓰는 게 아닌 CSS로 직접 삼각형 그리는 법을 알아보려고 한다. 이 방법을 사용하면 삼각형 영역에만 링크를 걸 수도 있고 작은 이미지에서 화질이 깨져보이는 현상도 없앨 수 있다. 그리고 퍼블리싱 기술 면접에도 종종 나오는 질문이기도 하니 이번 기회에 제대로 알아두는 게 좋겠다. 기본 원리 너비 100px, 높이 100px의 사각형이 있다고 생각해보자. 그 사각형에 테두리 10px을 준다. 테두리는 top, bottom, left, right로 나뉘어져 있는 건 누구나 아는 사실일 것이다. 저 상태에서 사각형의 너비와 높이를 0으로 바꾸면, 테두리만 남는데 이 모양이 삼각형이다. 1번 삼각형을 원한다면 border-top을 제외한 나머지 테두리 색을 투명으로 바꾸면 된다. 이 과정이 ..