Front-end/Web57 CSS - 단위 1. px, % - %는 부모요소의 값으로부터 영향을 받는다. Container Parent Child1 Child2 body * { border: 2px solid; } .container{ width: 600px; } .parent{ width: 50%; } .child{ width: 50%; } 2. em,rem -1) em : 자기자신의 폰트사이즈에 영향을 받는다, 부모요소로부터 상속을 받는다. -2) rem : 최상위 요소의 font-size에 대한 em단위 Container Parent Child1 Child2 html { font-size: 10px; } body { font-size: 16px; /*child의 rem에는 영향X, 원래대로 돌리기*/ } body * { border: 2px.. 2021. 2. 2. CSS - 선택자, 상속 1. 기본 문법 - 기본형태 선택자 { 속성 : 속성값; 속성 : 속성값; } - 선택자의 역할 HTML의 원하는 요소에 CSS의 속성과 값이 적용 - 속성과 값의 역할 검색된 대상에 지정될 CSS 명령 - CSS의 주석 /* Comment */ 2. 선언방식 -1) 인라인(in-line)방식 : HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식 2021. 2. 2. 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. 이전 1 ··· 4 5 6 7 8 9 10 다음