본문 바로가기

분류 전체보기43

shadow.. html 태그에 그림자효과 주기 글자나, 상자나 등등 그림자 효과를 줄수 있습니다. 대략 이렇게요 그림자 주는 중료는 2가지가 있습니다. 1.텍스트 쉐도우 2.박스 쉐도우 너무 직관적이라서 뭘하려는지 바로 알수있습니다. 시작하겠습니다. 1. 우선 h1 태그를 사용하든 뭘하든 5줄을 만들어 주고, 클레스를 각자 지정해보도록 하겠습니다. 2. style 부분에 text-shadw를 사용하였습니다. 사용법은 text-shadow: 가로 세로 번짐정도 색상 입니다. 여기서 가로는 +로 갈수록 오른쪽, 세로는 +로 갈수록 아래쪽입니다. (*수학 그래프랑 다르게 오른쪽,아래쪽 이 양수입니다. 참고로 z 의 양수값은 모니터에서 내얼굴로 오는 방향입니다) 그렇기 때문에 text-shadow: 3px 3px 5px red 라고 하면 오른쪽 아래로 빨간.. 2020. 6. 14.
CSS 그레디언트 그레디언트는 두가지 이상의 색상을 자연스럽게 단계적으로 변화시켜주는건데요 말로하려니 잘모르겠고 대략 이런것 입니다. 우리가 어디서 많이 봐왔던 것들이구요 어렵거나 생소한 개념이아니죠. 보통 포토샵이나 다른 프로그램으로 작업한뒤에 그림파일로 가져와서 backgrond-image 로 넣을수 있지만 html css에서도 작업할수 있습니다. 1.선형그레디언트 방향설정 색상설정 2.방사형그레디언트 이정도 차례를 가지고 있습니다. 시작하겠습니다 1.대략 상자를 하나 만들어 줍니다. 2. css 부분에 border 밑에 한줄더 적어주겠습니다. backgrond-image : linear-gradient 를 적어주면 괄호가 나오는데요 (방향,색상1,색상2,색상3....) 입니다. 색상은 원하는대로 조합하고, 갯수도 마.. 2020. 6. 14.
특정속성 가진 태그만 골라서 선택하기 속성 선택자 심화 부분입니다. 예를들어 문장이 100개가 있고, 그 문장이 각자 클레스 네임을 가지고 있다고 합시다. 1.책상 마이크 책 2.장미 스마트폰 노트북 3.볼링 낚시 4.노래 낚시 축구 농구 5.김민수 김철수 김영희 6.꽃문양 무지 파란색배경 7.강남 강북 여의도 김포 ................ 등등등이 있다고 할때, 저는 "선생님" 이라는 단어를 포함하는 클레스의 문장만 변경하고 싶다고 합시다. 즉 1,2,5,6,7 번의 문장색상을 빨간색으로 변경하고 싶은겁니다. 그럴때 하나하나 클레스를 선택해서 해도 되지만 좋은 방법들이 있습니다. 결론적으로 style 부분에 p [class*="선생님] { color: red } 라고 하면 선생님을 포함하는 class 를 가진 모든 p태그가 선택되어 .. 2020. 6. 14.