All :L

📒 CSS3 속성1️⃣ Font 속성Font 속성font-family : 글꼴 지정font-size: 글자 크기 지정font-style: 글자 스타일 지정font-variant: 소문자를 작은 대문자(samll-caps)로 변경font-weight: 글자 굵기 지정font: font에 관한 속성 한 번에 지정하는 단축형 속성2️⃣ Text 속성Text 속성text-align : text 정렬 방식 지정text-decoratione: text 장식 지정text-indent: 첫 라인 들여쓰기 지정text-transform: text 대문자화white-space: 엘리먼트 안 공백 지정vertical-algin: 수직 정렬 지정letter-spacing: 문자 간 space 간격 지정word-spacing..

📒 CSS3 선택자 (Selector)1️⃣ 선택자CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자(selector)존재일반 선택자 : 전체, 타입, 클래스 ID 선택자로 분류복합 선택자 : 자식, 하위, 인접 형제, 일반 형제 선택자로 분류그 외 : 가상 클래스, 가상 엘리먼트. 속성 선택자 존재2️⃣ 일반 선택자전체 선택자사용법 : *{}HTML 문서 내 모든 요소 선택잘 사용되지 않으면 우선 순위 낮음타입 선택자사용법 : elementName {}태그명 이용해 스타일 적용할 태그 선택1개 이상의 HTML 요소 사용여러 요소 콤마로 구분클래스 선택자사용법 : .class-name {}클래스 명 : 공백 없이 대소문자 or -, _로 시작동일한 클래스 명을 중복해서 사용 가능(공통 속성 적용..

📒 CSS3 기본1️⃣ CSSCascading Style Sheets : 웹 페이지 디자인 담당웹 페이지를 표현하기 위한 스타일 규칙을 모아 둔 문서CSS 구성선택자(selector)와 선언(declaration) 두 부분으로 구성선택자는 규칙이 적용되는 엘리먼트선언 부분에서 선택자에 적용될 스타일 작성선언은 중괄호로 감쌈 → 속성과 값으로 이루어짐속성선택자에서 바꾸고 싶은 요소 (color, font, width …)값속성에 적용할 값여러 선택자에 동일 스타일 적용시 , (콤마)로 구분하나 이상의 속성 작성 가능 → 각 속성 ;(세미콜론)으로 구분2️⃣ 외부 스타일 시트 적용Link 태그link 태그를 사용해 외부 스타일 시트 적용link 태그는 head 태그 안에 작성 → rel, type, hre..

📒 HTML과 DOM1️⃣ DOM (Document Object Model)HTML과 XML문서의 구조를 정의하는 API 제공문서 요소 집합을 트리 형태의 계층 구조로 HTML 표현즉, HTML 문서 내용을 조작할 수 있는 API로 HTML 계층구조 형식의 객체로 표현계층 구조 제일 위에는 document 노드 존재아래에 HTML 태그 or 요소(element)를 표현하는 노드 존재아래에 문자열을 표현하는 노드 존재HTML 문서의 검색과 조작(추가, 수정, 삭제) 가능2️⃣ DOM 문서 계층 구조Document : HTML or XML 문서 표현HTMLDocument : HTML 문서와 요소만 표현HTMLElement 하위 타입 : 단일 요소 or 요소 집합의 속성에 해당하는 JS 프로퍼티 정의Comm..

📒 SemanticSemenatic1️⃣ Semantic헤더 : 사이트 제목과 로고, 검색 창 등 존재본문(contents : section + articles) : 여러 내용 존재사이드바(aside) : 본문 외 내용footer : 저작권 정보와 제작자 벙보 표시sematic 태그브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역할non-semantic 요소div, span 등 존재, content에 대해 어떤 설명도 Xsemantic 요소form, table, img 등 존재, content의 의미를 명확히 설명2️⃣ header머리말 지정주로 form 태그를 사용해 검색 창을 넣거나 nav 태그를 사용해 사이트 메뉴 삽입본문에 사용해 머리말로도 사용3️⃣ nav문서를 연결하는..

📒 공간 분할 태그1️⃣ Block VS inline ElementBlock 형식사용하는 element가 한 줄을 모두 사용inline 형식contents의 크기만큼만 공간 사용2️⃣ Block & inline 형식 태그Blcok 태그 및 Inline 태그 비교3️⃣ div & spandivblock 형식으로 공간 분할레이아웃 만들 때 주로 사용spaninline 형식으로 공간 분할와  태그와 함께 웹페이지 일부분 스타일을 적용시키기 위해 사용4️⃣ div & span 차이점여러 개를 나란히 나열했을 때div : 자동 줄 바꿈, 세로로 나열span : 줄 바꿈 X, 가로로 나열동일한 문장을 감쌌을 때div : 박스 형태로 영역 설정, 그 안에 정렬span : 줄 단위로 영역 설정, 텍스트가 노출되는 영..