Kim-JS의 일상이야기 Kim-JS의 일상이야기

분류 전체보기

• Typography

  Coding/HTML & CSS 2020. 4. 19. 20:55

  텍스트를 디자인하는것 폰트사이즈 em : 실제로 적용된 폰트이즈가 1em 이된다 부모 폰트 사이즈 크기가 24px 이면 자식 요소의 1em 은 24px 이된다 . rem : html 에 적용된 폰트 사이즈가 1rem 이 된다 . line-height ( 수직, 중간 정렬 ) px, em , rem 사용 가능 줄간격 에는 em 많이 쓰인다. letter-spacing : 글자 간격 ( em 많이씀 ) font-family : 글서체 ( body 에다 적용시 모든 요소들에 해당폰트 적용 ) 1) Poppins 적용 2) Poppins 적용 없으면 sans-serif 적용 3) Poppins 적용 없으면 Roboto 적용, 없으면 sans-serif 적용 font-weight : ( 400 : 보통 ) ( 7..

  Read More

• 실습:Background

  Coding/HTML & CSS 2020. 4. 18. 17:52

  background-color background-image background-repeat / no-repeat background-size : contain , cover background-position : center center;

  Read More

• 실습 : Flexbox & @Media

  카테고리 없음 2020. 4. 18. 15:13

  #content{ background-color: bisque; display: flex; flex 방식으로 사용 선언 flex-direction: row; row 방향으로 정렬선언 flex-wrap: wrap; 줄 벋어날시 다음줄에서 정렬 justify-content: space-around; 양쪽 정렬 width : 97%; margin : auto; } ---------------------------------------------------------------------------------------------------------------------------------- #content{ background-color: bisque; display: flex; flex-direction..

  Read More

• Media query for Reponsive web

  Coding/HTML & CSS 2020. 4. 18. 14:54

  미디어 쿼리 사용 위해 HTML 과 CSS 에 다음 설정 이 필요함 html 에서 meta 테그에 Viewport 설정 css 에서 media query 선언

  Read More

• FlexBox 실습

  Coding/HTML & CSS 2020. 4. 18. 10:18

  row 정렬할 부모 요소 , section 에 display : flex 적용 , 방향 . flex-direction : row, 한줄안에 정렬 , flex-wrap : nowrap, justify-content : space-around; 로 가운대 정렬 justify-content 의 속성값은 center, flex-start , flex-end, space-between , space-around 가 있음, 잘기억 할것.

  Read More

• FLEX BOX

  Coding/HTML & CSS 2020. 4. 17. 23:25

  FLEX BOX 사용전 확인해야할 사항 1.플랙스박스 선언 2. 가로 OR 세로정렬 flex-direction : row 일시 2개의 축 (row-reverse 일시 main axis 가

  Read More

• 폴리필(polyfill) 이란 ?

  Coding/HTML & CSS 2020. 4. 17. 19:32

  폴리필이란? 폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당한다. HTML5 Cross Browser Polyfills Modernizr 측에서 정리하여 제공하고 있는 각종 폴리필 목록을 참고하면 원하는 기술을 선택하는데 도움이 될 것이다. 필자가 자주쓰는 것들을 아래와 같다. html5shiv : HTML5의 섹셔닝 요소(예: , )를 지원하지 않는 브라우저를 위한 라이브러리 mediaelement.js : HTML5의 와 요소들을 모든 브라우저에서 하나의 파일로 같은 UI를 제공하기 위한 라이브러리 Placeholder : HTML5의 플..

  Read More

• IE8 이하 버전에서의 시맨틱 태그

  Coding/HTML & CSS 2020. 4. 17. 19:06

  Internet explorore 8 이하에서는 시멘틱 태그 지원이 안될수도 있다 . http://caniuse.com에서 확인하여 보자 IE8 을 이용하는 이용자를 위해 가장 일반적인 방법으로 html5shiv 를 이용하는 방법이 있고, css 블록 을 직접 지정하는 방식이 있지만 잘쓰이지 않는다고 한다.. (버거로움 과 오타시 문제됨);; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HTML5 Shiv 아래링크 접속 https://github.com/afarkas/html5shiv aFarkas/html5shiv This script is the defacto way to enable use of HTML5 s..

  Read More