margin영역 : 박스모델에서 가장 외곽에 있음, html요소의 외부 여백 담당 margin: 20px; → 상하좌우 다 적용 margin: 10px 20px; → 상하 10px, 좌우 20px margin영역 세분화 지정 가능 (상하좌우 특정 방향에만 값 적용 가능) (margin-left, margin-right, margin-top, margin-bottom) ※ margin 겹침 현상 주의 →겹쳤을 때 더 큰 쪽의 값으로 적용됨 (합산이 아님) ※ inline 요소에서는 margin영역에 top, bottom 지정 불가 border영역 : 테두리 영역 border: 굵기 굵기종류 굵기색깔 ex. border: 1px solid red; (→ 단축 속성 (축약 속성) 방식) border-width..
적용 우선순위와 개별성 개별성 : 선택자 지정 방법에 따른 점수표 선택자 예 점수 전체 선택자 * 0 태그 선택자 div, p, h1 1 클래스 선택자 .box, .title 10 가상 요소 선택자 ::before, ::after 1 가상 클래스 선택자 :hover, :visited, :link 10 아이디 선택자 #title, #main 100 인라인 스타일 style="color:red;" 1000 점수가 같을 때에는 나중에 작성된 CSS 코드가 적용됨 상속에 의해 부모 요소가 가지고 있는 CSS 속성을 자식이 물려받음
* { color:red; } → 전체 선택자 h1 { color:red; } → 태그 선택자 (h1, dt 등) #h1 { color:red; } h1 tag → id선택자 (단, id 속성은 unique해야 함) .red { color:red; } h1 tag → 클래스 선택자 (클래스 속성은 중복 가능) .red {color:red;} .blue{color:blue;} h1 tag과 같이 사용 가능 [class] { color:red; } → 속성 선택자, [class='red']도 가능 이외에도 다양한 문자열 속성 선택자가 있음 h1, p { color:blue;} → 그룹 선택자 div > h1 { color: red;} → 자식 선택자 (특정 자식에 해당하는 내용만 지정, div태그 자식에 있..
태그의 종류에 상관없이 모두 사용할 수 있는 속성 class, id, style 속성 → css와 연관 abcd class 속성 : 한 페이지에 여러 개의 값이 와도 됨 id 속성 : 여러개 x (unique) style 속성 : css코드를 적기 위해 제공 title 속성 : html요소에 추가적인 정보를 툴팁 형태로 제공 hidden 속성 : 값을 숨겨줌 (="hidden" 생략가능) lang 속성 : 언어속성 표현 data 속성 : data-aa, data-b 등 사용자가 임의로 원하는 속성을 만들어서 사용 가능
오디오 태그 사용 비디오 태그 사용 브라우저 마다 지원되는 형식이 다름 → source태그로 해결 지원하지 않는 브라우저입니다. Semantics 태그 (검색 엔진 노출 최적화) - : 웹사이트의 헤드 영역 (사이트의 로고, 로그인, FAQ등) - : 웹페이지의 내부영역과 외부영역 연결하는 링크영역을 구분하는데 사용 - : 웹페이지에서 논리적으로 관련된 내용과 영역을 나타낼 때 사용 → h(n)태그 중 하나가 반드시 사용되어야 함 (권고) - : 웹페이지 내에서 독립적으로 나타낼 수 있는 콘텐츠 - : 웹페이지 사이드에 있는 내용들 (로그인, 광고배너 등) - : 사이트의 마지막부분, copyright등 - : head와 footer 사이의 주요 컨텐츠 - - 이미지 구역화 - - 이미지 설명
태그 사용 태그를 통해 표제목 표현 (필수) 로 행 생성 tr로 생성한 행 내부에 로 열들 생성 th vs td th태그는 표에서 제목성격을 나타내는 셀을 표현 td태그는 일반적인 셀 1000원를 통해 여러개의 행을 병합할 수 있음 2500원를 통해 여러개의 열을 병합할 수 있음 구조화 (필수는 아님, 표에 따라 tfoot은 없어도 됨) 표에서 제목을 나타내는 영역을 그룹화 순수한 데이터 부분 그룹화 꼬릿말부분 그룹화 ※주의 tbody태그 전에 tfoot태그 사용하기 (스크린 리더기 등의 웹 접근성 향상 관련 때문에) + caption태그 다음에 사용가능 연관있는 데이터 셀 범위 지정 → scope사용 ex. 구분 전공 교양 구분 1학년 (2개이상의 col이나 row 범위 지정 가능)
태그 type=""만 입력하고 ""사이부분에 커서를 놓고 컨트롤 + 스페이스바를 누르면 사용가능한 type들이 나옴 태그 입력요소에 어떤 것을 입력하면 되는지 텍스트로 표현할 때 의미있게 코드를 작성하기 위한 태그 for 속성을 사용하여 아이디: 형태로 사용하면 label의 글자만 클릭해도 입력요소가 활성화 명시적인 방법과 암묵적인 방법으로 구분 위와 같은 방식이 명시적인 방법임 암묵적인 방법 → label테이블을 form테이블의 자식으로 사용 ex. 아이디: (for속성, id속성 필요X) 암묵적+명시적 방법 혼합사용 하기도 함. 태그 - 상호작용 요소를 그룹화 하는데에 사용 태그 - 그룹화한 필드셋에 이름을 지정하는 태그 태그 - 여러 줄을 입력할 수 있는 입력요소 태그 - 선택지중 선택하도록 선택상..
