* { 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) 암묵적+명시적 방법 혼합사용 하기도 함. 태그 - 상호작용 요소를 그룹화 하는데에 사용 태그 - 그룹화한 필드셋에 이름을 지정하는 태그 태그 - 여러 줄을 입력할 수 있는 입력요소 태그 - 선택지중 선택하도록 선택상..
font-family : [글꼴], [글꼴유형]; 글꼴유형(generic-family) 종류 : serif, sans-serif, cursive, fantasy, monospace ex. font-family: dotum, "바탕", "Times New Roman", serif; 여러 글꼴이 주어진 경우 앞에서부터 적용 시도 글꼴 이름에 공백이 있을 때, 한글일 때 " "로 묶어줘야 함 글꼴 유형 설명 serif 삐침이 있는 명조 계열의 글꼴 sans-serif 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴 monospace 텍스트 폭과 간격이 일정한 글꼴 fantasy 화려한 글꼴 cursive 손으로 쓴 것 같은 필기체 계열의 글꼴 font-weight : 텍스트 굵기 단위, 100 ~ 900 (100..
font-size (폰트 크기 변경) 텍스트, 글자 ex. h1{font-size:16px;} css 크기 단위 : px, rem, em, vw, vh - px : 웹페이지에서 가장 기본이되는 크기 단위 (해상도와 관련) 해상도에서 1개의 점이 1px임. - rem : html 태그의 폰트 크기를 기준으로 배수에 해당하는 크기를 가지게 하기 위해서 사용하는 단위 웹브라우저들의 기본 폰트 크기는 대부분 16px임. ex. font-size: 2rem; + html{ font-size:20px; 를 통해 html의 폰트사이즈 변경 가능 } - em : 부모 태그의 폰트 크기의 배수로 설정 html의 부모 자식 형제 내부의 태그 동시사용 → h1, p 태그는 서로 형제관계 → h1, p태그의 부모는 태그 → ..