CSS 21

!important 태그를 이용해 스타일 우선 순위 지정하기

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

IT 2020.03.04

웹 페이지에서 기기의 다크모드 감지하기

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

IT 2020.02.26

웹 개발자를 위한, 새로고침의 2가지 방법

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

IT 2019.07.19

[HTML] 웹 사이트의 이름을 정하기

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

IT 2019.02.23

colorscripter 붙여넣은 것을 가운데로 배치시키기.

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

IT 2019.02.07

티스토리에서 코드를 보여주는 웹 사이트 - colorscripter

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

IT 2019.02.07

한글은 이 폰트죠: 나눔스퀘어 웹 폰트 적용하기 (NanumSquare)

안녕하세요. 윤시즈 입니다. 이번시간에는 나눔스퀘어 웹 폰트를 적용하는 방법에 대해 알아보겠습니다. 나눔스퀘어 폰트는 상업적, 비상업적 모든 용도로 자유롭게 사용이 가능합니다.자세한 내용은 여기를 클릭해서 라이선스를 확인하세요. 나눔스퀘어 폰트를 적용하는 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..

IT 2019.02.05

JavaScript 및 PHP 등 여러가지를 암호화 하는 웹사이트

이번시간에는 JavaScript 및 PHP 등 여러가지를 암호화 하는 웹사이트를 알아보도록 하겠습니다. JavaScript는 .js 파일로 관리하시는 분도 있고, html 파일 안에 삽입하여 관리하시는 분이 있으신데, 이번 게시글에서는 방법 상관없이 JavaScript로 작성된 코드라면 적용이 가능합니다. 주의사항 암호화를 진행하게 되고, 서버 파일에 붙여넣게 되면 자신의 원본(Original) JavaScript 파일은 손실되니 사전에 백업을 권장합니다. 암호화하기 1 2 3 alert("JavaScript Test"); cs 사이에 이제 JavaScript 구문이 있죠? 사이에 있는 JavaScript 구문만 복사를 해줍니다. 1 alert("JavaScript Test"); cs 복사를 진행한 후,..

IT 2018.07.29

허용된 아이피만 웹 사이트에 접속할 수 있게 하자.

안녕하세요, Yoon의 yoo_nan01 입니다. 이번 시간에는 PHP 를 이용하여 허용된 아이피만 웹 사이트에 접속할 수 있게 하는 방법에 대해서 알아볼게요. 먼저 코드는 이렇습니다. 1234567Colored by Color Scriptercs 아이피1, 아이피2 부분에 아이피를 쓰면 아이피1, 아이피2 부분에 들어간 아이피만 사이트에 접속할 수 있는 것이죠.사이트를 점검할 때 유용하겠죠? 아이피 1개만 허용하고 싶으시면 $allowed_ip = Array("아이피1", "아이피2");이 부분을$allowed_ip = Array("아이피1");이렇게 고치면 됩니다. 더 궁금하신 점이 있으시다면 댓글로 남겨주세요.감사합니다.

IT 2018.07.28