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

Coding/HTML & CSS

• 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

• 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

• HTML5 & 와 시맨틱 태그

  Coding/HTML & CSS 2020. 4. 16. 23:19

  시멘틱태그의 기본적인 구성 우리는 눈으로 빠르게 구분이 가능하지만 컴퓨터는 그렇지가 않습니다. 따라서 기계적인 검색 엔진은 어떠한 태그가 어떠한 기능을 하는지 분별할 수 없고 웹페이지에서 데이터를 효율적으로 추출할 수가 없습니다. 이를 해결하고자 만든것이 시멘특태그입니다. 특정한 태그에 의미를 부여해서 웹페이지를 만드는 시도가 시작되었구요. 이를 시멘틱웹이라고 표현한답니다. 태그 이름 설명 header 헤더를 의미 nav 내비게이션을 의미 aside 사이드에 위치하는 공간을 의미 section 여러 중심 내용을 감싸는 공간을 의미 article 글자가 많이 들어가는 부분을 의미 footer 푸터를 의미 실습 1 . 각 시멘틱 테그 의미 , 위치 연습 https://github.com/sotoddlf414..

  Read More