코딩3 레이어 팝업 중앙정렬 팝업 사이즈 고정 팝업 타이틀 팝업 텍스트 영역 예 아니오 팝업 사이즈가 고정일 경우에는 position: absolute;로 요소를 띄워서 margin 으로 위치를 조절하는 방법을 사용합니다. IE7까지 대응할 경우에는 팝업 크기만큼 마이너스 마진으로 위치를 옮겨주고, IE8 이상 대응할 경우에는 margin: auto; 를 사용하여 보다 쉽게 중앙 정렬할 수 있습니다. margin: auto; margin의 top, left, right, bottom 모두 auto로 적용할 경우, margin: auto; 로 축약하여 사용할 수 있습니다. 하지만 경우에 따라 auto는 0으로 처리되기도 합니다. 0으로 처리되는 경우 상하 margin inline, float 요소, 혹은 absolute, fixed로.. 2020. 5. 17. [javascript] 자바스크립트 첫걸음 - JavaScript가 뭔가요? 들어가며 웹 페이지의 기본 구성요소 HTML : HTML을 통하여 페이지를 어떻게 보여줄지 구조를 만듦 CSS : 만들어진 구조에 스타일을 입힘 (크기,색상 위치 등) JAVASCRIPT : HTML 과 CSS로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어 줌 (Slide, Drag&Drop 등) 다시 정리하면 HTML은 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어 CSS는 배경색, 폰트 등의 레이아웃 등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙의 언어 JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어룰 다루고, 움직이는 이미지 그리고 꽤나 많은 다른일들을 할 수 있는 스크립트 언어 Player 1: Chris p.. 2020. 5. 11. [css]Flexbox 레이아웃 Flexbox란? 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flexbox를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있습니다. Flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다. Flexbox 구성요소 flexbox는 flex item(자식 요소)과 flex container(상위 부모 요소)로 구성됩니다. flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성: flex, flex-.. 2020. 4. 19. 이전 1 다음
