반응형 프로그램22 [html, css] height 100% 높이 레이아웃 간단한 정리 div 박스를 브라우저의 100% 높이로 지정해 주는 방법을 간단히 정리합니다. 1. sample.html sample 이름으로 height 100% 기본 페이지를 만들 html을 생성합니다. 난 !!! height 100% BOX가 되고싶어요 2. 결과페이지 3. 코드 설명 id가 h100Box 의 div를 높이가 100%인 div로 만들기 위하여 h100Box의 스타일의 height를 100% 로 지정해 줍니다. #h100Box { height: 100%; width:300px; } h100Box의 스타일의 height 를 100% 로 지정하여도 높이가 100%로 변하지 않는 이유는 부모들 속성의 높이가 100%로 지정되지 않았기 때문입니다. h100Box의 높이를 100%로 지정해 주기 위해서는 h.. 2022. 10. 25. html 이란 무엇알까 배워야하는 프로그램일까? HTML (Hypertext Markup Language) 이란 우리가 보는 웹페이지를 브라우저를 통하여 볼 수 있도록 하는 마크업 언어입니다. 텍스트를 통해 페이지를 이동할 수 있는 언어다 라는 의미도 있습니다. 브라우저를 통해 보여지는 언어라 웹으로 무엇인가를 만들려는 분들이라면 어느정도 기초적인 HTML 은 알고 있어야 하겠지요. HTML 이란 언어도 전문적으로 알려면 끝도 없겠지만 제가 아는 범위안에서 간단히 문서 하나 정도는 만들수 있을 범위안에서 간단히 설명해 보겠습니다. 1. html의 구조 html의 글내용 영역에서 html 문서의 기본 성격을 정의해 줍니다. 영역 내용을 입력해 줍니다. 2. html 문서의 기본 성격의 정의 HTML 문서 버전의 종류에는 HTML5, HTML4 이하 및 .. 2022. 10. 20. [html, css] height 100% 높이의 레이아웃잡기 사전 조건 DOCTYPE을 사용할 것 IE, Firefox, Opera, Safari 등 모든 브라우저에서 Standard Mode 혹은 Almost Standard Mode가 되는 조건은 아래와 같다. 위와 같이 HTML Page에 첫 번째로 선언하면 기본적인 BoxModel Problem을 해결할 수 있다. 다른 Doctype도 많지만 가장 무난히 호환성을 유지해 나가면서 표준을 지키고 여러 브라우저에서 동일하게 표현 하기에 제일 좋은 Doctype이라 생각이 든다. 첫 번째 조건 높이가 100%인 div 영역 height: 100%; 보통 div element에 위와 속성을 주면 안 된다 원인은 저 조건이 되기 위해서는 parent element의 height의 영향을 받기 때문이다. 그래서 해결책.. 2021. 12. 15. [ jquery ] div의 id 값을 찾아 텍스트 변경는 방법 jquery를 이용하여 지정된 곳에 텍스트를 변경하는 병법은? See the Pen Test by LeeJaeHyouck (@Zinu0926) on CodePen. jquery를 이용하여 지정한 곳에 텍스트를 변경은 방법입니다. 1. html a 링크 태그에 onclick 이벤트를 이용하여 자바스크립트 함수 load (num)를 호출합니다. 2 load 함수를 호출하면서 num 값을 전달합니다. 3. 자바스크립트 load 함수에서 html 소스에 id가 insNum으로 지정된 태그를 찾아 텍스트를 전달해준 num으로 텍스트를 변경합니다. 해당 소스를 어디에 응용할수 있을까? 설문조사의 라디오 버튼에 적용해서 라디어 버튼을 선택할 때마다 선택된 내용을 텍스트로 보여줄 수 있겠네요. 간단하지만 응용할 수 있.. 2013. 10. 8. [html, css] Div 중앙정렬 브라우져의 중앙에 로그인 Form을 위치 시키는데 가장 많이 사용될것 같은데요. 간단하지만 의외로 로그인 폼 이외에는 잘 사용을 안하는지라 (개인적 생각) 자주 까먹고 구글링해서 항상 찾는 소스이기도 합니다. 1. css body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background:#323333; -webkit-text-size-adjust: none; background-image:url(../images/loginbg.jpg); background-repeat: repeat-x; } div.centerOuter { position: absolute; top: 50%; left: 50%; margin.. 2013. 7. 19. ctrl+z, ctrl+d, ctrl+c 의 차이점 ctrl+z : 백그라운드로 작업전환 ctrl+d : 정상종료 ctrl+c : 강제종료 2013. 7. 10. 이전 1 2 3 다음 반응형
