본문 바로가기

coding/html

 (19)
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
0531 / iframe (외부 문서 불러오기) - iframe 을 사용했을 경우, 문서의 요소는 target="_parent" 또는 target="_top" , target="_blank" 중 하나를 써야한다. * _self : 자신의 페이지에서 이동 (기본속성) * _parent : iframe 내부 위치의 부모요소에서 페이지 이동 * _top : iframe 내부 위치의 가장 상위 위치에서 페이지 이동 -> 현시점에서 _top을 주로 사용 * _blank : 새창으로 이동
0525 / class="card" 내용 정리 이미지에 대한 설명 Lorem, ipsum. Lorem ipsum sit amet 상세보기
0524 / image 요소 * image - background-image : 기본형이 패턴처리 - background-size : contain; -> 이미지를 모두 보이게 / cover; -> 이미지를 완전히 감싸게 x수치 auto : 가로 (x수치)의 크기기준으로, 높이 크기는 자동설정 y수치 auto : 세로 (y수치)의 크기기준으로, 가로 크기는 자동설정 (단, 구형브라우저에서는 적용 x) - background-position : x좌표 (권장x) : left || center || right y좌표 (권장x) : top || center || bottom 좌표 : %, px, em, rem, vw, vh 등 단위를 사용!!! !!!! *** 반드시 해당하는 이미지가 움직인다 *** !!!! ---------------..
0524 / semantic 구조 - semantic 구조 이해 semantic 구조란? 각 영역에 해당하는 부분에 의미를 두고 제작하는 기법 header : h1, #gnb(global_navigation_bar) 영역을 담고있는 영역 nav : navigation 형태를 취하는 영역 aside : 있으면 좋고, 없어도 크게 불편하지 않은 영역 section : 주로 메인광고, 해당 내용이 별도로 연결되어있는 영역 article : 내용이 담긴 영역, 본문을 파악할 수 있는 영역 footer : 회사 또는 사이트의 정보(회사주소, copyright 등)를 담고있는 영역 - 기타 main : header/footer을 제외하고 본문의 내용을 담는 영역을 main으로 사용 하지만 보통의 시멘틱구조와는 성향이 다르므로 쉽게 쓰기 어렵다. f..
0520 / position.html & css 개념 - position 개념 정리 (position 은 정말 필요한 경우에 사용) position 기능은 마지막에 필요한 위치를 파악해서 각 위치의 설계를 한 다음에 사용한다. z-index 값은 가장 큰 범위에서부터 설계하는 것이 좋다. inline 요소 (특히 a, input, button 같은 focus 가 가능한 요소는 position을 사용하지 않는 것을 권장) * I.R 기법 (image replace 기법) - 해당하는 요소에 이미지를 글자로 대처하여 사용하는 기법 - 필요한 내용이지만 눈에 보이지 않게 처리하는 방법 - display:block; (사이즈를 가지고 밑으로 떨어트림) - width : 0 ; height : 0 ; - overflow : hidden ; - position : a..
0518 / margin,border,padding,outline.html & css 요소 작성 - margin,border,padding,outline.html 웹기초 margin, padding, border, outline 개념 margin margin_01 margin_02 margin_03 margin_04 padding padding_01 padding_02 padding_03 padding_04 padding_05 padding_06 padding_07 border border_01 border_02 border_03 border_04 border_06 outline outline_01 outline_02 outline_03 -------------------------------------------------------------------------------------------..
0517 / reset_and_common.css - reset_and_common.html DOCTYPE html> Document 웹기초 reset 세팅 html, body 에 들어가는 여백 초기화 div, 제목, 내용, 이미지, 리스트 여백, 선 초기화 list의 앞에 들어가는 list-style 제거 a요소의 글씨색, 밑줄 제거 ------------------------------------------------------------------------------- - reset.css @charset "UTF-8"; /* reset.css */ html, body { width:100%; height:100%; margin:0; padding:0; } h1, h2, h3, h4, h5, h6, p,pre,blockquote,address, ..

티스토리툴바