개발자의 끄적끄적

[html/css] CSS / CSS를 HTML에 적용시키는 방법 HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법입니다. 간단한 예는 다음과 같습니다. Lorem ipsum dolor. 해당 태그(위 코..

[html/css] IE img label for 클릭 안될때 처리방법 보통 아래 코드 같은 경우 이미지를 클릭하면 체크박스에 체크가 되지만 IE의 경우 정상적으로 동작하지 않습니다. 체크체크 ​ 체크체크 해결책은 아래 css 를 적용하면 됩니다. label { display: inline-block; } label img { pointer-events: none; } 출처: https://goni9071.tistory.com/363 [고니의꿈]

[html/css] 버튼 정렬 방법 추가적으로 float 속성을 찾아서 좌 / 우 정렬을 수정할 수 있습니다!! 참고들 하세요!!

[HTML] prefers-color-scheme . html에 다크모드에 맞춰서 스타일 변경하기 [펌] 요즘 다음 뉴스도 적용되었길레 조사해봤음. prefers-color-scheme 값은 light와 dark 만 가질 수 있다. 나머지 다른 값들은 무시됨. chrome 76부터 지원 사파리 12.1 부터 지원 IOS 사파리 13 부터 지원 [ ▼ 참고 Source ] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .themed { display: block; width: 10em; height: 10em; background: black; color: white; } /* light 모드일 때의 스타일 재선언 */ @media (prefers-colo..

[HTML] referrerpolicy 으로 외부 링크 금지 이미지 회피 [펌] 가끔 외부 이미지를 퍼올때 403에러 등의 이류로 못땡겨오는 상황이 생기곤합니당 아직 테스트는 안해봤지만 혹시나 하는 마음에 공유하고자 퍼왔습니다!! 참고들 하세요!! 이미지의 referrerpolicy="no-referrer" 애트리뷰트를 사용해서 리퍼럴 체크로 외부 링크 금지 이미지에 대해서도 브라우저에서 보여줄 수 있다. 호환성 보장못함! IE는 불가 사파리 불가. -----------=------- 특이점으로 https 페이지에서 http 이미지를 그냥 사용할 경우, referer을 기본으로 안보내기에 위 애트리뷰트 없이 동작이 됨 (크롬-PC에서 확인 함) [ ▼ 참고 Source ] 1 추가적인 사항 header ..

[CSS] 텍스트 줄바꿈 처리 word-break, white-space [펌] 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단..

[html / css] CSS 줄바꿈 금지 - white-space:nowrap; [펌] 줄바꿈이 되지않은 것(뚫고 나오네요) 현재 시각은 2015년 1월 25일 일요일 오후 10시 45분 입니다. ^^* 줄바꿈이 된것 현재 시각은 2015년 1월 25일 일요일 오후 10시 45분 입니다. ^^* 출처 : http://superkts.pe.kr/helper/view.php?seq=V&seq=390

[html/css] background image 바꾸기 예를들면, document.body.style.background = "url('이미지 경로') no-repeat 0 0"; 위처럼하면 body 부분에 배경이 들어가게 되고, 특정 id 부분에 이미지를 변경하려면 document.getElementById("id").style.background = "url('이미지 경로') no-repeat 0 0"; 위처럼 getElementById("아이디") 부분에 아이디를 변경하여 동작시키면 해당 아이디만 배경이미지가 변하게 됩니다! 이미지 뿐아니더라도 이런식으로 응용하시면 많은 작업들이 가능하죠 ㅎㅎ 참고들 하세요!!