Coding/Css (5) 썸네일형 리스트형 Css 단위 알아보기(px, %, vw, vh, etc) 현실에서 우리는 사물의 크기를 잴 때, mm(밀리미터)나 cm(센치미터)의 단위를 사용하곤합니다. Css에서 또한 마찬가지로, element(요소)의 크기를 정할 때, 사용되는 여러 단위가 있습니다. 오늘은 Css에서 사용되는 단위를 알아봅시다. 1. px(픽셀) 가장 기본이 되는 단위입니다. 현실에서의 mm(밀리미터), cm(센치미터)라고 생각합시다. 18px 크기의 텍스트 14px 크기의 텍스트 .size-18px { font-size: 18px; } .size-14px { font-size: 14px; } 2. %(퍼센트) 크기를 퍼센트로 줍니다. 주로 width/height를 정할 때 씁니다. parent Child .parent { width: 300px; background: red; } .c.. 주요 Css 속성(Property) 알아보기 어느 언어든지, 사실 생각해보면 사용하는 단어만 사용합니다. CSS도 마찬가지로, 자주 사용하는 속성만 사용하게 될거에요. 이번에는 자주 사용하는 속성을 알아봅시다. 크기: 가로, 세로, 비율 배경: 색상, 이미지 서체(폰트)와 텍스트: 정렬, 폰트 여백: margin(바깥여백), padding(안쪽여백) 레이아웃: positon(위치), display(렌더링 방식) 이 다섯개만 잘써도, 어디가서 전문가라 할수있을거에요. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lot.. Css Selector(선택자)알아보기 with id(이름), class(별명) Css로 웹을 스타일링을 하기 위해서는, 어떠한 요소를 스타일링 할건지 지칭해야합니다. 그 어떠한 요소를 선택하는 방법을 알아봅시다. 0. 먼저 태그에 이름(id)과 별명(class)을 지어봅시다. id: 한 .html 파일에 하나만 지정할 수 있음(like 이름) class: 여러태그에 여러개를 지을 수 있음(link 별명) 예를 들어, 저는 "사람"입니다. 그리고, 저의 이름은 "금복례" 입니다.하지만, 저의 친구들은 저를 "금붕어"라고 별명 지었습니다. 이를 Html/Css에서 같은 관점으로 보자면, Html에 "p태그"가 여러개 있습니다. 첫번째 p태그의 id는 "unique-name"입니다. 세번째 p태그의 class는 "third-paragraph"입니다. "unique-name" 이라는 이름.. Css 파일 만들기(with Visual Studio Code) 웹코딩은 기본 메모장으로도 할 수 있지만, 요새 가장 많이 쓰는 Vscode로 .css 파일을 만들어 봅시다. 1. Vscode 다운로드 사이트로 이동해서 다운받습니다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and.. Css 란? 웹사이트를 만들기 위해서는 Html, Css, Javascript가 필수입니다. 그 중에서, 웹의 스타일링을 할 수 있게하는 Css를 알아봅시다. 1. CSS: Cascading Style Sheets 앞글자만 따온 약어입니다. 마크업 언어이며, 프로그래밍 언어라고 안합니다. 2. style.css .css 확장자명을 가진 파일입니다. .css 파일 혼자서는 아무것도 할 수 없지만, .html에 링크를 걸어줄 때 그 가치를 발휘합니다. 3. 문서(Document)입니다. 책을 쓴다고 생각하면, 크게 생각할건 아래 2가지 같습니다 . 내용(Html) 디자인(Css) Html은 웹의 내용을 작성할 때 쓰는것으로, 원고지에 책의 내용을 쓰는것이라 생각하고, Css는 웹을 스타일링할 때 쓰는것으로, 책의 디자인.. 이전 1 다음
