ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
# Side Menu
-
recentPost
-
popularPost
-
Archive
-
recentComment
Study/Html_Css
Study/Html_Css
-
web-Color 개인 적인 저장웹 페이지를 만들면서 color을 정하기가 쉽지 않더군요. 그래서 생각나는 데로 색을 정하여 다음에 사용하려고 합니다. 이번에 정할 색은 외국 nordpass의 색으로 색감이 맘에 들어 참조하여 만들어 보았답니다. :root { --body-bg: #efeff4; --label-Primary: #151922; --label-Seconday: #8a8c91; --label-Tertiary: #b9babd; --link: #43a5a1; /* 45% */ --link-hover:#80cbc9; /* 65% */ --default-fixation:#000000; --highlight-fixation:#ffffff; } 'Fixation'문구는 고정을 이야기하는 것 입니다. 내게 필요한 옵션 기능, 사후 고려 ..Study/Html_Css 5 2021. 4. 26.
-
스타일 시트 CSS 접두어 -webkit-, -moz-, -ms-, -o- 의미웹에서 CSS를 적용할 때 webkit, moz, ms, o접두어가 속성앞에 붙은 것을 종종 보실 수 있을 겁니다. 크로싱 브라우저를 위해서 필요하기 때문이고, 주로 쓰이는 브라우저는 IE, 크롬, 파이어폭스, 오페라, 사파리가 있습니다. 우리나라에서는 크롬과 파이어폭스만 적용하면 무난하게 처리가 가능합니다. 브라우저 별 접두어 -webkit- : 구글, 사파리 브라우저에 적용. -moz- : 파이어폭스 브라우저에 적용. -ms- : 익스플로러에 적용. (생략 가능) -o- : 오페라 브라우저에 적용. 사용방법 selecter { background:-webkit-linear-gradient(to bottom, skyblue, white 50%); background:-moz-linear-gradient..Study/Html_Css 2021. 4. 6.
-
CSS 기초: box-sizingCSS 기초: box-sizing 매번 CSS 입력할 때 사용하는 문구로 그냥 사용하는 것이 아닌 것은 알지만 이런 기초도 모르고 관행처럼 사용했습니다. 이번에 Box-sizing:border-box를 알고 사용하고자 이렇게 포스트 합니다. 우선 Box-sizing을 알기 위해서는 CSS Box Model을 먼저 이해가 필요한데 이 부분은 링크로 대신하겠습니다. 대신 margin과 padding는 따로 포스팅 할것입니다. 이것 역시 알고 이해해야 할 것 같아서... 매우 널리 사용해서 Nomarlize.css에서 이 부분이 포함될줄 알았는데 없더군요. 대신 hr태그에는 'hr { box-sizing: content-box; /* 1 */'이 있더군요. 널리 사용하는데도 왜 빠졌는지 극도의 최적화로 범용적..Study/Html_Css 2021. 2. 23.
-
[백업] JQuery로 간단한 X버튼 만들기닫기 아이콘 Close icon 예전에 만들었던 '간단한 X버튼 만들기'에서는 자바스크립트를 이용해서 만들었고 이번에는 JQuery를 사용해서 만들어 보겠습니다. 먼저 .close선택자와 .notice선택자의 css를 만들고, .notice { padding: 10px; background-color: rgb(249, 250, 252); text-align: left; margin-top: 5px; } .notice h4 { font-size: 1.3rem; font-weight: 700; padding: 1px 0; } .notice p { -webkit-margin-before: .3em; -webkit-margin-after: .5em; } .close { float: right; display: ..Study/Html_Css 2020. 11. 25.
-
[백업] 간단한 X(닫기)버튼 만들기닫기 아이콘 Close icon 공지 및 경고와 같은 콘텐츠를 닫으려면 일반 닫기 아이콘을 사용합니다. 예 × 공지사항 간단하게 onclick자바스크립트를 이용 만들어 보겠습니다. 물론 전 이것을 예전에 인터넷에서 보고 적은 것이라서 질문은 사양합니다. 밑의 html파일에 들어갈 부분입니다. css는 이문서 하단에 있습니다. × 공지 내용 위의 onclick에서 this.parentNode.style.display = 'none';값을 적으므로 .parentNode상위 부모 노드의 노드 이름을 가져오고 display = 'none';값을 입력해서 보여지지 않게 만드는 것입니다. 다른 예로 /* 1번째 */ /* 2번째 */ × 공지 내용 위의것은 가 2개 들어 가서 .parentNode를 2번 사용 하였..Study/Html_Css 2020. 11. 25.
-
[백업] 시계 출력 웹페이지주말에 시간이 조금 남아 무엇을 할까 고민 중에 예전 XP 시절에 바탕화면 시계가 있었던 것을 생각나서 이번에 회사 컴퓨터에 해보자는 생각에 만들었습니다. 하지만 비스타부터는 바탕화면에 웹페이지를 넣지 못하더군요. 그래도 만들기는 했는데 아쉽게도 그냥 홈피에 넣고 자리 비울 때 가동할까 합니다. 홈페이지 주소는 http://r5st.rf.gd/time/ 소스는 부끄러워서 말을 못하겠네요. 원체 뒤죽박죽이라... 그냥 요점만.. 밑에 있습니다. function printClock() { var clock = document.getElementById("clock"); // 출력할 장소 선택 var currentDate = new Date(); // 현재시간 var calendar = currentDate...Study/Html_Css 2020. 11. 24.
-
[백업] 티스토리 카테고리별 css적용하기서론 이 블로그에 사용하고 있는 카테고리별로 다른 css 적용하는 방법입니다. innk-blog 리스트입니다. 최신 티스토리에서 인덱스페이지가 있어서 좋긴한데 저의 블로그 경우 글 제목과 날짜, 카테고리만 나옵니다. 글의 내용이나 대표이미지가 없어 믹믹한 모양이 보여져서 만들게 된 것입니다. 영어 카테고리면 쉽게 사용이 되지만 그것이 아닐경우에는 몇번을 생각 했지만 자바스크립트를 사용 해야 겠네요. 우선 카테고리가 영어일 경우 사용하면 되는 방식 위의 예제에서 카테고리의 치환자는 입니다. 이 치환자를 클래스(class)로 하면 됩니다. 즉) 이제 알아볼 부분은 카테고리가 한글일 경우입니다.(영어 외의 경우) 이 부분은 솔찍히 한글 css선택자를 적어도 사용이 가능합니다. (크롬만 테스트 했음) 하지만 c..Study/Html_Css 3 2020. 11. 24.
-
[백업] Top버튼 만들기 4가지 방법웹 사이트 글을 읽다 보면 너무 긴 페이지에 위로 가기가 불편합니다. 홈페이지나 블로그 아래에 맨 위로 버튼을 만들어 놓으면 무척이나 편합니다. 간단히 만드는 방법에 대해 알아봅시다. 참고로 새로운 것은 아니고요. 기존의 인터넷에 있는 것을 모아 보았습니다. 1. 간단히 텍스트로 만들기(html) 간단하게 먼저 시작 하겠습니다. html의 a태그를 이용 만들어 보겠습니다. ... TOP 위의 것은 a태그 name을 이용 Top버튼 만들기 입니다. ... TOP 그리고 a태그의 name를 이용할 필요없이 선택자인 id를 이용 해도 됩니다. TOP 또하나 위치 하고 상관없이 처음으로 가기는 #만 하셔도 됩니다. 밑의 예제를 참조. 위치 지정 버튼(간단) 이 부분은 많은 소스이 있습니다. 그중에 html로만 ..Study/Html_Css 2020. 11. 23.
-
HTML5 기본 템플릿HTML5 기본 템플릿 기본적으로 자주 사용할 것 같은 구조인 HTML5 파일을 적어 봅니다. 웹이나 블로그 제작할 때 매번 같은 작업을 하려고 하니 대단히 귀찮아져서 이렇게 블로그에 하나 만들어 놓을까 싶어서 이렇게 글 적습니다. 예전에 한번 CSS 초기세팅 값 (개인적) 포스트 한 적 있는데 그것의 연장인 것 같습니다. 참고 : 많이 사용하는 프론트엔드 프레임워크 소개 저의 경우에는 가능한 한 기존의 프레임 워크를 사용하지 않으려 합니다. 하지만 현실은 그렇지가 않아서 사용합니다만 가능하면 빼려고 노력을 합니다. 물론 나와 있는 또는 많이 사용하고 좋은 Bootstrap(부트스트랩)이나 Foundation 등의 좋은 프론트엔드 프레임워크들이 있습니다. 이것을 사용하면 쉽고 강력한 반응형 웹을 만들 수..Study/Html_Css 2020. 3. 31.
-
CSS 초기세팅 값 (개인적)웹 표준 웹 표준을 따르는 것이 서로 다른 브라우저에서 동일한 화면을 보여주는 것 웹페이지 제작 시 웹 표준에 따라서 작업을 하더라도 서로 다른 웹 브라우저에서 동일하게 보이지 않는 경우가 많이 있습니다. 각각의 브라우저들이 서로 다른 렌더링 방식을 가지고 있거나, 표준에 대한 지원율도 차이를 보이기 때문입니다. 웹페이지를 만들면서 사용자가 각기 다른 브라우저에서 웹페이지가 동일하게 보이도록 하는데 많은 시간을 들이게 됩니다. 이를 위한 일반적인 해결 방법으로는 CSS를 사용하여 각 다른 브라우저의 디폴트 스타일을 지우고 무효화하는 것입니다. 마진과 패딩 등을 0으로 설정하여 기본 설정 없이 모든 상황이 동일한 상태에서 설정을 다시 시작하는 것입니다. 자신이 필요한 기능을 만들어서 사용해도 좋지만 이미 ..Study/Html_Css 2020. 3. 18.
-
CSS 시작하기CSS Cascading Style Sheets Cascading Style Sheets (CSS)는 documents가 사용자에게 어떻게 보일까를 기술하는 언어입니다. html문이 뼈대라면 css는 겉 피부 또는 확장이라고 할 수 있습니다. CSS 속성의 주요 위치 CSS를 사용하면 웹 개발자와 디자이너 분리가 가능해지게 됩니다. 적용 방식은 4가지 있습니다. HTML 파일 안에 CSS를 포함할 경우 태그 안에 태그를 넣어 사용할수 있습니다. CSS 파일을 분리 된 경우 파일이름.css 파일을 생성하고 HTML파일에서 불러오는 형식으로 사용할수 있습니다. HEAD 안에 CSS를 포함 할 경우 link 요소를 이용한 외부 CSS 파일 import를 이용한 외부 CSS 파일 HTML 요소에 인라인 스타일로..Study/Html_Css 2020. 3. 16.