개발일지📝

.dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border: 1px solid red; padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } 여기에 마우스 오버 해봐! Hello World! 고양이 입니당 귀엽쥬 .dropbtn { background-color: #4CAF50; color:..

CSS Navigation Bar 표준 틀 Home News Contact About 안녕하세요 💬 숫자로 정렬된 순서 있는 목록(Ordered List) 💬 점으로 순서 없는 목록(Unordered List) 💬 태그목록항목 정의 💬 하이퍼링크(링크)를 정의하는 태그 ( href 속성/ target 속성) ul { list-style-type: none; margin: 0; padding: 0;} 💬 list-style-type : 목록 요소(, )의 기본 목록 마커(marker)를 제거 💬 margin: 0; padding: 0; 브라우저 기본 값 초기화(reset)하는 데 사용하거나/ 웹 페이지의 레이아웃을 조정할 때 여백을 제어 CSS Vertical Navigation Bar ul { list-..

ViewPort : 사용자가 볼 수 있는 웹페이지 공간 Viewport 의 표시 영역은 장치별로 다르다. 뷰포트를 제어하기위해서는 모든 웹페이지에 아래 요소를 포함시켜야한다. 이 부분은 장치의 화면 너비를 따를 수 있도록 페이지 너비를 설정함 width=device-width 이 부분은 페이지가 브라우저에 처음 로드 될 때 초기 확대/축소 수준을 설정함 initial-scale=1.0 추가 규칙 https://www.w3schools.com/css/css_rwd_viewport.asp

반응형웹페이지 를 만들때 사용한다. 특정 부분에 미디어쿼리로 BreakPoints 를 설정해서 반응형 웹페이지를 만듬 width and height of the viewport - 뷰포트의 너비와 높이 width and height of the device - 기기의 너비와 높이 orientation (is the tablet/phone in landscape or portrait mode?) - 방향 resolution - 해결 1. 장치 (뷰포트 크기가 다른 경우) /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets..

수업소개✅ React 사용자 정의 태그를 만드는 기술 부품으로 사용 (공유되고 사용할 수 있음) 실습환경 구축 ✅ React 홈페이지 온라인 플레이 그라운드 -> 개발환경 세팅 없이 바로 가능 Create react app 을 사용 !! 터미널에 npx create-react-app my-app node js 다운로드 해야함 vscode 로 실습 react1.app 폴더 생성 새 터미널 열고 npx (node.js 다운받으면 사용가능) create-react-app 치면 바로 사용 가능 . (현재 디렉토리) + 엔터 클릭 npm start > 샘플 애플리케이션이 켜진다. 소스코드 수정 방법✅ index.js // 입구파일 태그 // UI 전체 , 실제 내용은 상단 import App from './App..

프로그램, 프로그래밍, 프로그래머 ✅ 조건문 예고✅ 비교 연산자와 Boolean 데이터 타입 조건문 조건문의 활용✅ 리팩토링(refactoring)✅ 동작 그대로 코드 효율적으로 개선하는 것 (유지보수, 중복, 가독성) 중복의 제거 반복문 예고✅ 배열✅ push() 등등을 이용해서 배열 이용 반복문✅ 초기문, 조건문, 반복문 배열과 반복문✅ 배열과 반복문의 활용✅ var alist = document.querySelectorAll('a'); // 모든 a 태그를 배열에 넣기 var i = 0; while(i 라이브러리 CDN => 컨텐츠 딜리버리 네트워크 ! (라이브러리 사용 및 저장 등등) - 반복문 사용 X UI vs API✅ UI: API: API는 소프트웨어 개발에서 호환성을 위해 지켜야 하는 추..

수업의 목적 ✅ 자바스크립트 = 사용자와 상호작용 웹브라우저 한번 출력 후 수정 불가능 = 자바스크립트를 통해 디자인 수정 가능 자바스크립트가 html 을 제어하는 언어다! 동적으로 만들어주게된다 ! HTML과 JavaScript의 만남 1 (script 태그)✅ html 정적 / JavaScript 동적 // 2 HTML과 JavaScript의 만남 2 (이벤트)✅ - onclick 뒤에는 JS 가 와야함 - JS 문법 해석에 따라 동작 on 으로 시작하는 속성 => 이벤트 HTML과 JavaScript의 만남 3 (콘솔)✅ - Console > '문자열'.length > 글자수 나옴 - Element > console (esc) > js 랜덤 당첨 코드 넣기 > 결과 완료 이미 만들어진 웹사이트에서도..

CSS 등장 이전의 상황 ✅ 과거 font 태그 CSS의 등장 ✅ css 새로운 문법 1. 한번에 수정가능 2. 중복 코드의 제거 혁명적 변화 ✅ css 문법 구분 1. 태그로 (선택자에게 줄 속성을 부여) 2. style="color:red" 속성으로 (직접 사용) CSS 속성을 스스로 알아내는 방법 ✅ CSS 선택자를 스스로 알아내는 방법✅ 선택자 id(#@@) > 선택자 class(.@@) > 태그 선택자 (마지막 등장 선택자가 우선순위가 높다) 그룹으로 묶어서 속성 주는 방법 박스모델✅ 태그별 성격을 알아야함 화면전체 사용 block level element 화면일부 사용 inline element disply: block; 값으로 바꿀 수도 있음. h (화면전체 사용) a (일부분만 사용, 줄바..

다시 생활코딩으로 웹 공부하기 시작합니다! 2-3개월에 거쳐서 완벽하게 끝내고 싶습니다! 웹서버 운영하기✅ 웹브라우저 = 제품군 웹서버 = 제품군 (Apache ,IIS, Nginx) Live Server (웹서버) 비주얼스튜디오코드 -> 확장 -> 라이브서버 설치 (Go Live) 라이브서버 : 1. 실시간 편집 기능 웹브라우저,웹서버,index.html http -> Hyper Text Transfer Protocol 127.0.0.1 -> Internet Protocol Address (자기자신의 주소) 5500 -> Port (서버 포트 번호) IP Address -> 컴퓨터의 IP 주소 알 수 있음 수업을 마치며 1 ✅ 수업을 마치며 2 ✅ 수업을 마치며 3 ✅ 부록 : 코드의 힘✅ 부록 : 코..

생활코딩 WEB-HTML&Internet 프로젝트동기 ✅ 기획 ✅ 코딩과 HTML ✅ HTML 코딩 실습 환경 준비 ✅ - 아톰 설치 - 웹브라우저에서 ctrl + O => html 파일 선택해서 오픈 기본 문법 - 태그✅ - 강조 (굵게) - 언더라인 - 한글이 깨질땐? 혁명적인 변화✅ - W3C(The World Wide Web Consortium) 국제민간표준화기구 - https://www.w3schools.com/ 통계에 기반한 학습✅ -https://www.advancedwebranking.com/seo/html-study/ 줄바꿈✅ - 줄바꿈 - 무엇인가 설명하지 않는 태그는 감싸야하는 컨텐츠가 없으므로 태그를 닫지 않는 규칙이 있음. (img, input, br, hr, meta 등) - 줄..