css3 6

CSS3 border 속성

border border-width​ : border의 width 값을 지정 border-style​ : border의 style 값을 지정 border-color​ : border의 color 값을 지정 inherit​ : 부모 요소로부터 값을 상속 받는다. border-top, border-right, border-bottom, border-left border-width​ : border의 width 값을 지정 border-style​ : border의 style 값을 지정 border-color​ : border의 color 값을 지정 inherit​ : 부모 요소로부터 값을 상속 받는다. border-top, border-right, border-bottom, border-left css 컬러 ..

웹코딩/css3 2022.01.18

CSS 문자열 속성 선택자

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

웹코딩/css3 2022.01.18

display 속성의 이해, inline, block, inline-block 차이점

Inline :왼쪽부터 하나씩 정렬속성 - ​​width, height 속성을 사용 할 수 없다. 주의 - ​왼쪽 정렬 시 초기 margin-left, margin-right 5px만큼 생성된다.삭제 방법 :1. 부모요소에 font-size: 0; 속성을 적용한다.2. 해당 요소에 float: left; 속성을 적용한다. 단, float 속성 적용 시 부모 요소에서 자식 요소의 높이 값을 가져올 수 없기 때문에 요소 다음에 오는 요소에 clear: both;를 적용하여 부모 요소가 높이값을 가져갈 수 있게 한다.3. margin-left: -5px; 을 적용한다.block : 한줄씩 정렬블럭처럼 한줄씩 쌓여서 정렬됨.속성 - ​​width, height, margin-top,margin-bottom 속성..

카테고리 없음 2022.01.13

position 의 종류와 개별 특성

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

웹코딩/css3 2022.01.13

CSS3 중요 규칙

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..

웹코딩/css3 2022.01.12

CSS (cascading HTML style sheets)

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를 표..

웹코딩/css3 2022.01.06