Web/CSS (2) 썸네일형 리스트형 [CSS] CSS로 삼각형 그리기 CSS에서 삼각형을 만들기 위해서는 사각형을 활용한다. 단계를 거쳐 살펴보자.위에 있는 이미지가 아래에 첨부되어있는 코드에 대한 결과 화면이다.1. 가로 100px, 세로 100px인 사각형이 있다. 각 테두리의 색상을 다르게 해놨는데, 각 모서리를 잘 보면 하나의 테두리의 범위가 대각선 모양으로 끝나는 것을 확인할 수 있다. 이 점을 이용해서 삼각형을 만드는 것이다.2. 우선 높이를 0으로 만들어서 사각형의 밑면만 남긴다. 그리고 아래쪽 테두리를 제외한 나머지 테두리의 색상을 투명색으로 지정한다. 그럼 1번에서 봤던 사각형의 4가지 테두리 중에 아래쪽 테두리만 남은 것을 확인할 수 있다. 역시 테두리의 양 끝은 대각선으로 잘려있는 모습니다.3. 이제 2번에서 가로 길이를 0으로 줄인다. 그러면 2번의 .. [CSS] shadow로 후광 효과 주기 1. box-shadow객체에 그림자 효과를 줄 때 box-shadow 속성을 사용한다.다음 코드를 실행시키면 주황색 정사각형 뒤로 흰색 그림자가 생긴 것을 볼 수 있다. 그림자 효과를 주는 box-shadow 속성 부분을 보면 이렇게 되어있는데, 각 위치에 있는 값의 역할은 다음과 같다.첫번째 값: 그림자의 가로 위치(사각형 정 가운데가 0)두번째 값: 그림자의 세로 위치(사각형 정 가운데가 0)세번째 값: 그림자의 블러 크기네번째 값: 그림자 색상그럼 아래 코드가 의미하는 것은 "사각형 정 가운데로부터 30px 반경을 가진 흰색 그림자를 만들어 달라"가 된다.box-shadow: 0 0 30px white; 각 값을 조절해서 다양한 형태의 그림자 효과를 줄 수 있다. 2. text-.. 이전 1 다음
