본문 바로가기

전체 글291

CSS - 실습환경 1. CSS Reset www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. www.jsdelivr.com 위의 사이트에서 reset.css 를 HTML copy하여 css 파일 위에 붙여넣기 한다. 각 브라우저들의 기본 CSS들이 다 초기화된다. 2. Codepen code.. 2021. 2. 2.
HTML - 전역 속성, 기타 전역 속성(Global Attributes) 1. class와 id -1) class 공백으로 구분된 요소의 별칭을 지정. CSS 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근. -2) id 문서에서 고유한 식별자(idenifier, ID)를 정의. CSS 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근. 2. style 요소에 적용할 CSS를 선언. 3. title 요소의 정보(설명)을 지정. 마우스를 얹었을 때 설명이 나타남 4. lang 요소의 언어를 지정. This paragraph is English 이 단락은 한글입니다. Ce paragraphe est défini en français. 5. data 사용자 정의 데이터 속성을 지정. HTML에.. 2021. 2. 2.
HTML - 표 콘텐츠 & 양식 표 콘텐츠 1. tabel 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. table { display: table; } tr { display: table-row; } th, td { display: table-cell; } 2. th ‘머리글 칸’을 지정, header 속성 의미 값 기본값 abbr 열에 대한 간단한 설명 headers 관련된 하나 이상의 다른 머리글 칸 id 속성 값 colspan 확장하려는(병합) 열의 수 1 rowspan 확장하려는(병합) 행의 수 1 scope 자신이 누구의 ‘머리글 칸’인지 명시 col: 자신의 열 colgroup: 모든 열 row: 자신의 행 rowgroup: 모든 행 auto auto 데이터 타입 값 알파벳 A 숫자 7 3. td.. 2021. 2. 2.
HTML - 멀티미디어 & 내장 콘텐츠 & 스크립트 멀티미디어 1. img 이미지를 삽입 반응형 웹에서 이미지를 지원하기 위해, ‘미디어쿼리’라고 부르는 CSS Media Rule(@media)에서 background-image 속성을 많이 사용하는데, 반응형 이미지를 처리하기 위해 뷰포트(Viewport)의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야한다. HTML IMG의 srcset과 sizes를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저(User agent)에 떠넘길 수 있다. 속성 의미 값 src (필수)이미지 URL URL alt (필수)이미지의 대체텍스트 width 이미지의 가로 너비 height 이미지의 세로 너비 srcset 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의 w.. 2021. 2. 2.
HTML - 인라인 텍스트 & 수정 인라인 텍스트 1. a 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정. 속성 의미 값 기본값 특징 download 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 불린(Boolean) href 링크 URL URL 생략 가능 rel 현재 문서와 링크 URL의 관계(Link Types) license, prev, next… target 링크 URL의 표시(브라우저 탭) 위치 _self, _blank(새로운탭) _self type 링크 URL의 MIME 타입 text/html… a { display: inline; } id는 고유한 이름 2. abbr 약어를 지정. (보통 title 속성을 사용하여 전체 글자나 설명을.. 2021. 2. 2.
HTML - 콘텐츠 구분 & 문자 콘텐츠 BODY 내 구조 개념 1. HEADER 메뉴1 메뉴2 메뉴3 Section Article1 Contents... Article2 Contents... Article3 Contents... Aside ahju0011@gmail.com 010-1234-5678 header { background-color: tomato; margin: 10px; padding :20px; } header nav{ } header nav ul{ display : flex; } header nav ul li{ list-style:none; margin: 10px; } main{ display:flex; } section{ width:70%; background-color: tomato; margin:10px; padding:.. 2021. 2. 2.

티스토리툴바