개발일지📝

✔ 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 값 동일하고, 겹치는 경우 발생 겹쳐진 마진 값을 비교해서 큰 값으로 상쇄해서 랜더링 한다. 높이 없는 (빈요소) 상태의 블록요소위 ..

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

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