반응형 컴맹도 할 수 있다/HTML, CSS5 CSS 부모 자식 관계 header h2 header p footer h2 footer p header { color: red; } header h2 { color: orange; } header p { color: rgb(235, 235, 31); } footer { color: green; } footer h2 { color: rgb(21, 47, 214); } footer p { color: rgb(4, 4, 74);} 2022. 10. 10. CSS - 구성요소, 연동방법, 선택자 목록 1. CSS 2. CSS 구성 요소 3. CSS의 세가지 연동 방법 1) Inline Style Sheet 2) Internal Style Sheet 3) External Style Sheet 4. External Style Sheet 활용 5. 선택자(Selector) 1) Type 2) Class 3) ID 6. 선택자 활용 1) External Style Sheet ver. 2) Internal Style Sheet ver. 1. CSS (Cascading Style Sheet) html에서 디자인을 분리해서 깔끔하게함 문서의 레이아웃과 스타일 정의 2. CSS 구성 요소 선택자 { 속성 : 속성값; } ↔ html일 때 속성 = "속성값" * 선택자 : 디자인을 적용할 HTML영역 * 속성 .. 2022. 10. 9. HTML block 요소와 inline 요소 목록 1. Block 요소 2. Inline 요소 3. Block 요소와 Inline 요소 구분 4. 활용 1. Block 요소 태그가 대표적임 y축 정렬(세로) 형태로 출력됨 (줄바꿈현상) width height 값 사용 가능 → 공간 생성 가능 margin과 padding 값 사용 가능 → 상하 배치 작업 가능 2. Inline 요소 태그가 대표적임 x축 정렬(가로) 형태로 출력됨 (한줄로 이어서 출력) 공간 생성 불가능, 상하 배치 작업 불가능 3. Block 요소와 Inline 요소 구분 줄바꿈현상, 가로세로, 상하배치로 구분할 수 있음 4. 활용 Block 요소 1 Block 요소 2 Inline 요소 1 Inline 요소 2 2022. 10. 9. HTML 기초 구조를 잡을 때 사용하는 태그 목록 1. 구조를 잡을 때 사용하는 태그 1) header 태그 2) nav 태그 3) main 태그 4) article 태그 5) footer 태그 2. 활용 참고) 알아낸 것 1. 구조를 잡을 때 사용하는 태그 1) header 태그 웹 사이트의 머리글을 담는 공간 목차부분에 해당(페이지 맨 윗부분) 2) nav 태그 메뉴 버튼을 담는 공간 ( 홈, 설정 등) ,,와 같이 사용 nav 링크있는 링크 없는 여기부터 본문 영역 본문 내용 여기부터 하단 영역 하단 내용 여기부터 하단 영역1 하단 내용1 추가) 알아낸것 1. 의 기본 세팅은 인것같음 - 이나 없이 만 사용해서 리스트를 만들면 ul처럼뜸 2. 이미지 설정 관련 사이즈 : width, height로 설정 마우스 커서 대면 나오는 텍스트 : ti.. 2022. 10. 6. HTML 태그와 기본 구조 목록 1. 웹을 구성하는 요소 세가지 2. HTML 태그 1) 기본 태그 구조 2) 요소 3) 태그 3. HTML 문서의 기본 구조 4. 자주 쓰는 태그들 1) a 태그 2) img 태그 3) h 태그 4) p 태그 5) ol, li 태그 6) ul 태그 5. 총 내용 복습 추가) 알아낸 것 1. 웹을 구성하는 요소 세가지 1) HTML 설계도 2) CSS 디자인 3) JavaScript(JS) 기능 2. HTML 태그 1) 기본 태그 구조 내용입력 2) 요소 3) 태그 * 속성 : HTML 태그가 갖고 있는 추가 정보 * 속성값 : 수행할 명령을 구체적인 명령을 지정하는것 3. HTML 문서의 기본 구조 ← HTML 5라는 신조어로 문서를 선언하는 태그 ← 웹사이트에서 노출되는 정보를 담는 공간, 이미.. 2022. 10. 6. 이전 1 다음 반응형
