Front-End Study89 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. 11장_자바스크립트 객체 다루기 11.1 객체란 정의 키와 값으로 구성된 속성의 집합체 ‘{}’ 기호를 이용해 생성(객체 리터럴) // 기본 형식 const person = {}; // 빈 객체 // 예시 const person = { name : 'kim', age : 20 } -> 모든 자료형의 데이터를 값으로 가질 수 있음(또다른 객체나 함수도 가능) 11.2 객체 속성 다루기 객체 속성에 접근하기 ‘[]’ 연산자와 ‘.’ 연산자를 사용하는 두가지 방법 // 대괄호 연산자 예시 const person = { name : 'kim', age : 20 } console.log(person["name"]); console.log(person["age"]); // 속성값이 배열, 객체 리터럴, 함수인 경우의 대괄호 연산자 예시 const.. 2023. 12. 6. 이전 1 ··· 9 10 11 12 13 14 15 다음