Front-End/CSS11 [CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover) 마우스 오버/hover 마우스 커서를 올렸을때(hover) effect를 주는 방법 지난 포스팅에서 다뤘던 opacity 속성과 함께 예문 작성) 마우스 커서가 안 보이는데, 커서를 올릴 때마다 이미지가 변화되는 것을 볼 수 있다. 2021. 11. 10. [CSS] opacity 속성(요소를 투명하게 만드는 속성) opacity 속성 /* 문법 */ opacity: number /*0.0부터 1.0까지의 수를 넣음*/ 숫자가 작을수록 투명해짐 pacity의 기본(default) 값은 1이다. 1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다. 해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다. 원본 사진 이렇게 투명해 진 것을 볼 수 있다. 2021. 11. 10. [CSS] 브라우저 업체별 접두어(vendor prefix) CSS3는 모듈들이 많고 표준 규약이 아직 완성이 되지 않은 부분이 많이 있음. 따라서 현재도 계속적으로 개발이 되고 있는 상황임. 하지만 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원이 되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여서 브라우저 별로 구분을 해 주어야 함. * -webkit- : 크롬, 사파리 브라우저 * -moz- : 모질라, 파이어폭스 브라우저 * -o- : 오페라 브라우저 * -ms- : 인터넷 익스플로러 브라우저 접두어를 사용하는 이유 css에 새로운 속성을 추가하기 전에, 일종의 테스트와 실험 기간으로 임시적으로 접두어를 사용하는 것 표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위한 것 사용 예) 2021. 11. 10. [CSS] list-style-type 속성 https://jinnnkcoding.tistory.com/104 [HTML] 목록 태그(ul, ol, li 태그) 목록태그 * ul 태그 : 순서가 없는(정렬이 되지 않은) 목록 태그 * ol(ordered list) 태그 : 순서가 있는(정렬이 된) 목록 태그. * li 태그 : 리스트 목록 태그는, type : disc / circle / square.. jinnnkcoding.tistory.com 목록태그의 스타일을 변경하는 list-style-type 속성 CSS에서 사용할 수 있는 list-style 속성은 다음과 같음 . 1. list-style-type 2. list-style-image 3. list-style-position list-style 속성 항목 모양의 종류, 위치, 항목에 넣.. 2021. 11. 10. [CSS] float 속성 float 속성 - 웹 문서의 요소를 떠 이게 하는방법 - 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성 - 수평적인 요소로 바꿀 때 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미 - 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성 float 속성의 값 * right : 오른쪽부터 차례로 왼쪽 방향으로 떠 있게 하는 속성 * left : 왼쪽부터 차례로 오른쪽 방향으로 떠 있게 하는 속성 * both : 양쪽 어느쪽으로도 떠 있지 않게 하는 속성 - 해제하는 속성 - float 속성을 사용한 후에는 반드시 해제(clear: both;) 해 주어야 함. 박스1 박스2 박스3 박스4 박스4에는 clear 속성을 걸어주어 float 속성을 해지했다. 2021. 10. 31. [CSS] shadow 속성 (text-shadow, box-shadow) text-shadow 텍스트에 그림자를 지정하는 속성 /*문법*/ text-shadow: * 가로거리 : 텍스트로부터 그림자까지의 가로 거리 * 세로거리 : 텍스트로부터 그림자까지의 세로 거리 양수 값은 글자 아랫쪽으로 그림자가 만들어지고, 음수 값은 글자 윗쪽으로 그림자가 만들어진다. 필수적으로 들어 가야 하는 속성. * 번짐정도 : 그림자가 번지는 정도를 말함. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나감. 그림자가 크게 나타남. 반대로 음수 값을 사용하면 그림자가 모든 방향으로 축소되어 보여짐. 기본 값은 0임. box-shadow 그림자를 만드는 속성 /*문법*/ box-shadow: * 수평거리 : 그림자의 수평거리(얼마나 떨어져 있는지). 양수값은 오른쪽, 음수값은 왼쪽에 그림자를 만.. 2021. 10. 31. 이전 1 2 다음
