전체 글 170

[CSS] 배경색만 투명하게 변경하기 (opacity, rgba 차이)

배경색을 투명하게 만드는 방법에 대해 알아보자. See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen.opacity단어 뜻마저 불투명인 대표적인 투명 관련 속성이다. 색이 들어가는 곳이라면 대부분 사용가능한걸로 알고 있다.특징은 opacity속성을 지정하면 하위 속성들도 다 불투명해진다.rgba색상을 정의할때 투명도를 포함하여 색상을 정의해준다.말 그대로 색상을 투명하게 하기때문에 해당 색상만 불투명해진다.rgba는 rgb와 3가지 인자와 함께 a(alpha)값을 인자로 받는데 0부터 1까지 입력받는다.0은 완전투명 1은 완전불투명을 뜻한다.특정한 색만 불투명하게 변경하고 싶다면 색상을 rgba로 지정해주면 된다. ※ 필자는..

CSS 2025.01.13

[CSS] 하이퍼링크(a href) 밑줄 없애기 또는 변경하기

하이퍼링크의 밑줄을 없애거나 변경해보자. See the Pen [232] 하이퍼링크 by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen.text-decoration-line : 밑줄의 위치를 지정하거나 없앨수 있다.none : 선 없음underline : 밑줄overline : 윗줄line-through : 취소선text-decoration-style : 선의 모양을 변경할수 있다.solid : 한줄선double : 두줄선dotted : 점선dashed : 굵은 점선wavy : 웨이브선text-decoration-color : 선의 색상을 정의한다.text-decoration-thickness : 선의 굵기로 정의 한다. ※ 위 예제는 편집 가능하니 주석을 풀..

CSS 2025.01.13

[CSS] 하이퍼링크(a href) 글자 색상 변경하기

하이퍼링크의 이벤트별 색상 변경방법을 알아보자. See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen. a:link아직 방문하지 않은 링크의 글자색을 정의한다.기본색상은 파란색이다. 많은 사람들이 익숙한색a:visited사용자가 방문한 적이 있는 링크의 글자색을 정의한다.기본색상은 보라색이다. 필자는 보통 link색상과 일치시켜둔다.a:hover마우스 오버시 링크의 글자색을 정의한다.위 예제 테스트용에 마우스를 올리면 변경되는것을 확인할수 있다.a:active마우스 클릭시 링크의 글자색을 정의한다.(여기서 클릭시란 마우스를 눌렀다가 떼기전까지의 시간입니다.)마찬가지로 위 예제 테스트용을 클릭하고 마우스를 떼지..

CSS 2025.01.13

[VS Code] Visual Studio Code 폰트 변경하기 (D2 Coding 폰트로 설정하기)

VS Code 폰트를 변경해 보자.우선 폰트의 정확한 이름을 확인하기 위해 윈도우 -> 설정 -> 개인설정 -> 글꼴을 켜둔다.Ctrl + ,(쉼표)를 눌러 설정 -> 텍스트 편집기 -> 글꼴을 선택한다.우측 Font Family 제일 앞쪽에 내가 원하는 글꼴을 입력해준다.필자는 D2Coding 폰트로 변경하였습니다. 해당 글꼴은 아래 사이트에서 다운받을수 있습니다.   GitHub - naver/d2codingfont: D2 Coding 글꼴 D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 관련글 ..

[VS Code] Visual Studio Code 언어 한글로 설정하기 (한국어 언어팩 설치하기)

VS Code 한국어 설정을 해보자.설치시 처음에 언어팩 설정이 뜬다고 하는데 필자는 뜨지가 않았다.그래서 커맨드 팔레트를 통해 언어를 설치하였다.Ctrl + Shift + P 입력 후 상단창에 language 검색Configure Display Language 선택 후 한국어 선택이제 프로그램 종료후 재시작을 하면 한국어로 표시되는걸 확인할수 있다. 관련글 [VS Code] Windows 11 Pro에 Visual Studio Code를 설치해보자 [VS Code] Visual Studio Code 폰트 변경하기 (D2 Coding으로 설정하기) ..

[VS Code] Windows 11 Pro에 Visual Studio Code를 설치해보자

Visual Studio Code에 대해 알아보고 설치해보자.필자는 블로그 올릴글을 편집할때 VS Code를 이용하는편이다.보통 HTML편집을 사용하는데 가벼우면서도 많은 기능을 지원한다.VS Code란?비쥬얼 스튜디오 코드(Visual Studio Code 이하 VS Code)는 마이크로소프트에서 개발한 무료 오픈 소스코드 편집기이다.2015년에 처음 출시되었으며 이후 여러 프로그래밍 언어를 지원하며 코드 강조 표시, 자동 완성 및 디버깅 기능까지 지원한다.VS Code의 장점1. 크로스 플랫폼 호환VS Code의 가장 큰 장점은 Windows, MacOS, 심지어 Linux에서도 실행가능한 플랫폼 호환성이다.(필자도 Mac Air를 들고다닐때 유용하게 사용하였다.)2. 가벼운 사양VS Code는 매우..

[Blog] 티스토리 글꼴 바꾸기 (네이버 무료 배포 글꼴 적용하기)

티스토리 웹 참조로 폰트변경 해보기.폰트를 변경하는 방법은 크게 두가지로 나눠진다.1. 직접 참조 (폰트 파일 업로드)말 그대로 폰트파일을 서버에 업로드하여 해당 폰트를 직접 참조하는것이다.아래 highlight.js 내부의 폰트를 변경한 방법이 직접 참조에 해당한다.   [Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용) highlight.js에 쓰이는 폰트를 변경해보자.제목 라벨과 Copy버튼을 넣고 가만히 보고 있었는데 뭔가 자꾸 어색한 느낌이 들어서 뭐 때문인지 몰랐다가 Visual Studio를 켜고난뒤에 알았다. 폰트가 코딩 mirwebma.tistory.com 2. 외부 참조 (URL 참조)이번에 해볼방법은 외부 참조이다. (사실 직접..

Blog 2025.01.11

[Blog] 티스토리가 광고수익을 나눠가진다고?

티스토리가 광고수익을 나눠가지는지 확실히 알아보자.광고에러때문에 여기저기 검색을 하던도중 의문이 드는 글을 보게되었다.티스토리가 안그래도 쥐꼬리보다 더 적은 내 광고수익을 광고연동을 하면 수익을 나눠가진다는 글이였다.직접 확인해보고 싶어서 여기저기 뒤지다 보니 아래와 같은 페이지가 보였다.결론은 완전 헛소문이였다.지분을 나눌수있게 설정은 되어있지만 티스토리에서 가져가는것은 0%이다.(지금 이렇게 에러가 나게 만들어놓고 수익을 빼가면 진짜 양심도 없는것이다.)아마 수익을 가져갈려고 하면 나한테에도 동의를 얻어야 되게 만들어져있을꺼 같은데 앞으로 광고관련 무언가를 수락할때 꼼꼼히 확인해봐야할거 같다. 관련글 [Blog] 구글 애드센스 오류 (티스토리 ..

Blog 2025.01.11

[Blog] 구글 애드센스 오류 (티스토리 자동광고 충돌) adsbygoogle.push() error:

구글 광고 오류(adsbygoogle.push() error)에 대해 알아보자.티스토리에서 구글 애드센스와 연동하여 광고까지 자동으로 해준다고 한다.소스사이사이 광고를 요리조리 잘 배치해야됬던 예전과 차원이 다르게 편하다.그런데 아래와 같은 에러로그가 보이며 광고가 보이지가 않는다.Uncaught TagError: adsbygoogle.push() error: Warning: Do not add multiple property codes with AdSense tag to avoid seeing unexpected behavior. These codes were found on the page ca-pub-"티스토리 광고코드", ca-pub-"필자 광고코드"at cr (adsbygoogle.js?clie..

Blog 2025.01.10