HTML15 box-shadow로 그림자 효과 넣기 1. box-shadow? box-shadow는 요소 테두리에 그림자 효과를 주는 속성이다. 그림자는 위치, 흐림 정도, 그림자 확장, 그림자 색상이 조절 가능하다. css에 사용할 때는 {box-shadow : x위치 y위치 blur spread color inset} 순으로 작성하면 되고 x위치와 y위치는 꼭 필수로 넣어야 한다. none : 그림자 효과 없음. x위치 : 그림자가 가로에 위치되며 양수면 오른쪽에, 음수면 왼쪽에 그림자가 생긴다. y위치 : 그림자가 세로에 위치되며 양수면 아래쪽에, 음수면 위쪽에 그림자가 생긴다. blur : 그림자를 흐릿하게 만들며 값이 클수록 더 흐려진다. spread : 양수면 그림자가 확장되고 음수면 축소된다. color : 그림자 색 inset : 그림자가 .. 2022. 8. 30. 웹에서 색상을 표기하는 방법 1. 16진수 표기법 16진수 표기법은 # 기호 다음에 6자리의 숫자나 알파벳을 쓰는 표기법이다. 예를 들어 흰색은 #FFFFFF, 검정색은 #000000으로 표기된다. 이 6자리는 앞에서부터 두 자리씩 #RRGGBB으로 표기되는데 R은 빨간색(Red), G는 초록색(Green), B는 파란색(Blue)을 의미한다. 2. rgb, rgba표기법 rgb표기법은 빨간색, 초록색, 파란색의 양을 십진수로 표기하는 방법이다. 색이 하나도 섞이지 않았을 경우 0으로 표기하고 가득 섞였을 경우는 255로 표기하며 색상의 양을 조절한다. 예를 들어 빨간색은 rgb(255,0,0)으로 표기한다. rgba표기법의 경우 맨 끝의 a는 투명도를 값으로 표기하는 것이다. 0에서 1까지에서 나타내는데 1은 완전 불투명하고 0은.. 2022. 8. 28. 테이블 1열이 고정된 가로 스크롤 테이블 만들기 (position: sticky) 데이터 양이 증가하면 스크롤 길이가 길어지면서 데이터 구별이 어려워지는데 엑셀에서는 틀 고정을 이용해서 데이터를 쉽게 파악할 수 있다. 그래서 이번에는 CSS의 position: sticky를 사용해 좌우 스크롤을 해도 테이블의 첫 번째 열은 고정되어 있는 테이블을 만들어 보려 한다. 1. position: sticky ? 부모 요소 안에서 위치값을 고정시켜준다. top, bottom, left, right 중에 하나는 필수적으로 꼭 설정해야 한다. IE11이하 버전은 지원하지 않는다. 2. HTML, CSS 소스 [HTML] Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Cell01 Cell02 Cell03 Cell04 .. 2022. 8. 23. 크롬에서 이미지 흐리게 나올 때 선명하게 만드는 방법 1. 크롬에 이미지 흐리게 나오는 문제 다른 브라우저에서는 괜찮은데 유독 크롬에서 이미지가 흐리고 깨져 보이는 경우가 있다. 그래서 그 부분에 대한 해결 방법을 기록하려 한다. 2. 해결 방법 [CSS] 2022. 8. 22. 이전 1 2 3 4 다음
