서엉2

선택자 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만 선택하도록 도움 1. 선택자 h1, h2, h3, h4, h5, h6 { color: yellow; } 2. 전체 선택자 * { color: yellow; } 3. 선언 h1 { color: yellow; font-size: 2em; background-color: gray; } 4. 선택자 & 선언 > h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; } 요소 선택자 가장 기본인 선택자 (=태그 선택자) h1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; } h..

CSS Cascading Style Sheet html = 웹 페이지의 정보 / css = html을 보기 좋게 디자인하는 역할 CSS 문법 h1 { color: yellow; font-size: 2em; } - 선택자 (selector) = "h1" - 속성 (property) = "color" - 값 (value) = "yello" - 선언 (declaration) = "color: yello", "font-size: 2em" - 선언부 (declaeration block) = "{ color: yellow; font-size: 2em; }" - 규칙 (rule set) = "h1 { color: yellow; font-size: 2em; }" html에서의 속성 = Attribute : 어떤 구체적..

block level 요소 한 줄에 하나의 요소 표시 일반적인 모든 요소( 블록, 인라인 레벨 ) 포함 가능 div / h1~h6 / p / ul / li / table ..... inline level 요소 한 줄에 여러개 요소 표시 블록 레벨 요소의 자식으로 분류 ➔ 자손으로 블록 레벨 요소 포함 X 예외) 는 인라인 레벨 요소지만 자손으로 블록 레벨 요소 가능 span / i / img / em / strong / a .....

시멘틱 마크업 컴퓨터(브라우저)가 잘 이해할 수 있는 코드 - 의미에 맞는 요소 사용 - 문서의 구조화 - 인간과 기계가 모두 이해할 수 있는 것이 목표 : 단순히 텍스트 굵게 vs : 중요하다는 의미에 맞춰 굵은 스타일로 적절한 의미 에 맞춰 사용하는 것 = "시멘틱 마크업" * 새로 생긴 Sematic 요소 : 사이트 내 독립적 구분 / 게시판, 블로그 본문, 메거진, 뉴스기사 등 : 문서 주요 내용과 간접적으로 연관된 부분 표현 / 사이드바, 콜아웃 박스 등 : 독립적인 콘텐츠 표현 / 이미지, 삽화, 도표, 코드 등 : figure 콘텐츠에 대한 설명 : 작성자, 저작권 정보, 관련 문서 내용 등 : 제목, 로고, 검색, 작성자 이름 등 : 단락 요소 간의 주제별 구분 : 의 주요 내용 : 중요 ..

콘텐츠 모델 규칙에 대해 비슷한 성격의 요소들끼리 그룹화 한 것 Metadata 콘텐츠의 style(표현), script(동작)을 설정하거나 다른 문서와의 관계 등을 포함하는 요소 태그 내에 위치 base / link / meta / nonscript / script / style / title Flow 문서에 사용되는 대부분 요소 Metadata에 해당하는 일부 태그들만 제외하고 대부분이 포함 a / br / button / del / div / dl / h1~h6 / header / hr / nonscript / ol ..... Sectioning 헤딩과 푸터의 범위를 결정하는 요소. 아웃라인이 있음 article / aside / nav / section Heading 섹션의 헤더를 정의하는 요소 ..

폼 스타일 관련 요소 (Form) 요소 text : 아이디, 이름, 주소 등 단순 텍스트 (placeholder 속성 : 입력 전 미리 화면에 노출) password : 암호같이 공개할 수 없는 내용 (placeholder 속성 : 입력 전 미리 화면에 노출) radio : 중복 선택 X (checked 속성 : 미리 선택 / name 속성 : 그룹화) checkbox : 중복 선택 O (checked 속성 : 미리 선택 / name 속성 : 그룹화) file : 파일을 서버에 올릴 때 submit : form 값 전송 (value 속성 : 이름 지정) reset : form 값 초기화 (value 속성 : 이름 지정) image : 이미지 삽입 (src 속성 : 경로 / alt 속성 ..

표 (Table) 데이터 표를 나타내는 태그 테이블의 구성 요소 : 표를 나타내는 태그 : 행을 나타내는 태그 : 제목 셀을 나타내는 태그 : 셀을 나타내는 태그 테이블의 구조와 관련된 태그 : 표의 제목 : 제목 행 : 바닥 행 : 본문 행 : 공통된 속성을 가지는 열들을 묶기 위한 태그 : colgroup으로 묶을 각 공통된 속성 선언 테이블 관련 속성 colspan : 셀을 가로방향으로 병합 행 병합 : 첫 셀이 두개를 가진것으로 판단하여 rowspan : 셀을 세로방향으로 병합 열 병합 : 첫 셀이 두개를 가진것으로 판단하여 scope : 스크린 리더기가 읽어줄 방향 설정 header : 해당 셀과 관련된 id 정보 전달

참고자료 HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org) HTML elements reference - HTML: HyperText Markup Language | MDN This page lists all the HTML elements, which are created using tags. developer.mozilla.org 제목 태그 (heading) 가장 큼 ~ 가장 작음 일반 텍스트보다 더 강조됨 단락 태그 (paragraph) 사용시 태그 자체에서 자연스럽게 개행 : 강제 개행 텍스트 관련 태그 : 굵게 : 기울임 : 밑줄 : 중간선 앵커 요소 (Anchor) 다른 문..

Hyper Text Markup Language 단순한 텍스트를 넘어 웹페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크 정보를 구조적, 계층적으로 표현 가능한 프로그래밍 언어의 한 종류 태그 (Tag) 표시, 꼬리표 Hello, HTML 속성 (Attribute) 하나의 태그에 여러개 속성 저장 가능 // 에 id 속성을 추가해 title 값 선언 Hello, HTML // 에 id와 class 2개의 속성 선언 Hello, HTML 태그 중첩 (Nesting Tags) 태그 안에 다른 태그 선언 Hello, HTML 빈 태그 (Empty Tag) 종료 태그 X → 내용 X 내용만 없을 뿐 화면에 나타내거나 표지되지 않아도 다른..