웹 페이지 레이아웃- 본문 구성 #main_section > article.main_article{ margin-bottom: 10px; padding: 20px; border: 1px solid black; } Main Section- 사이드 탭바 구성/* 첫번째 탭*/ input:nth-of-type(1) {display: none;} // input 태그는 보이지 않게 만든다. input:nth-of-type(1) ~ div:nth-of-type(1){display: none;} // input 태그가 체크되어 있을 경우에는 뒤에 위치하는 div 태그를 보이게 만듭니다. input:nth-of-type(1):checked ~ div:nth-of-type(1){display: block;} // in..

웹 페이지 레이아웃- 일반적인 웹 페이지 구성 요소-- Header : 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 링크) 등으로 구성-- Navigation : 링크 중에서 중요도가 높은 링클르 체계적으로 구성해 놓은 것, 링크를 별도로 모아둔 영역-- Aside : 배너, 용어 설명, 관련 상품등 관련성이 적거나 없는 내용으로 구성-- Section : 관련있는 내용을 요소별로 묶어 표시, 섹션마다 나름의 제목 체계를 가질 수 있다. -- Footer : 바닥 영역 또는 꼬리말, 저작권, 연락정보 등 본문과 관련성 있지만 본문에 담기 어려운 내용 Header Navigation Aside Section Footer - 레이아웃 구분1. 웹페이질르 구상2. 웹페이지의 구성 ..

벤더 프리픽스- explore : '-ms-'transition-duration : 1s;- chrome: '-webkit-'transition-duration : 1s;- firefox : '-moz-'transition-duration : 1s;- safari : '-webkit-'transition-duration : 1s;- o : '-o-'transition-duration : 1s; - Prefix Free 플러그인 leaverou.github.io/prefixfree- 폴더 구성->.html, prefixfree.min.js, StyleSheet.css- HTML 페이지 기본 구성 -> 벤더 프릭스를 사용하지 않아도 되게 만들어 주는 라이브러리-> 공급 업체 접두사, 각 브라우저 마다 실험적..

위치 속성- position-- static : 태그가 위에서 아래로 순서대로 배치.box{ position:static }-- relative : 초기 위치 상태에서 상하좌우로 위치 이동.box{ position:relative }-- absolute : 절대 위치 좌표를 설정.box{ position:absolute }-- fixed : 화면을 기준으로 절대 위치 좌표 설정.box{ position:fixed }- z-index.box{position:absolute; z-index: 100}-> 숫자가 클 수록 앞에 위치- 위치 속성 관련 공식-> position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지 하지 않음 => 문제 발생 1. h1 태그 2개가 붙어 있다.(div ..

배경 속성- background-image : 배경에 넣을 그림 지정 body{background-image: url(ewqe.jpg), url(weare.jpg);} -> 여러개의 배경을 적용할 경우 왼쪽에서 부터 위로 올라옴- background-size : 사이즈 조절body{ background-image: url(weare.jpg); background-size: 10%; -> 전체 % 치율 background-size: 10% 50px; -> 높낮이 조절 가능 }body{ background-image: url(ewqe.jpg), url(weare.jpg); background-size: 10%, 50px; -> 쉼표로 조절할 경우 10%는 왼쪽 50px은 오른쪽 그림에 적용 }-- conta..

가시 속성- display 속성-- none : 태그를 화면에 보이지 않게 만든다.#box{display : none;}-- block : 태그를 block 형식으로 지정#box{display : block;}-- inline : 태그를 inline 형식으로 지정#box{display : inline;}-- inline-block : inline-block 형식으로 지정, margin 속성이 div 태그에 의해 차이 벌림#box{display : inline-block; margin: 10px;} - visibility 속성-- visible : 태그를 보이게 만듭니다.#box{visibility: visible;}-- hidden : 태그를 보이지 않게 만듭니다. 영역은 그대로 차지#box{visibi..