분류 전체보기 (23) 썸네일형 리스트형 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을 거의 호환하지만, 동영상이 재생되지 않을 경우를 대비하는 코드라 생각하면 됩니다.. Html img 태그 알아보기 웹사이트에 이미지를 표시하는 img 태그와 관련한 속성을 알아봅시다. 이미지 태그에 src 속성에 이미지의 주소를 입력합니다. alt 속성에는 이미지의 대체 텍스트를 입력해주세요. 이미지가 로드되지 못했을때나 스크린리더(음성 출력 장치)등에 사용됩니다. 그리고 구글이나 네이버같은 검색엔진 등에서, 대체 텍스트를 사용해야 검색결과 노출 확률이 높아져요. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea 관련글: 주요 Html 태그 알아보기 Html div 태그 알아보기 주로 CSS 스타일링이나 JavaScript와 함께 사용되어 특정 그룹의 요소를 스타일링하거나 동적으로 조작할 수 있도록 하는 데에 활용됩니다. 일단 빈 박스라고 생각을 합시다. 블로그로 이동하기 링크 를 새창으로 이동해보세요. 미리 레이아웃에 대해 이야기를 하자면, div와 같은 박스를 만들고 Css를 통해 배치를 하는것이라 생각하면 됩니다. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lotto=lottoKoea 관련글: 주요 Html 태그 알아보기 Html a 태그 알아보기 anchor라고도 부릅니다. 속성에 주소를 집어넣어서 해당하는 주소로 이동할 수 있는 링크를 만들 때 사용합니다. span 태그와 마찬가지로, 원하는 부분에만 사용할 수 있습니다. 아래 주요 속성과 같이 사용합시다. href: 주소를 입력합니다. target: 페이지를 이동을 할 때, 새창으로 이동할건지 본창으로 이동할건지 판단합니다. 블로그로 이동하기 해당 링크를 새창으로 이동해보세요. 해당 링크를 본창으로 이동해보세요. 웹사이트를 편리하게 만들 수 있는 웹프로그램을 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/mm-guide/ 로또 번호 생성기도 만들었습니다. 한번 구경해보세요. https://zabefofoon.github.io/simple-lotto/?lo.. 이전 1 2 3 다음
