Web (29) 썸네일형 리스트형 #6. BackGround 1. background-image 프로퍼티 body{ background-image: url("https://post-phinf.pstatic.net/MjAxNzExMThfMTU3/MDAxNTEwOTg1MjU0MDMw.UnE6KDZeDvuggh3tCZyAh1TnZdmvZQGLVZbT2nhBIAYg.9QvOIhmCZnSwa0BXJ8CVs3ROxovGtlVmRmglS2HE8esg.JPEG/20171118-006.jpg?type=w1200"); } 2. background-repeat 프로퍼티 배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다. 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. 이것은 background-r.. #5. display, visibility, opacity 프로퍼티 1. display프로퍼티 display프로퍼티는 layout정의에 자주 사용되는 중요한 프로퍼티이다. block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다 아래는 p 요소에 대한 크롬 브라우저의 디폴트 CSS이다. p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } 1.1 block.. #4. CSS BOX 모든 HTML요소에는 Box형태의 영역을 가지고 있다. 이 Box는 콘텐트(Content), 패딩(Padding), 보더(Border), 마진(Margin)으로 구성된다. Content 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역 Padding 테두리(Border)안쪽에 위치하는 요소의 내부 여백 영역 padding의 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명이다. Border 테두리 영역으로 border의 프로퍼티 값은 테두리의 두께를 의미한다. Margin 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다. margin의 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명하며 배경색을 지정할 수 없다. 1. width / height 프로퍼티 width.. #3. CSS 프로퍼티 값의 단위 CSS에는 cm, mm, inch등의 단위들이 존재하기도 하지만 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px는 절대값이고 em, %는 상대값이다. 대부분의 브라우저의 폰트 기본값은 16px, 1em, 100%이다. 1.1 px px는 픽셀(화소) 단위이다. 1px는 화소 1개의 크기를 의미한다. 예를들어 보통 요즘 영상들은 1920 * 1080의 해상도를 따라가는데 이는 가로에 1920픽셀, 세로에 1080픽셀을 가진다는 의미이다. 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px를 1/96인치의 절대단위로 인식한다. px는 요소의 크기나 이미지 크기 지정에 주로 사용된다. 1.2 % %는 백분률 .. #2. CSS의 다양한 셀렉터 1. 전체 셀렉터 (*) *은 HTML문서 내의 모든 요소를 선택한다. * { color: blue; } 2. 태그 셀렉터 지정된 태그명을 가지는 요소를 선택한다. h1 { color: blue; } p { color: red; } 3. ID 셀렉터 해당 id어트리뷰트값을 가지는 요소를 선택한다. "#어트리뷰트값" 형식으로 작성한다. CSS #header { color: blue; } #text { color: red; } HTML Hello Css! This is paragraph Hello Css! 2 4. Class 셀렉터 해당 class를 가지는 어트리뷰트값을 가지는 요소를 선택한다. ".어트리뷰트값" 형식으로 작성한다. CSS .header { color: red; } .text { color:.. #1. CSS 기본문법 CSS는 HTML이나 XML과 같은 구조화 된 문서를 화면에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소의 style을 정의하여 화면등에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어이다. css는 html문서 내에 바로 style태그를 사용하여 기술할 수도 있지만, css파일을 따로 만들어 지정해주는게 좀 더 깔끔하고 정리된 코드를 만드는데 도움이 된다. Hello Css! css파일을 html에 연동하는 방법은 link태그를 이용하면된다. 가장 일반적으로 사용된다. CSS의 기본 구조에 대해서 알아보자. h1 { color: blue; font-size: 20px; } 위의 코드에서 h1은 셀렉터, 셀렉터의 선언블록 안에 묶인 선언들은 프로퍼티와 값.. #7. Form & Tags 1. Form form태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea등 여러 입력 양식 태그를 포함할 수 있다. form태그의 어트리뷰트로는 다음과 같다. action URL 입력 데이터가 전송 될 URL지정 method get / post 입력 데이터 전달 방식 지정 get과 post는 HTTP프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타낸다. GET GET방식은 전송 URL에 입력데이터를 쿼리스트링으로 보내는 방식이다. 전송 URL바로 뒤에 "?" 를 통해 데이터의 시작을 알려주고 key-value형태의 데이터를 추가한다. 1개 이상의 전송데이터는 "&"로 구분한다. URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수.. #6. 이미지 & 멀티미디어 1. 이미지 웹페이지에 이미지를 넣는 경우 img태그를 사용한다. HTML 삽입 미리보기할 수 없는 소스 src 이미지 파일 경로 및 주소 alt 이미지가 없을 경우 나오는 문구 width 이미지의 너비 height 이미지의 높이 2. 오디오 src 음악 파일 경로 preload 재생 전 음악파일 불러오기 autoplay 음악파일 자동재생 loop 음악파일 반복재생 controls 음악파일 재생 도구 표시 웹브라우저별로 지원하는 음악파일의 형식이 다르다. MP3 WAV OGG Chrome O O O FireFox O O O Safari O O X Opera O O O 파일 형식의 차이 문제는 source태그를 통하여 해결 할 수 있다. 3. 비디오 src 동영상 파일 경로 poster 동영상 준비 중에 .. 이전 1 2 3 4 다음
