quantumcode

css background 속성에 대하여 알아보자. html 문서에 이미지를 삽입하는 방법은 대표적으로 img tag를 사용하는 것과 style의 background 속성을 사용하는 방법이 있다. css3 style 속성 적용 방법은 개별 속성으로 적요하는 방법과 믹스형 속성 적용 방식있다. background의 속성은 background-color, background-image, background-repeat, background-attachment, background-clip, background-size, background-position 등이 있다. 개별 속성적용은 속성명을 그대로 기재하고 값을 입력하면 된다. background-size : 100% 믹스형 또는 다중속성 적용은 아래와 같..

문자열 속성 선택자 문자열 속성 선택자는 태그가 가지고 있는 속성의 특정한 문자열을 확인합니다. 1. 선택자 [ 속성 ~= 값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택합니다. div[class ~= box] { color: red; } 2. 선택자 [속성|=값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택합니다. ※ '-' 으로 단어 구분 : 클래스 box-1 일때 다중클래스라면 첫번째 클래스 단어의 '-' 앞 단어로 선택 box1 div[class|=box] { color: red; } 3. 선택자 [속성^=값] : 속성 안의 값이 특정 값으로 시작하는 단어로 포함하는 문서 객체를 선택합니다. div[class^=box] { color: red; } 4. 선..

static​( 정적위치 )​ : position을 지정하지 않으면 position의 default 값은 static 입니다. 배치형태 - ​​왼쪽에서 오른쪽으로 위에서 아래로 배치됩니다. relative​( 상대적 위치 )​ : 부모 요소 기준으로 위치를 조정 할 수 있다. 초기 위치 값의 영역이 다른요소에 영향을 준다. 배치형태 - ​top, bottom, left, right 속성을 사용하여 px,%,rem,em... 등 의 단위로 배치 할 수 있다. ( 음수 사용가능) absolute​( 절대적 위치 )​ : position이 static이 아닌 부모를 기준으로 위치를 조정 할 수 있다. 초기 위치 값의 영역이 다른요소에 영향을 주지 않는다. 배치형태 - ​top, bottom, left, rig..

CSS units CSS는 단위(길이)를 표현하기 위한 여러가지 단위가 있다. width, margin, padding, font-size, border-width 등과 같은 많은 CSS 속성에서 사용한다. 단위는 10px, 2em과 같이 숫자 뒤에 공백없이 붙여서 사용하며 0인 경우는 생략할 수 있다. 단위는 음의 수를 가질 수 있으며 상대/절대 단위로 구분할 수 있다. * w3schools의 ​CSS Units​에는 다음과 같이 CSS에서 사용하는 단위에 대해 안내되어 있다. Browser Support Oper a em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 ..

css기술 중요 규칙? 1. 스타일 기술은 ‘ { ’ 시작하여 ‘ } ’ 끝난다. 2. 다중속성 적용시 ‘ ; ’ 구분한다. 연속되는 속성이 더 이상 없을 경우 마지막 속성은 ‘;’를 삭제해도 된다. ex) td{ width​:​ 10px​;​ } 3.마크업 태그와 속성을 일치시켜 스타일 적용 ex) ​td​{ width: 10px; } 4.class 와 id들은 대소문자를 구분하며 문자로 시작해야 하며 영숫자와 언더바(_),하이픈(-)을 포함 할 수 있다. ex) ​.select{}(o) .select_1{}(o) .select-1{}(o) .selectBar(o) .1select{}(x) 4. 부모 자식 관계는 공백으로 구분하여 표기 한다. ex) css style sheet 표기 : .wrap .i..

1. css란? Cascading Html style sheets :​ 순서를 정하는 HTML 양식 문서 마크업 언어(html)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전형 다른 웹사이트처럼 꾸밀 수 있다. CSS등장 이전 마크업 형태 : tag에 직접 속성을 입력하여 스타일링하여 유지 보수가 어려웠다. html 문서 표기: 2. css 장점? 어려 형태의 style sheet를 만들어 쉽게 웹페이지의 스타일을 변경 할 수 있다. 스타일 문서를 HTML과 분리하여 문서 관리 및 수정이 편리하다. 3. css버전 변화? 1996년 CSS1을 시작으로 CSS2, 현재 W3C에서는 CSS3를 표..