웹코딩 배우기/· CSS140 가로메뉴바 상단고정 position: fixed; top: 0px; width: 100%; 2020. 9. 9. 가로메뉴바에서 오른쪽에 고정된 메뉴 하나 만들기 인라인 css - float: right; CSS 적용순서 : 인라인 / 내부, 외부CSS / 브라우저 기본 값 2020. 8. 28. 배경 그라데이션 linear-gradient(to right, 색, 색;) 그라데이션 그라데이션 이쁘다. (ʘ‿ʘ✿) 가끔 써먹어야징~ (◕ㅁ◕✿) * 그라데이션 보는 사이트 https://uigradients.com/ uiGradients - Beautiful colored gradients uiGradients is a handpicked collection of beautiful color gradients for designers and developers. uigradients.com https://webgradients.com/ Free Gradients Collection by itmeo.com Free collection of 180 background gradients that you can use as content backdrops in any part of.. 2020. 8. 21. CSS : box-shadow box-shadow none : 그림자를 적용하지 않는다. h-shadow : 그림자 X축 값 v-shadow : 그림자의 Y축 값 blur : 흐림 spread : 확장 color : 그림자 색 inset : 그림자를 내부에 적용 inherit : 속성 값을 상위요소로부터 상속받는다. box-shadow: 10px 10px #ccc; ▶ x값 / y값 / 색 box-shadow: 10px 10px 10px #ccc; ▶ x값 / y값 / 흐림값 / 색 box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5); ▶ x값 / y값 / 흐림값 / 확장 / 색 box-shadow: inset 10px 10px 10px 10px rgba(0, 0, 0, 0.5); ▶ 내부 / .. 2020. 6. 10. CSS :before / :after 북클럽 스킨 편집할 때 잠깐 봤던건데 이게 뭐하는건가? 했었음. 이런거였군. 이미지나 글자 넣을 수 있단다. 그냥 넣으면 되지 왜 before. after을 쓰지??? 차차 알아가기로하고. width, height 값을 줘도 이미지 크기 변경이 안되던디. 아~몰라. 요즘 모르는게 너무 많아서 짜증난다. 뭐 하나 배우면 다음 단계로 넘어가질 않으니 열 받는다. 오~~~ 신이시여!!! 꿈에서 알려주시오!!! 쿠오오오오~~~~~~~~~~~~!!! ￣O￣)/ get away with!!! (단어 하나 배웠다고 열라 써 먹는거 보소 ㅋㅋㅋ) 2020. 2. 14. CSS 마우스에 반응하는 투명한 이미지 약간 투명한 이미지에 마우스를 올리면 원본으로 돌아오는 효과. opacity와 hover이용. 이미지에 마우스를 가져가 보자. 반대로 원본 이지를 투명하게 반응하게 하려면 opacity 기본값은 1.0이라 0.5만 지정해주면 된다. 파일은 이미지 링크를 걸기 위해 올린거니 다운 받지마세요. 2020. 2. 10. CSS 투명 이미지 opacity 이미지에 투명도 주기 opacity: 값; opacity 값은 0.0~1.0을 사용한다. 기본값은 1.0 이고 숫자가 작아 질수록 투명해진다. 오호~ 재미난 기능이네. opacity opacity opacity opacity opacity opacity !!! 2020. 1. 10. CSS 요소 특수 상태 / 마우스 반응 마우스에 반응하는 요소의 특수 상태. 말이 참 어렵다. 공부하면서 가끔 느끼는데 말을 왜이리 어렵게 하나? 라고 느낄 때가 있다. 그러나 그 말을 다르게 표현할 방법은 나도 모르겠음. 그냥 마우스에 반응하는 요소? 정도로 해도 괜찮을 것 같다. 아~몰랑~ 마우스에 반응 한다하면 보통 글자색이나 배경색이 변하거나 뭔가 생겼다가 없어지고 이런거. a:link, visited, hover, active 마우스에 반응하는 요소중 대표적인게 a요소다. a는 링크요소다. ~ link : 링크가 걸린 내용(글)의 색. visited : 방문한 링크의 색. hover : 마우스가 올라갔을 때 링크의 색. active : 마우스를 클릭 했을 때 링크의 색. 참고로 각 태그는 쓰는 순서가 있다. link, visited,.. 2019. 12. 23. CSS 자식 요소 선택 css를 이용하면 요소 선택에 실수가 없어야한다. class는 '.(점)', id는 '#'을 쓴다. 이거는 기본이고. 만약 div 속에 들어있는 자식 요소를 선택하려면? 다음의 예를 보자. 오늘은 내부 css 스타일로 실습 해본다. div안에 있는 p를 선택하는 방법. 'div공백p' 라고 쓰면된다. 별거 없네 ㅡㅡ?여태 class랑 id만 써봐서 몰랐는데 쉽다.다음 과목으로~ㄱㄱ 2019. 12. 18. CSS 세로 가운데 정렬 padding 이용 요소의 내용을 세로 가운데 정렬하는 방법을 배워보자. 이번엔 padding값을 이용한다. padding : 0 0 0 0 padding-top: padding-rgiht: padding-bottom: padding-left: 패딩 값은 기본 이렇게 5가지가 있다 아래 4가지는 무시하고 그냥 맨 위에 것만 쓸 줄 알면 된다. 패딩 값 순서 : 상 - 우 - 하 - 좌. 이것만 기억하자. 상우하좌. padding을 이용한 세로 중앙 정렬 2019. 12. 18. CSS position: absolute; 절대 위치 position: absolute; 는 지난번에 배운 것 같은데? 배웠는지 확인해보니 배웠다. 까먹었네. 지난 글 좀 보고 왔다. 까먹은거 모르는 거다. 다시 한번 해보자. 2019/11/19 - [웹코딩 배우기/· CSS] - CSS position position: absolute; 이 태그는 절대적 위치를 지정한다. 절대적 위치를 지정하기 때문에 다른 요소와 겹치게 나온다. 그럼 z-index를 싸서 어느 요소가 위에 올지 설정하면 된다. 2019/09/17 - [웹코딩 배우기/· 태그 사전] - CSS 태그 : z-index 2019. 12. 16. 이전 1 ··· 7 8 9 10 11 12 13 다음
