일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.

Study/Html_Css

This category have 19 Posts.

This search have 19 Posts.

This tag have 19 Posts.

Study/Html_Css

CSS - 한글 기본 시스템 글꼴 설정

CSS system fonts CSS system fonts cheatsheet 블로그에서 보이는 폰트 같은 것에 별다른 관심이 없다면 그냥 지나칠 것 중에 하나입니다. 그냥 돋음이나 굴림으로 통일하면 쉽게 되지만 조금만 신경을 쓴다면 결코 쉽게 넘어갈 수 있는 부분도 아닙니다. 그리고 인터넷 조금만 찾다 보면 기본 시스템 글꼴이 나옵니다. 하지만 개인적으로 한글의 글꼴의 기본이 없는 것 같아 몇 군데 찾아보고 평균을 잡아서 적어 볼까 합니다. English system font body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sa..

2020. 3. 6.
Study/Html_Css

HTML 자주 사용 특수문자 코드표 (Entity code)

Entity code 자주 사용하는 html 앤티티 코드를 정리하였습니다. 간혹 정말 필요한데 검색할려니 마땅히 무엇을 적어야 할지 몰라 당황했던적이 있습니다. 생각해보면 특수문자 또는 html code라고만 검색해도 되지만 그때눈 왜 이런것이 생각이 나질 안았나 모릅니다. 그래서 제 블로그에 정리를 해 볼까 해서 적어 봅니다. 공백 엔티티 문자 엔티티 숫자 &#160 & 엔티티 문자 & 엔티티 숫자 & " 엔티티 문자 " 엔티티 숫자 " “ 엔티티 문자 “ 엔티티 숫자  ” 엔티티 문자 ” 엔티티 숫자  ‘ 엔티티 문자 ‘ 엔티티 숫자  ’ 엔티티 문자 ’ 엔티티 숫자  · 엔티티 문자 · 엔티티 숫자 · ° 엔티티 문자 ° 엔티티 숫자 ° 엔티티 문자 > 엔..

2020. 3. 5.
Study/Html_Css

[HTML] 빠른 서명 카드 만들기

구글이나 네이버등 메일을 작성할 때나 다른 사용처에 파일을 보낼 때 사용하려는 카드로 웹페이지 방식으로 만들어 보았습니다. 간단한 것이라 무어라 민망하지만 만든 것 저장은 해야 해서 남깁니다. # 사랑, 우정, 믿음, 신뢰, 보답으로 된 다섯 물방울… : innks 姜仁規 블로그 : AneOK AneOK - 생활 블로그 # 사랑, 우정, 믿음, 신뢰, 보답으로 된 다섯 물방울… : innks 姜仁規 블로그 : AneOK AneOK - 생활 블로그 간단한 것이라 따로 설명은 하지 않겠습니다. 소스 궁금한 분만 보시길 바랍니다.

2020. 1. 20.
Study/Html_Css

기본적으로 사용하는 레이아웃 모음

에전에 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; ..

2019. 10. 28.
Study/Html_Css

CSS 선택자(Selector) 우선순위

기억해야 할 기본 CSS 스타일을 적용하는 데는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 엘리먼트에 적용되는 스타일이 충돌할 수도 있습니다. 따라서 스타일 적용의 우선순위 규칙을 알아둘 필요가 있습니다. 선택자(Selector) 우선순위 1.속성값 뒤에! important를 붙인 속성 사용자 스타일시트 우선 !important 선언을 한 사용자 스타일 ! important 선언을 한 작성자 스타일 > 작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언) 2. HTML에서 style을 직접 지정한 속성 3. #id로 지정한 속성 4. .클래스, :추상클래스로 지정한 속성 5. 태그이름으로 지정한 속성 6. 상위 객체에 의해 상속된 속성 # 같은..

2019. 9. 5.
Study/Html_Css

CSS의 길이단위 rem, em, px, pt, %, vw, vh, vmin, vmax

CSS에서 잘알려진 단위로는 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 = ..

2019. 8. 21.
Study/Html_Css

1

Blog history

Blog web + log = blog 소셜 네트워크 서비스의 일종, 개인이 운영하는 웹사이트를 말한다. 나무위키 - 블로그 Blog : HISTORY 이번에 만들기 시작하게 된 계기는 예전에 잠시 속세를 떠났던 적이 있습니다.(군대) 그때 나에 대하여 잠시 생각을 했는데 그때를 생각하며 만든 것이 있습니다. 'NeoKorean'라는 것입니다.(어렸죠 어렸어...) 그때는 철도 없었고 무작정 시작만 하면 다 될 줄 알았는데 막상 접해보니 되는 것이 없구나 싶어서 접었던 것입니다. 이제야 나이도 먹고 생각을 정리하면서 책장을 뒤졌는데 예전에 적은 노트를 발견하여 이렇게 새롭게 시작해 보려고 합니다. What's New in Version 2 Get started 이번 스킨(테마)는 NexT님의 테마를 티스..

2019. 5. 1.

Study/Html_Css

CSS - 한글 기본 시스템 글꼴 설정

HTML 자주 사용 특수문자 코드표 (Entity code)

[HTML] 빠른 서명 카드 만들기

기본적으로 사용하는 레이아웃 모음

CSS 선택자(Selector) 우선순위

CSS의 길이단위 rem, em, px, pt, %, vw, vh, vmin, vmax

Blog history

티스토리툴바