개발일지📝

📍 이론  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; } ..

getElementById()HTML 요소(id="demo" 포함한) 찾아서, 요소 콘텐츠(innerHTML) 를 변경함큰 따옴표, 작은 따옴표 모두 허용 반갑습니다!Click Me!JavaScript Can Change HTML Attribute ValuesTurn on the lightTurn off the light html - src 속성을 변경할 수 있다.JavaScript Can Change HTML Styles (CSS)Click Me! css - style 값을 변경할 수 있다.JavaScript Can Show &  Hide HTML ElementsClick Me!Click Me!html 요소를 숨기거나 보이게 할 수 있다.  The  태그 사이에 코드가 삽입된다.JavaScript Fu..

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

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