코딩하는 감자

1. WEB 정의 안내 페이지 HTML, CSS, JavaScript 파일 분리 그리드를 이용하여 구성 day/ night 버튼 클릭시 배경과 글자색 변경 객체와 함수를 이용하여 자바스크립트 구현 https://github.com/handje/WEB_Study.git GitHub - handje/WEB_Study Contribute to handje/WEB_Study development by creating an account on GitHub. github.com

🔔토글(toggle): 토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다. 1. 조건문: 현재 value 값을 이용하여 조건문 구현 if(document.querySelector('#ToggleButton').value==='night') 리팩토링 사용자가 보이는 외부 화면의 변경 없이 코드의 구조를 재조정하여 가독성을 높이고 유지보수를 편하게 하는 행위를 뜻한다. 1. 반복되는 부분을 변수로 처리하거나, this를 이용하여 구현 var target=document.querySelector('body'); if(this.value==='night..

JavaScript => html은 정적이라는 한계를 극복하고 동적으로 사용자와 상호작용할 수 있도록 함 1. 1+1 2. 속성 값에 자바스크립트 메서드 이용 ex) hi 버튼을 눌렀을 때 경고창 표시 alert() 3. 이벤트를 정의하는 속성 속성 값은 반드시 자바스크립트가 와야 한다. 이벤트가 실행되었을 때 미리 기억하고 있던 자바스크립트 코드를 실행하는 역할을 하게 된다. ex) onclick, onchange 등 4. 자바스크립트의 데이터 타입 🔔 Boolean, Null, Undefined, Number, String, Symbol, Object 5. 웹브라우저 제어 ① 제어하고자 하는 태그를 선택 onclick="document.querySelector('body')" ② 선택한 태그의 스타일..

💡통계에 따라 많이 쓰이는 태그 20개 직접 정리하며 익히기 태그 의미 / 중요한 속성 웹페이지의 시작과 끝 해당 문서에 대한 정보인 메타데이터의 집합을 정의할 때 사용 모든 콘텐츠를 포함하는 영역정의 문서의 제목 메타데이터 정의 / charset, name, content,,, 특정 영역을 정의, 블록 타입 하이퍼링크를 정의 / href 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용 / src 외부 소스사이의 관계를 정의, 내부에 위치 / rel (필수 속성, 현재 문서와 외부 리소스 사이의 연관관계를 명시) 이미지 / src, alt(이미지 대체 텍스트) 인라인 요소들을 하나로 묶을 때 사용 문단 정의 리스트에 포함되는 아이템 정의 순서가 없는 리스트 문서의 스타일 정보 텍스트 내의..

WWW, HTML, CSS, Javascript의 개념을 나타내주는 기본 페이지 를 이용하여 목차 제공 및 각 목차에 맞는 페이지로 연결 그리드 형식을 이용하여 전체적인 구성을 배치함 미디어 쿼리를 사용하여 화면 크기에 따라 페이지의 구조가 달라지도록 구현 주어진 실습을 응용하여 동영상등을 추가하여 구현 https://github.com/handje/WEB_Study.git GitHub - handje/WEB_Study Contribute to handje/WEB_Study development by creating an account on GitHub. github.com

CSS(스타일 시트 언어) 1. 기본 문법 : 선택자(Selector)를 사용하여 효과를 적용 🔔Selector=a / Property=color, text-decoration / Value=black, none 각 태그의 속성에 style을 추가하여 효과 적용 CSS 2. 속성 글씨 크기: font-size / 정렬: text-align,,, 사용할때마다 그에 맞는 검색과 에디터의 도움을 이용하는것이 좋음 3. 선택자 ex) 기본 a 태그는 black, 방문한적이 있는 페이지(html, css)는 gray, 방문중인 페이지는 red로 표시하기 ① html, css 를 그룹으로 묶어서 사용: class HTML CSS ② class 선택자는 .[클래스이름] 로 사용 .saw{ color:gray; } ③..

1. 속성 ex) 태그만으로는 정보가 부족 => src 속성 추가(주소), width 등으로 크기 조절 속성은 태그의 이름만으로는 정보가 부족할 때 사용하며, 여러 개를 입력 가능하고 순서는 상관없다. 🔔이미지를 저작권 없이 사용할 수 있는 사이트 https://unsplash.com/ Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash.com 2. 부모 자식과 목록 포함하는 태그를 '부모 태그' 포함된 태그를 '자식 태그'라고 부른다. ..

[WEB1]_HTML & Internet "HTML은 쉽고 중요하다" 1. HTML에서 가장 중요한 문법 = 태그(Tag) 중요성 태그를 이용한 웹페이지 구성은 단순히 글을 쓰고 폰트를 조절한 글과 달리 각 부분의 역할을 보여준다. 즉, 단순히 폰트를 이용한 제목과 헤더 표현으로 제목이라는 역할을 준 제목은 정보의 질이 다르다. br vs p br: (a single line break tag) 줄바꿈/ 닫히는 태그 없음/ 여러번쓰면 여러줄을 띄울수 있음 p: (paragraph tag) 단락을 표현/ 정해진 여백만큼만 띄어짐 /css를 통해 여백 변경 가능 여러 개념들을 알고있는 지금, 중요한것은 정리와 필요한 개념을 찾아쓸 수 있는것이라 생각하여 전체적인 정리를 위한 공부를 시작했다. 그중 웹 강의로..

"본격적인 실습 전 간단한 개념 복습하기" Front-End 개발이란? 웹에서 사용자 인터페이스 부분을 구현하는 것을 뜻함, 보통 HTML, CSS, Javascript를 사용하는 개발 HTML(Hypertext Markup Language) 마크업 언어. 웹을 이루는 가장 기초적인 구성요소. 태그를 이용하여 웹의 골격을 만들어줌. CSS(Cascading Style Sheets) 마크업 언어가 실제로 표시되는 방법을 기술하는 스타일 언어. HTML을 이용하여 만든 골격을 꾸미는 역할. tag, id, class 값을 이용하여 스타일을 정해준다. HTML 태그 내부에 선언된 css가 가장 우선순위가 높으며 별도의 파일을 연결한 css의 우선순위가 가장 낮다. Javascript 객체 기반의 스크립트 프로..