Front-end (97) 썸네일형 리스트형 01.Typescript : fundamentals em rem 정리 부모요소에 사이즈에 따라야한다면 % em 브라우저에 상이즈에 따라야 한다면 v* rem 요소의 너비와 높에 따라 사이즈가 변경되야 한다면 % v* 폰트 사이즈에 따라 변경되야 한다면 em rem rem을 쓸땐 부모컨테이너와 상관없이 페이지에 어떤박스안에서 사용해도 크기가 일정하게 고정 (font는 rem을 선호) em은 브라우저 위에서 쓸때랑 부모컨테이너 안에 쓸때라 크기가 달라진다 (부모요소에 따라 크기 변환) Em 변화값 사이트 http://pxtoem.com/ 폰트는 브라우저 안에 모두 같은 크기 유지 하기위해 rem Padding은 박스별로 크기가 달라지기위해 em Media에서도 max-width를 rem으로 바꿔주면 더 가독성좋은 반응형이 된다 Responsive CSS Units (%, EM, REM) Units 대부분 px를 이용한다 (모니터에 나타낼 수 있는 가장 작은 단위) Px로 하면 글씨크기 조절이 안되지만 %로 하면 가능 Em 부모의 font사이즈에서 곱한값으로 계산된다 Rem (r = root) Root에 지정된 font사이즈에 따라서 크기가 결정 Vw (view Width ) Vh (view height ) % vw부모요소와 상관없이 크기조절 DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (4) Vscode Plugin : HTML to css auto 정말 유용한것, html에 class를 css파일에서 알파벳하나만 쳐도 자동 완성 Emmet: https://emmet.io/ 반응형 웹디자인 (중요) @media를 이용해서 반응형웹을 만든다 보통 min-width로 만들 수 있다. Mozilla 반응형웹 예제 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design Header만들기 Flex박스를 사용하여 만든다는걸 바로 알아차려야 한다. 아이콘 https://fontawesome.com/ VScode 한 줄(Line) 주석 토글하기 Ctrl+ / Responsive NavBar 기본 NavBar의 화면은 다음과 같이 표시된다 화면이 줄어들면 메뉴바는 사라지고 작은메뉴(햄버거)가 생긴다. 작은메뉴(햄버거)를 클릭하면 아래로 메뉴가 추가된다. 이때는 js를 이용하였다. hover기능도 표시되도록 추가하였다. 메뉴바를 만들면서 최대한 기능을 익숙하게 사용하기위해 주석을 달았다. 앞으로 새로운 Responsive NavBar를 사용할때 참고하면 좋을것 같다. GitHub 코드 : https://github.com/bellcastle88/nav_bar DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (3) Material Design Color Tool 컬러 지정해줄 주는 사이트 https://material.io/resources/color/#!/?view.left=0&view.right=0 Flexbox (css의 꽃) 박스안에서 자유롭게 배치할 수 있는것 Container에 지정되는 속성값 Item에 지정되는 속성값 Flex-grow : 윈도우 창에 맞춰서 커지고 줄어든다 Flex-shrink : 창에 따라 줄어들지 Align-self : 원하는 박스만 따로 배치하고싶을떄 Float CSS Tricks for Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Flexboxfroggy // flexbox연습사이트 https://flexb.. DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (2) 웹사이트 만들때 가장 중요한것 Box를 원하는 위치,사이즈로 배치하는것 display, position에 대해서 알아야 한다 Span은 내용이 있어야 표시된다 Div는 block 레벨이라서 한줄에 하나씩 나옴 Span은 한줄에 여러게 나옴 Inline = 물건 Inline black = 상자인데 한줄에 여러개가 진열될 수 있는 특별한 상자 Black = 한줄당 하나씩 들어가는 상자 Position Position = 기본값으로 static을 가진다 relative = 원래 있어야 하는 자리에서 옴겨간다. absolute = item이 담겨있는 상자안에서 위치한다 ( class="container" ) Fixed = 전체윈도우 화면에서 위치한다 Sticky = 스크롤이 움직여도 원래자리에서 유지된다 브라우.. Introduction to the DOM Introduction to the DOM The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. In this guide, we'll briefly introduce the DOM. We'll look at how the DOM represents an HTML or XML document in memory and how you use APIs to create web content and applications. What is the DOM? The Document Object Model (DOM) is a .. 이전 1 ··· 9 10 11 12 13 다음
