ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
# Side Menu
-
recentPost
-
popularPost
-
Archive
-
recentComment
CSS
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.
-
[백업] 티스토리 카테고리별 css적용하기서론 이 블로그에 사용하고 있는 카테고리별로 다른 css 적용하는 방법입니다. innk-blog 리스트입니다. 최신 티스토리에서 인덱스페이지가 있어서 좋긴한데 저의 블로그 경우 글 제목과 날짜, 카테고리만 나옵니다. 글의 내용이나 대표이미지가 없어 믹믹한 모양이 보여져서 만들게 된 것입니다. 영어 카테고리면 쉽게 사용이 되지만 그것이 아닐경우에는 몇번을 생각 했지만 자바스크립트를 사용 해야 겠네요. 우선 카테고리가 영어일 경우 사용하면 되는 방식 위의 예제에서 카테고리의 치환자는 입니다. 이 치환자를 클래스(class)로 하면 됩니다. 즉) 이제 알아볼 부분은 카테고리가 한글일 경우입니다.(영어 외의 경우) 이 부분은 솔찍히 한글 css선택자를 적어도 사용이 가능합니다. (크롬만 테스트 했음) 하지만 c..Study/Html_Css 2 2020. 11. 24.
-
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.
-
기본적으로 사용하는 레이아웃 모음에전에 css-tricks 사이트에서 보고 만들어 둔 것을 이번에 블로그에 업데이트합니다. 총 4개의 파일로 나름 몇 번을 수정해서 제 스타일로 만들어 둔 것입니다. 1. 2단 반응형 레이아웃 Html Css Demo & Download Header Main Sidebar Footer body { margin: 0 auto; max-width: 56em; /* 896px = 56em * 16 */ padding: 1em 0; } body { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 10vw 30vw 10vw; grid-gap: 1em; } header, footer { grid-column: 1 / span 5; ..Study/Html_Css 2019. 10. 28.
-
CSS 선택자(Selector) 우선순위기억해야 할 기본 CSS 스타일을 적용하는 데는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 엘리먼트에 적용되는 스타일이 충돌할 수도 있습니다. 따라서 스타일 적용의 우선순위 규칙을 알아둘 필요가 있습니다. 선택자(Selector) 우선순위 1.속성값 뒤에! important를 붙인 속성 사용자 스타일시트 우선 !important 선언을 한 사용자 스타일 ! important 선언을 한 작성자 스타일 > 작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언) 2. HTML에서 style을 직접 지정한 속성 3. #id로 지정한 속성 4. .클래스, :추상클래스로 지정한 속성 5. 태그이름으로 지정한 속성 6. 상위 객체에 의해 상속된 속성 # 같은..Study/Html_Css 2019. 9. 5.
-
CSS의 길이단위 rem, em, px, pt, %, vw, vh, vmin, vmaxCSS에서 잘알려진 단위로는 px, pt, em 정도일 것입니다. 간혹 rem도 사용하고 있지만 이번에 소개할 단위는 다소 생소할수 있지만 많은 실무자들은 알고 있고 사용도 하고 있는 부분입니다. 저 같이 웹초보자들이 다소 실수 할 수도 있는 단위를 정리해 볼려고 합니다. 저 또한 이 글을 적으면서 많은 단위가 있다는 것을 알게 되었습니다. CSS길이 The Lengths of CSS # 절대 단위 (pt, px) UnitDescription cm센티미터 mm밀리미터 in인치 (1in = 96px = 2.54cm) px픽셀 (1px = 1/96th of 1in) pt포인트 (1pt = 1/72 of 1in) pc파이카 (1pc = 12 pt) 1in = 96px | 1cm = 37.8px | 1mm = ..Study/Html_Css 2019. 8. 21.