coding/css (17) 썸네일형 리스트형 0609 / responsive web design (rwd) 반응형웹 (pc) * e_pc @media screen and (min-width:960px) { /* 가로 기준 960px */ /* common class */ .container { width:100%; max-width:1200px; max-width:75rem; height:auto; margin:auto; } /* ============================================ */ #wrap { height:1200px; background-color: #ffc; } #headBox { position:fixed; top:0; left:0; z-index:1500; width:100%; height:auto; background-color: #333; } .headBox_innerwrap { .. 0609 / responsive web design (rwd) 반응형웹 (tablet) * d_tablet @media screen and (min-width:768px) and (max-width:959px) { #wrap { height: 700px; background-color: #fcf; } #headBox { position:fixed; top:0; left:0; z-index:1500; width:100%; height:60px; height:3.75rem; background-color: #333; } .headBox_innerwrap { width:100%; height:auto; padding:10px 1rem; box-sizing: border-box; } h1 { float:left; width: 174px; height: 42px; background-color: #.. 0609 / responsive web design (rwd) 반응형웹 (smartphone_horizontal) * c_smartphone_horizontal @media screen and (min-width:480px) and (max-width:767px) { /* 가로 기준 480px */ #wrap { height: 900px; height:56.25rem; background-color: #aca; } #headBox { position:fixed; top:0; left:0; z-index:1500; width:100%; height:60px; height:3.75rem; /* padding:10px 1rem; box-sizing: border-box; */ background-color: #333; } .headBox_innerwrap { width:100%; height:auto; } h1 { flo.. 0609 / responsive web design (rwd) 반응형웹 (smartphone_vertical) * b_smartphone_vertical @media screen and (max-width:479px) { /* vw단위 기준 : 320px */ html, body { width:100%; min-width:320px; } #wrap { height: 500px; background-color: #0cf; } /* headBox ============================= */ #headBox { position: fixed; top:0; left:50%; z-index:1500; transform:translateX(-50%); width:100%; height:40px; height:2.5rem; height:12.5vw; /* 원수치로 환산시 : 12.5/100*320 */ /* ov.. 0609 / responsive web design (rwd) 반응형웹 (basic_layout) - a_basic_layout (공통범위) @media screen and (min-width:960px) { /* common class */ .container { width:100%; max-width:1200px; max-width:75rem; height:auto; margin:auto; } /* ============================================ */ #wrap { height:1200px; background-color: #ffc; } /* headBox ================================== */ #headBox { position:fixed; top:0; left:0; z-index:1500; width:100%; height:auto;.. 0608 / responsive web design (rwd) 반응형웹 (단위내용) * vw 단위 : 브라우저의 가로값 전체를 기준으로 크기를 설정하는 단위, 실제로 가로 또는 세로, font-size 등 어떠한 크기에 적용하든 관계가 없다. * vh 단위 : 브라우저의 세로값 전체를 기준으로 실제 해당요소의 가로, 세로, font-size 등 단위가 설정되는 것은 모두 적용된다. * 그래서 vw/vh 단위를 사용하면, 부모크기의 기준으로 보는 것이 아니라, 브라우저 크기를 기준으로 한다. * 단, 스크롤바의 영역 또한 포함되기 때문 계산방법 : 요소의 크기 / 기준의 크기 (가로전체 또는 세로전체 ) * 100 = 값(vw)vh 0603 / form 내용 작성 :root { color --color-green1 : #08a600; . . . font --font-size1 : 20px; } 1. 직접선택해서 font-family 적용 2. 공통의 class 이름을 만들어서 적용 (다른 font icon 방식과 동일) 3. 속성이 동일한 이름으로 시작하는 요소에 적용 ( ^ : 시작, $ : 끝, * : 모든 ) /* .material {font-family : 'Material_icons' ;} */ ----------------------- * nth-of-type : 동일한 요소 이름 (ex. dt:nth-of-type = dt를 포함하는 값들에 적용) * nth-child : 동일조건에서 연속되어진 값 (ex. dd:nth-child = 연속된 dd 값에.. 0601 / form form 소통 할 수 있는 공간 (ex.로그인, 검색창), 양방향으로 내가 보낸 자료를 공개 ? 보안처리해서 공개 x ? input method get -> 자료공개 post -> 자료비공개 (90%) action 어느 경로로 자료를 보낼 것인가 name 변수명을 전달하기 위한 변수명 (백엔드에 직접적인 영향) value 값 (값을 입력하면 name과 함께 묶여서 백엔드로 전달) label input 과 연결 input의 기능 또는 필요한 설명 type text - 글자 그대로 보임 password - 안보이게 가림 hidden - 텍스트 박스 가림 required 유효성검사 (정확하게 처리 했나 안했나) 필수입력사항 radio 선택 해제 불가 radio -> selectName = value1 chec.. 이전 1 2 3 다음