Summer’s blog

CSS3에서 추가된 글자속성 ★@font-face 속성 이전에는 서체를 시스템 서체(운영체제에서 지원하는 서체, *.ttf/*.otf)외에는 웹 개발 환경에서 사용하지 못했다. 웹 개발 환경에서 가변 서체를 자유롭게 사용할 수 있도록 @font-face 속성을 지원한다. 웹 서체 파일(*.eot, *.woff)을 웹 서버에 저장하고 웹 문서에 포함해서 사용한다. 1. fonts.google.com(웹 서버)에서 지원하는 웹 서체를 사용 2. 웹 서체를 직접 변환 작업을 해서 사용 서체의 기본 확장자명이 *.ttf 서체 파일을 *.eot와 *.woff 서체 파일로 변환작업을 하여 웹 문서에 포함시킨다. 모든 브라우저에서 동일한 결과를 얻기위해 코딩하는 것을 "크로스 브라우징" 작업이다. ★text-tran..

결과

※ 스타일 시트 속성 1. 박스 속성 2. 글자 속성 3. 위치 속성 4. 배경 속성 ★박스속성: width, height, margin, padding, border ★CSS3에서 추가된 박스 속성: max-width, min-width, max-height, min-height, border-radius, box-shadow, box-sizing ★박스 유형 변경 속성: display:inline/inline-block/block/none/flex ★박스 모델(박스 레이아웃)에서 중요한 것은 박스의 width 속성이다. 박스의 너비는 박스의 width + 박스의 가로 padding 값 + 박스의 border 값이다. 박스의 너비 값에 박스의 padding 값과 박스의 border 값을 포함시킬려면 b..

반응 선택자 :active - 사용자가 요소에 클릭한 순간을 선택한다.(클릭한 상태가 지속되지 않는다.) :hover - 사용자가 요소에 마우스 포인터를 올린 상태를 선택한다. 결과

menu01 menu02 menu03 menu04 결과

1. + : 인접 형제 선택자는 요소의 바로 다음에 있는 형제 요소를 선택한다. 2. ~ : 형제 선택자는 모든 형제 요소를 선택한다. 메뉴 메뉴01 메뉴02 메뉴03 메뉴04 결과

입력 양식 태그를 사용하여 아이디와 비밀번호를 입력 받는 입력폼과 서버단으로 데이터를 전송하는 서브밋 버튼을 생성하세요. 상태 선택자는 입력양식의 상태를 선택할 때 사용한다. :focus는 입력폼에 마우스 커서를 위치시킨 input 요소를 선택한다. :checked는 입력폼을 체크한 input 요소를 선택한다. :enabled는 사용 가능한 입력 폼의 input 요소를 선택한다. :disabled는 사용 불가능한 입력 폼의 input 요소를 선택한다. 속성 선택자 [type="submit"]는 input 요소의 type 속성값이 submit인 요소를 선택한다. 공부 결과

HTML 문서의 태그는 트리(계층) 구조로 이루어져 있다. 즉, 부모, 형제, 자식, 후손 태그가 있다. 부모 태그의 후손 태그는 자식 태그와 손자 태그 모두 해당한다. 부모 태그의 자식 태그는 자식 태그만 해당된다. 후손 요소는 후손 선택자(스페이스 바)를 이용하여 선택한다. 자식 요소는 자식 선택자(>)를 이용하여 선택한다. menu01 sub-menu01 sub-menu02 sub-menu03 menu02 menu03 sub-menu01 sub-menu02 sub-menu03 menu04 menu05 결과

기본 선택자는 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자가 있다. 1. 전체 선택자(*): 문서의 모든 요소를 선택하는 선택자 2. 태그 선택자: 요소명으로 요소를 선택하는 선택자 3. 클래스 선택자: 클래스명으로 요소를 선택하는 선택자 4. 아이디 선택자: 아이디명으로 요소를 선택하는 선택자 BOX 사과 바나나 오렌지 결과

1. 스타일 시트의 역할: 스타일 시트는 HTML 요소를 선택하여 요소의 레이아웃(배치)와 스타일(Style)을 변경할 때 사용한다. 2. 스타일 시트의 적용: 스타일 시트 적용 방법에는 세가지가 있다. 2-1. 인라인 스타일시트 적용: 시작태그에 style 속성을 사용하여 스타일시트를 적용한다.(스타일시트 적용 우선순위가 가장 높다) 2-2. 내부 스타일시트 적용: Stylesheet 인라인 스타일시트 적용 내부 스타일시트 적용 외부 스타일시트 적용