개발 뜯기/HTML, CSS

6. HTML의 속성 1) 전역 속성 전역 속성은 문서 전체에 사용 가능하다. ✔ id, class : 식별자 id : 고유식별자 id 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의한다. 프래그먼트 식별자를 사용해 요소를 가리킬 때 사용 특정 요소를 식별하기 위해 사용함 특성 값에 공백이 들어가면 안됨 숫자, 특수문자로 시작하면 안됨(-, _, / 제외) class class 전역 특성은 공백으로 구분한 요소 클래스의 목록이다. CSS나 JavaScript에서 메서드를 통해 요소에 접근할 수 있음 여러 요소에 동일한 class를 적용할 수 있음 하나의 요소가 여러 개의 class 사용 가능. (공백으로 둘 수 있음) CSS보다 우선순위가 높음 ✔ style style 전역 특성은 요소에 적용..

5. HTML의 요소(5) 7) 폼 관련 요소 ✔ 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. 일방적으로 사용자에게 정보를 전달하는게 아닌 정보를 다시 돌려받기도 함 form 요소에 한계가 있기 때문에 더 섬세한 컨트롤은 JS로 함 ✔ - action, method 속성 action: 지정한 경로로 form 정보를 보내줌 method: 양식을 제출할 때 사용할 HTTP 메서드 post: 양식 데이터를 요청 본문으로 전송함. 서버에 보이지않게 전송 get: 양식 데이터를 action URL과 ? 구분자 뒤에 이어붙여 전송함. 보안 취약 dialog: 양식이 안에 위치한 경우, 제출과 함께 대화 상자를 닫음 button, input type="submit", input typ..

4. HTML의 요소(4) 5) 목록과 표 ✔ 목록 - , , unordered list, 순서가 없는 목록 숫자 없이 점 등으로 나타냄 ordered list, 순서가 있는 목록 단계적으로 나타냄 type 속성을 사용함 a, b, c A, B, C 로마자(대, 소문자) ... start : 항목을 셀 때 시작할 수 reversed : 내부에 지정한 항목이 역순으로 배열된 것인지 나타냄 list item, 단일 아이템을 표현하는 태그 중첩 가능 ol 태그 내에서 list에 value 값을 사용하면 해당 행부터 적용됨 ✔ 목록 - , , 은 로 표기한 용어와 로 표기한 설명 그룹의 목록을 감싸 설명 목록을 생성함 용어 사전 구현, 메타데이터(키-값 쌍 목록)을 표시할 때 사용 dl 안에 dt, dd를 넣을..

3. HTML의 요소(3) 4) 구조를 나타내는 요소 ✔ 컨테이너 - , 요소는 플로우 콘텐츠를 위한 통용 컨테이너이다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 아무 영향이 없음 의미가 없은 "순수" 컨테이너 : 의미를 가진 다른 요소가 없을 때 사용 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 도움 문서의 특정 구역이 다른 언어임을 표시하는 용도로 사용 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너이다. 스타일을 적용하거나 lang등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용 와 매우 유사하지만 인라인 요소 아무 것도 나타내지 않음 ✔ 시멘틱 웹(Semantic Web) Semantic : 의미의, 의미론적인 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성함 :..

2. HTML의 요소(2) 3) 텍스트 요소 ✔ 제목 ~ ~ 요소는 6단계의 구획 제목을 나타낸다. Heading h1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6 구획 단계는 이 가장 높고 >이 가장 낮음 글씨 크기를 위해 제목 태그를 사용하지 않을 것을 권장(CSS style 사용) 제목은 순차적으로 기입하는 것을 권장 웹 접근성을 위해 전체 페이지의 목적을 설명하는 은 페이지 당 하나를 권장 검색 엔진이 을 먼저 찾아 웹 페이지의 전체 내용을 아우르는 것을 인지. ✔ 본문 - 요소는 하나의 문단을 나타낸다. HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있다. 문단은 블록 레벨 요소이다. 닫는 태그 문장의 한 줄 ..