분류 전체보기101 13장_HTML+CSS+JS로 완성하는 최종 프로젝트_4 13.8 섹션 영역 만들기 : Contact HTML 코드 작성하기 왼, 오른쪽 영역을 구분하여 작성(div 태그 class명을 left, right로 분할) CONTACT CONTACT WITH ME phone 010-1234-5678 e-mail jungwk1020@gmail.com address 86 MILLER ANGOLA NY 14006-1028 USA name e-mail messege send CSS 코드 작성하기 section.contact .contact-me::after{ content:""; display:block; clear:both; } section.contact .contact-me .left{ width:30%; float:left; } section.contact .con.. 2023. 12. 15. 13장_HTML+CSS+JS로 완성하는 최종 프로젝트_3 13.5 섹션 영역 만들기 : What I Do HTML 코드 작성하기 사각형 모양의 3단 분리 본문 작성을 위해 div 태그를 활용한 영역 전개방식으로 작성 Features What I Do HTML5 HTML5 Study CSS3 CSS3 Study JavaScript JavaScript Study CSS 코드 작성하기 do-inner 클래스 그룹 본문 스타일 작성 /*float 속성 해제*/ section .do-me::after{ content:""; display:block; clear:both; } /* 사각형 크기와 간격, 내부 여백 설정 */ section .do-me .do-inner{ background-color: #fff; width:30%; padding:2rem; float:le.. 2023. 12. 13. 13장_HTML+CSS+JS로 완성하는 최종 프로젝트_2 13.3 메인 영역 만들기 HTML 코드 작성하기 시멘틱 태그인 main 태그 활용 기준 너비 유지를 위한 container 클래스가 포함된 div 태그 안에 코드 작성 Welcome🖐️ I'M A 시작이 반이다. DOWNLOAD CV CSS 코드 작성하기 background 속성 url() 함수로 삽입 이미지 경로 지정 텍스트 별로 크기, margin 속성 지정정 main{ width:100%; height:100vh; color:white; background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/me.jpg') center center; background-size: cover; display:flex; justify-co.. 2023. 12. 12. 13장_HTML+CSS+JS로 완성하는 최종 프로젝트_1 13.1 최종 프로젝트 개요 실무와 비슷한 단계적 웹 페이지 구현 헤더, 메인, 섹션 영역으로 구분되는 기본 구조를 채택한 웹페이지 13.2 헤더 영역 만들기 COGI About Features Portfolio Contact /*헤더 영역*/ .container{ width: 1140px; height:0 auto; } header{ position: fixed; color:white; top:0; z-index: 1; width:100%; padding:1rem; } header .container{ display:flex; justify-content: space-between; align-items: center; width:100%; } header nav ul{ display:flex; } h.. 2023. 12. 11. 12장_문서 객체 모델과 이벤트 다루기_2 12.5 폼 조작하기 form 태그 선택하기 forms 속성, name 속성 사용하기 document.forms HTMLCollection(2) [...] document.frm1; document.frm2; 폼 요소 선택하기 elements 속성, name 속성 사용하기 ... document.frm1.element[1]; document.frm1.uname; 폼 요소의 입력값 다루기 오렌지 사과 포도 사과 오렌지 포도 사과 오렌지 포도 // 한줄 입력 요소 다루기 document.frm.id.value; document.frm.pw.value; // 여러줄 입력 요소 다루기 document.frm.text.value; //체크박스 다루기 const checkboxEls = document.queryS.. 2023. 12. 10. 12장_문서 객체 모델과 이벤트 다루기_1 웹 브라우저는 ==문서 객체 모델(DOM)==을 구성하며, HTML 문서의 구성요소를 객체로 인식 문서 객체 모델이 생성되는 방식 문서 객체 모델은 기본적으로 트리 구조(DOM 트리) 객체 하위의 '노드'로 구성 1. 꼭대기의 루트 노드(html 태그) 2. 루트 노드의 하위 노드(head 태그, meta 태그, title 태그, body 태그) - 서로 부모, 형제, 자식 등의 관계로서 성립됨 노드 타입 살펴보기 DOM 트리의 노드들도 다양한 종류가 존재하며, 각기 다른 작업을 수행 타입 설명 문서 노드(Node.DOCUMENT_NODE) 최상위 document 객체 노드 타입 요소 노드(Node.ELEMENT_NODE) h1, p 태그와 같은 요소 노드 타입 속성 노드(Node.ATTRIBUTE_NO.. 2023. 12. 7. 이전 1 ··· 10 11 12 13 14 15 16 17 다음