윤시즈

CSS에서 다른 스타일이 내가 적용하려는 스타일이 적용되는 것을 방해한다면, 이번 시간에 소개시켜드릴 !important 태그를 사용하여 해결할 수 있습니다. !important 태그는 스타일의 우선순위를 최상단으로 지정하기 때문에 다른 어떤 스타일이 적용되어 있어도 !important 태그를 붙인 스타일이 적용됩니다. 예시를 통해 자세히 알아보도록 하겠습니다. 테스트 p { color: #000000; } 위와 같은 HTML 코드와 CSS 코드를 사용하면, 태그 안에 둘러쌓인 테스트라는 글씨는 색상이 검은색으로 변합니다. 하지만, 이미 저렇게 CSS에서 p 태그의 색상이 할당되어 있는데도 불구하고 색상을 하얀색으로 지정하고 싶다면 이번 시간에 활용되는 !important 태그를 사용하면 해결됩니다. p..

현시점으로 많은 기기에는 다크 모드 기능이 많이 적용되어 있습니다. 다크 모드가 적용된 인터페이스는 어두운 환경에서 사용하였을 때 눈의 피로를 줄여주고, 시력을 조금이나마 보호할 수 있습니다. 이번 시간에는 간단한 코드를 추가함으로, 다크 모드를 감지하고 그에 따라 웹 페이지의 CSS를 변경하는 방법에 대해 자세히 알아보겠습니다. JS 아래 코드를 JS 파일이나, HTML 파일에 붙여넣으세요. const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches console.log(prefersDark); CSS 아래 코드 수정하여 CSS 파일이나, HTML 파일에 붙여넣으세요. @media (p..

웹 개발을 하다보면 가끔 CSS가 깨지며, 오류가 날 때가 있습니다. 이때 브라우저 캐시를 모두 삭제를 하고 다시 로딩을 하게 되면 정상적으로 표시가됩니다. 하지만 이 방법을 모르시는 분들은 끝까지 "내가 잘못됬나?" 하시면서 파일만 계속 고치고 계시더라구요. 깔끔하게 이 문제를 해결하는 방법에 대해서 알아보겠습니다. 1. F5 많이들 알고 계시는 그냥 "F5" 버튼을 눌러서 새로고침 하는 것 입니다. 하지만, 브라우저 캐시는 삭제 되지 않고, 새로고침이 됩니다. 2. Ctrl + Shift + F5 "Ctrl + Shift + F5" 를 눌러 새로고침을 하게 되면, 컴퓨터에 저장되어 있던 브라우저 캐시를 삭제하고 다시 불러옵니다. 이 방법을 사용하면 CSS를 포함한 모든 캐시를 재다운로드 하기 때문에 ..

​ 안녕하세요. 윤시즈 입니다. ​​이전 강좌 보기: HTML 기초, HTML에 대해 알아보자​ HTML 에는 여러가지 태그가 있지만, 이번시간에는 수 많은 태그 중 태그를 알아보겠습니다. 태그는 여러가지 기능이 있는데, 대표적으로 대부분 웹 페이지에서 찾아볼 수 있는 텍스트를 누르면 다른 웹 사이트로 이동한다건가, 이미지를 누르면 다른 웹 사이트로 이동하는 링크 기능이 있습니다. ​​# 링크 기능​ ​먼저 코드는 아래와 같이 사용할 수 있습니다. 다음으로 가는 링크 예제 입니다. ​다음으로 가기 ​ 먼저 a 태그를 열어주고, href 에 링크 주소를 적어주시면 됩니다. 로 닫아주는건 기본이죠?

이번시간에는 HTML 에서 태그를 이용해 웹 사이트의 이름을 지정해주는 방법에 대해 알아보겠습니다. 기초: HTML 의 확장자는 .html 입니다. (ex. index.html) 1 2 3 4 5 Test Page cs 태그로 먼저 html 을 시작하였다고 정의해주고, 라는 태그를 사용합니다. 라는 태그는 일종의 사람의 머리고, 조금 더 나아가자면 태그는 몸입니다. 눈에 보이는 태그 안에 태그를 이용하여 웹 페이지의 이름을 지정해줍니다. 자세한 내용은 위 예시를 참고해주세요.

​ 안녕하세요. 윤시즈 입니다. 이번시간에는 HTML에 대해 알아보겠습니다. HTML의 예시코드를 웹 사이트 또는 블로그를 보고 따라하는 것도 물론 좋은 방법이자 학습이지만, 어떤자리에 어떤 태그가 들어가는지는 알고 넘어가시는게 좋습니다. HTML은 HyperText Markup Language 약자입니다. HTML 하나만을 가지고 사이트를 만들 수 있진 않습니다. HTML 이란 친구를 도와 줄 CSS, Javascript 가 있습니다. 인체로 비유하자면 HTML은 사람의 뼈이고, CSS는 외모, Javascript 는 능력입니다. 다시말해 HTML만을 가지고는 정상적인 웹 사이트를 만들 수는 없고, 부가적으로 CSS, Javascript 가 필요한 것 입니다. 간단한 사이트를 만드실 때에는 Javasc..

안녕하세요. 윤시즈 입니다. 제 블로그에서 이런거 많이 보셨죠? 오늘은 위 사진과 같이 티스토리에서 사용하는 방법에 대해 알아보겠습니다. 1) 먼저, https://colorscripter.com/ 에 접속합니다. 2) 아무 내용이나 입력합니다.3) 오른쪽 하단에 있는 클립보드에 복사 를 선택합니다.4) 티스토리 글쓰기 창에서 Ctrl + V 로 붙여넣습니다.더 궁금하신 점 있으시면 댓글로 남겨주세요. 다음 글 보기: colorscripter 붙여넣은 것을 가운데로 배치시키기.https://iflue.tistory.com/47 감사합니다.

안녕하세요. 윤시즈 입니다. 지난번 시간에 다룬 colorscripter 을 붙여넣으면 무조건 왼쪽으로만 정렬되는 것을 보실 수 있으셨을텐데요.티스토리에서 가운데로 배치시키는 방법에 대해 알아보겠습니다.아직 colorscripter 을 모르신다면 이전 포스팅을 참고하세요.이전 포스팅 ▶ https://iflue.tistory.com/46 1) 티스토리 에디터 오른쪽 상단에 있는 HTML 버튼을 선택합니다.2) 긴 코드가 있는 곳 맨 앞에 태그를 붙인다. 3) 긴 코드가 있는 곳 맨 뒤에 태그를 붙인다.* / 을 주의하세요. 4) 다시 HTML 버튼을 선택합니다. 5) 변경된 배치를 확인합니다.더 궁금하신 점 있으시면 댓글로 남겨주세요. 감사합니다.

안녕하세요. 윤시즈 입니다. 이번시간에는 나눔스퀘어 웹 폰트를 적용하는 방법에 대해 알아보겠습니다. 나눔스퀘어 폰트는 상업적, 비상업적 모든 용도로 자유롭게 사용이 가능합니다.자세한 내용은 여기를 클릭해서 라이선스를 확인하세요. 나눔스퀘어 폰트를 적용하는 CSS 코드 입니다. 1@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);cs 123body { font-family: 'NanumSquare', sans-serif; }Colored by Color Scriptercs 궁금하신 점 있으시면 댓글 남겨주세요!감사합니다. 저작권: https://moonspam.github.io/NanumSquare-Web-Fo..

meta 태그를 이용한 리다이렉트 12345Colored by Color Scriptercs