본문 바로가기

coding

 (66)
0609 / responsive web design (rwd) 반응형웹.html 작성 - rwd.html 작성 site name navigation 검색창 띄우기 검색 검색하세요 검색 메뉴 닫기 home about product notice 광고영역 광고 1에 대한 요약설명 광고 2에 대한 요약설명 광고 3에 대한 요약설명 광고 4에 대한 요약설명 광고 5에 대한 요약설명 광고 6에 대한 요약설명 광고 7에 대한 요약설명 광고 01 광고 02 광고 03 광고 04 광고 05 광고 06 광고 07
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..
0531 / background & gradient background-attachment : fixed; 처리 시 -> background-position : 브라우저 기준으로 위치가 잡힘. background-color : hsla hue : 색상 0~360 saturation : 채도 0~100% light : 명도 0~100% alpha : 투명도 0~1 읽는 순서는 뒤에서부터 읽는 것이 쉽다.
0531 / transform (형태변형) - transform * 형태를 변형하게 하는 기능 (반드시 block 처리 해야된다!) * x, y, z 3개의 축을 사용 - scale (크기) - translate (이동) - skew (뒤틀기) - rotate (회전) -> rotate 는 기본 z축으로 회전 - perspective (원근법)
0531 / iframe (외부 문서 불러오기) - iframe 을 사용했을 경우, 문서의 요소는 target="_parent" 또는 target="_top" , target="_blank" 중 하나를 써야한다. * _self : 자신의 페이지에서 이동 (기본속성) * _parent : iframe 내부 위치의 부모요소에서 페이지 이동 * _top : iframe 내부 위치의 가장 상위 위치에서 페이지 이동 -> 현시점에서 _top을 주로 사용 * _blank : 새창으로 이동
0527 / font 내용 정리 * font font-family : '사용할 서체명', '앞서체가 없다면 적용할 서체', '대체 서체', 최종 계통서체; font-style : normal; font-weight : 100 ~ 900; font-size line-height : 줄 사이의 간격 letter-spacing : 글자와 글자간 간격 word-spacing : 단어와 단어간 간격 text-transform : 글자 변화 주기 text-align : 텍스트 정렬 white-space : 의미없는 공백 text-overflow : 더보기 (...) overflow : 지정영역에서 넘치는 것 text-decoration : 글자 꾸며주기 text-decoration-color : 꾸며주는 색깔 text-decoration-styl..

티스토리툴바