개발일지📝

✔ CSS Box ModelContent : 텍스트, 이미지가 표시되는 상자내용Padding : 콘텐츠 주변 영역Border : 패팅과 콘텐츠를 둘러싸는 테두리Margin : 테두리 외부 영역  ✔ Width and Height of an Element전체 요소 너비 = 너비 + 왼쪽-오른쪽 패딩 + 왼쪽-오른쪽 테두리전체 요소 너비 = 높이 + 상단-하단 패 + 상단-하단 테두리 즉, margin 값은 실제 요소 너비에 포함되지 않는다.

✔  CSS Padding padding-toppadding-rightpadding-bottompadding-left속성 : length, %, inheritpadding: 상단, 오른쪽, 하단, 왼쪽 ;  -> 4개padding : 상단. 오른쪽/왼쪽 , 하단; -> 3개padding : 위/아래, 오른쪽/왼쪽 -> 2개padding : 모두 -> 1개 요소에 지정된 너비가 있는 경우, 추가된 패딩이 요소의 전체 너비에 추가됨 패딩 값에 상관 없이 너비 유지 (실제 너비 유지하되, 내부 콘텐츠 공간이 줄어듬)  :: box-sizing: border-box;

✔  Marginsmargin-topmarign-rightmargin-bottommargin-left margin : 상단, 오른쪽, 하단, 왼쪽 ;  -> 4개margin : 상단. 오른쪽/왼쪽 , 하단; -> 3개margin : 위/아래, 오른쪽/왼쪽 -> 2개 margin: auto;  -> 가로 중앙에 배치 margin-left: inherit;  -> 상속 , 여백 값이 상위요소에서 상속되도록 함 ✔ CSS Margin Collapse  :: 마진 상쇄 블록레벨 요소일 경우 적용됨. 마진 값이 0이어도 적용좌우는 상쇄 X 상하만 상쇄 적용 O  위아래 margin 값 동일하고, 겹치는 경우 발생 겹쳐진 마진 값을 비교해서 큰 값으로 상쇄해서 랜더링 한다. 높이 없는 (빈요소) 상태의 블록요소위 ..

📍 이론 Edit > replace  :: 한번에 글씨 변경 가능li{$}*7 :: 1~7까지 숫자가 찍힌  li 생성listBox_text1 = document.getElementsByClassName("listBox_text1");모든 요소를 검색하여 특정 클래스 이름을 가진 요소를 찾아서 NodeList(요소의 컬렉션)으로 반환한다.자바스크립트  반복문/배열jQuery , React , NodeJS  > 자바스크립트 라이브러리 jQuery > CDM > jQuery 3.xjQuery > $  / jQuery(document).ready  📍실습 http://hyejux.dothome.co.kr/html_hj/index.html저의 경력은 좀비떼 몰려오는데 파르페 먹기, 도로에 빵 쏟기, 비 오는..

📍 메뉴 만들기  커피 주문 화면 프로그램 메세지 표시 let btn1,btn2,btn3,txt;window.onload = function(){ btn1 = document.querySelector('#btn1'); btn2 = document.querySelector('#btn2'); btn3 = document.querySelector('#btn3'); txt = document.querySelector('.txt'); btn1.addEventListener("click", function(){ txt.innerHT..

콘솔 창 : console.log("");바닐라 JS외부 JS 파일 불러오기 ::  📍시멘틱 태그  :: 6가지 :   text-indent: 20pxposition : 부모 - relative / 자식 - absolutefont-size: 1.3rem => 1.3 * 16 = px  자바스크립트 개념, 장단점 원시 데이터 종류 :: 숫자,문자,Boolean, Undefined, NullObejcet 데이터 타입 :: 배열 , 객체 , 클래스 ,  📍 변수 :: var (any) 재선언 가능 / 재할당가능let (같은Type),  재선언 불가능 / 재할당가능const(상수) 재할당 불가능 📍 배열 :: 같은 타입의 데이터가 인덱스 순서대로 나열된 것  ex) 문자열로 이루어진 학급 친구들..

📍 이론  Live Server : 결과 내용을 미리(즉시) 보여주는 확장 프로그램Elm Emmet : 코드를 빠르게 입력해주는 확장 프로그램Auto Rename Tag : 앞뒤 태그명을 같게 해주는 확장 프로그램 inline  / block  table , tr 줄 만들기, td 칸 만들기shift + art + 화살표 : 줄 복사하기선택자 종류 : id, class, name, tag, 기타 접근자# / id : 중복 사용 불가 ( 자바스크립트에서 사용 가능) # class  중복 사용 가능dix.box  : 클래스 자동완성ctrl + 슬래쉬 : 주석처리  body { width : 400px; border : 1px solid red; } ..

✔ display 디스플레이 속성은 웹 페이지에서 요소가 어떻게 표시되는지를 지정하는 데 사용된다.모든 HTML 요소는 자체의 기본 디스플레이 값을 가지고 있습니다.이 값은 요소의 종류에 따라 다릅니다.대부분의 요소의 기본 디스플레이 값은 블록(block)이나 인라인(inline)입니다.  Block-level Elements새로운 줄에서 시작하고 전체 너비를 차지한다.  -  position 연습 ~! position 연습입니다. ⭐1번 ⭐2번 ⭐3번 ⭐4번 ⭐5번   ✔ The z-index Property이 z-index속성은 요소의 스택 순서(어떤 요..

form 연습 !! id : password : number : input[type=text] { width: 300px; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } box-sizing : border-box => 패딩과 최종적으로 테두리가 요소의 전체 너비와 높이에 포함됨 input[type=text]:focus{ background-color: blanchedalmond; } outline: none;: 버튼 요소에 포커스가 되었을 때 기본적으로 표시되는 포커스 테두리를 제거합니다. textarea { width: 300px; height: 150px; padding : 12px 20px; margin : 10px 0; resize: ..

.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:..