웹서핑하다보면 마우스 커서가 강제로 변환되는 홈페이지들이 있다. 커서를 만든 후 직접 서버에 업로드하여 변경할 수 있지만 번거로우니까 쉽게 바꾸는 방법을 알아보자. 홈페이지 커서 변경 사이트 접속한다. 원하는 마우스 커서를 선택한다. 하단으로 내려가서 코드를 복사 후 홈페이지 코드 입력하는곳에 붙여넣는다. 그러면 지금 이 포스트의 화면처럼 커서를 변경할 수 있다.

filter CSS filter 속성은 요소에 흐림 효과 또는 색상 변경과 같은 그래픽 효과를 적용한다. 필터는 일반적으로 이미지, 배경 및 테두리의 렌더링을 조정한다. blur() 이미지를 흐리게 만든다. brightness() 이미지를 더 밝거나 어둡게 만든다. contrast() 이미지의 대비를 늘리거나 줄인다. drop-shadow() 이미지 뒤에 그림자를 적용한다. grayscale() 이미지를 회색조로 변환한다. hue-rotate() 이미지의 전체 색조를 변경한다. invert() 이미지의 색상을 반전시킨다. 0은 원본, 0.5는 회색, 색상 반전. opacity() 이미지를 투명하게 만든다. saturate() 이미지의 전체 채도를 변경한다. sepia() 이미지를 세피아로 변환한다.

체크 박스가 선택되거나 라디오 버튼이 선택될 때 선택된 색상을 변경하고 싶다. 그럴 땐 accent-color 속성을 이용하면된다. accent-color accent-color 속성은 <input type=”checkbox”>, <input type=”radio”>, <input type=”range”>, <progress>에서 사용할 수 있다. 사용된 코드 설명 <input type=”checkbox” checked style=”accent-color: auto;” /> : checkbox만들고 check 박스가 기본적으로 선택되어있게 한다. 선택 되어있는경우 색상을 auto표현한다. <input type=”radio” style=”accent-color: red;”> : radio 버튼 만들고 선택된 radio 버튼의 경우 색상을 red로 표현한다. <input type=”range” style=”accent-color: yellow;”> : range바를 만들고 왼쪽을 기준으로 설정된 range에는 색상을 yellow로 표현한다. <progress id=”file”…

Shape shape-outside 기본 도형을 정의할 수 있다. 기본 도형 inset() : 사각형 모양 circle() : 원형 ellipse() : 타원형 polygon() : clip-path로 만든 모양 CSS 박스 모델 사용된 코드 설명 border-box : border 가장 자리를 둘러싸고 표현한다. padding-box : padding 가장 자리를 둘러싸고 표현한다. content-box : content 가장 자리를 둘러싸고 표현한다. margin-box : margin 가장 자리를 둘러싸고 표현한다. shape-image-threshold 불투명도 임계값을 설정한다. 이미지를 사용하여 모양을 정의하는 경우 불투명도가 동일하거나 임계값보다 큰 이미지 부분만 shape에 사용된다. 그 외의 부분은 무시된다. shape-margin…

홈페이지를 만들다보면 공통적으로 적용되는 스타일들이 있다. 이럴 때 CSS에도 변수를 사용할 수 있다. 나는 공통적으로 적용되고 + CSS 파일에서 수정을 편하게 하기위해 변수를 사용 한다. 변수 CSS에서 변수를 어떻게 선언하고 어떻게 사용하는지 방법에 대해 알아보자. 변수 선언 요소에 변수를 선언할 수 있지만, 주로 :root에 변수 선언하여 각 요소별로 변수를 불러와서 사용한다. CSS에서 변수 선언할 때에는 –를 앞에 붙인 후 변수 이름을 지정한다. 또한 변수 이름에 대,소문자 구분하기때문에 대문자와 소문자가 같은 문자를 표시해준다고 하더라도 다른 변수로 인식한다. CSS :root { –light-mode-bg-color:…

웹 표준에 포함된 스타일 시트가 아닌경우 벤더 프리픽스Vendor Prefix 를 추가하여 사용할 수 있다.   벤더 프리픽스Vendor Prefix 가 자동으로 추가되는 라이브러리를 에서 보고 이용할 수 있다.   그렇지 않다면 사용할 CSS 입력하면 벤더 프리픽스Vendor Prefix 를 자동으로 추가하여 CSS 코드 만들어주는 도 이용할 수 있다. 크로스 브라우징 웹 사이트 또는 웹 응용 프로그램이 서로 다른 브라우저에서 작동하고 브라우저 기능이 없거나 부족할 때 성능이 저하되지 않게 크로스 브라우징 접두어를 이용하여 의도한대로 나오게 한다. 크로스 브라우징 접두어 Chrome : -webkit- Microsoft…

웹사이트를 이용하다보면 특정 단어에 링크 처럼 밑줄이 가있고 거기 마우스를 올리면 그 단어에 대한 설명이 나오는것들이 있다. 이 것을 툴팁이라고 부르고 있으며 CSS로 Javascript 없이 툴팁을 만들 수 있다. Tooltip CSS로 툴팁이 나오게끔 설정할 수 있다. 기본 – 툴팁이 위쪽에 나오게 하기 CSS .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext::after { content: ” “; position: absolute; top: 100%; left: 5px; border-width: 5px; border-style: solid; border-color: rgba(0,0,0,0.5) transparent transparent transparent; } .tooltip .tooltiptext { visibility:…

브라우져별로 기본 폰트가 조금씩 차이가 있다. 모든 폰트의 모양을 동일하게 만들려면 웹폰트를 이용해야한다. 웹폰트 서체 파일을 서버에 탑재해 클라이언트로 보내주는 방식의 기술이다. 웹폰트로 사용되는 파일 형식으로는 EOT, WOFF, WOFF2 등이 있다. WOFF가 호환성이 가장 좋으므로 나는 WOFF를 사용한다. 웹폰트 만들기 웹폰트를 만들려면 라이선스 요구 사항을 충족하는지 확인을 먼저 해야한다. 이용하여 웹상에서 웹폰트 만들거나 폰트의 용량이 크다면 참고하여 웹폰트를 만들자. Webfont generator 1. 접속 2. [Upload Fonts] 버튼을 눌러서 폰트(ttf) 파일 업로드 3. Yes, the fonts I’m uploading are legally eligible…

그라이드언트를 이용하여 조금 더 화려한 홈페이지를 만들 수 있다. 주로 Gradient generator를 이용하긴하지만 대략적으로 알고있어야 수정할 때 수월하게 수정할 수 있다. Gradients 그라디언트 함수에는 linear-gradient(), radial-gradient(), conic-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), 그리고 repeating-conic-gradient() 까지 이용할 수 있다. <img>의 배경 색상으로도 그라디언트를 사용할 수 있다. linear-gradient() 선형 그라디언트를 표현해보자. 기본 .basic-linear { background: linear-gradient(blue, pink); } .toright { background: linear-gradient(blue, pink); } .tobottomright { background: linear-gradient(blue, pink); } <div class=”basic-linear”></div> <div class=”toright”></div> <div class=”tobottomright”></div> 각도 .0deg{ background: linear-gradient(0deg, blue, pink); } .90deg{ background:…

position 위치 지정 요소를 사용하여 위치를 정확하게 px 단위로 지정하자. Position 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다. top과 bottom 동시 지정 : top이 우선 적용 된다. left와 right 동시 지정 : ltr이면 left 우선 적용. rtl이면 right 우선 적용. 사용하는 방법을 알아보자. 위치 지정 요소 static 값이 아닌 모든 속성 값. static 요소Element 를 기본 흐름normal flow 에 따라 배치한다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다….