분류 전체보기 (18) 썸네일형 리스트형 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는 웹을 스타일링할 때 쓰는것으로, 책의 디자인.. Html table 태그 알아보기 표를 쓸 때, 사용하는 table 태그를 알아봅시다. table 태그를 사용할 때는, 같이 쓰이는 여러 태그를 알아야 합니다. table: 테이블을 쓰겠다는 태그입니다. th: 셀(cell)의 헤더를 표시합니다. tr: 가로줄(row)을 표시합니다. td: 셀(cell)를 표시합니다. caption: 테이블의 문구를 표시합니다. colgroup: col 태그를 감싸는 태그입니다. col: 특정 열을 지칭합니다. thead: 헤더의 그룹을 정합니다. tbody: 테이블 바디를 정합니다. tfoot: 테이블 푸터를 정합니다. Monthly Sales Report Date Product Sales 2023-01-01 Product A 100 2023-01-15 Product B 150 Total 250 모든 .. Html iframe 태그 알아보기(Youtube) Youtube같은 웹사이트를 사용할 수 있는 iframe 태그를 알아봅시다. iframe 태그로 유튜브 동영상을 삽입할 수 있습니다. 1. 원하는 유튜브에서 공유하기 버튼 클릭 2. 맨 왼쪽의 퍼가기 버튼 클릭 3. iframe 코드 복사 4. Html 파일에 붙여넣기 유튜브나 지도 같은 외부 서비스를 iframe으로 내 웹사이트에 삽입하는 것을 임베딩(embedding)이라고 합니다. 서비스를 잘 찾아보면, 간혹 임베딩 할만한 서비스들이 있어요. Youtube Google Maps Twitter(X) MM(Mark up manager) - 제가 만들었습니다ㅎ 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guid.. Html video 태그 알아보기 웹사이트에 동영상을 표시하는 video 태그와 관련한 속성을 알아봅시다. video 태그는 source 태그와 한 세트라고 생각합시다. video 태그 사이로 source 태그를 넣고, src에 동영상 주소, type을 정해줍시다. 이는 브라우저가 .webm 형식의 동영상을 지원하지 않는다면, mp4 동영상으로 노출하게 하기 위해서입니다. Q. mp4만 올리면 되지 않나요? A. mp4만 올려도 되긴 됩니다만, 동영상의 확장자는 .avi, .ogg, .mkv, .webm 등 여러개가 있는데, 일반적으로 .webm이 화질도 좋으면서 용량이 적습니다. 동영상을 빨리 로드시키기 위해서는 용량이 적은게 좋구요. 요즘에는 .webm을 거의 호환하지만, 동영상이 재생되지 않을 경우를 대비하는 코드라 생각하면 됩니다.. 이전 1 2 3 다음
