(1) 기본 레이아웃 만들기 1단계 See the Pen 레이아웃 만들기 1단계 by ++EXP (@pp_exp) on CodePen. - 가장 큰 형태의 크기 부여 - HEADER / IMGSLIDER / MAIN / SECTION / FOOTER 순서대로 사이즈 및 영역 지정. (2)기본 레이아웃 만들기 2단계 See the Pen 레이아웃 만들기 2단계 by ++EXP (@pp_exp) on CodePen. - 세부 리스트 제작 및 서브 메뉴 작성 (3)기본 레이아웃 만들기 3단계 See the Pen 레이아웃 만들기 3단계 by ++EXP (@pp_exp) on CodePen. - FLOAT 속성으로 좌우 배열 실시 (4)기본 레이아웃 만들기 4단계 See the Pen 레이아웃 만들기 4단계 b..
1. 레이아웃 작성 순서의 요령 (1) html요소는 부모부터 자식 순서로 만든다. (계층 구조에 주의!) (main 메뉴 혹은 submenu)- - list&컨텐츠 - a태그로 마무리 1단계 2단계 3단계 4단계 5단계 시멘틱 태그 & id 내부 class (main menu) 내부 class (sub menu) 컨텐츠 (이미지와 텍스트) a태그 (2) css는 크기&넓이, - 배치 속성 - 세부 조정 순서로 만든다. 단, 제작시 초기화 하는 요소에 주의한다. 작성 순서 : 폭과 높이 / 배치 속성(float,position) / 세부 조정 1단계 2단계 3단계 4단계 width&height float & clear margin&padding position : absolute top & left ma..
(1) 시멘틱 요소(SEMENTIC) 공간 분할에 사용하는 요소는 공간을 분할하는 것 외에는 아무런 의미가 없었다. 그래서 HTML5에서는 의미를 전달하는 새로운 요소를 만들어 사용하기 시작했고, 이를 시멘틱(의미론적) 요소라고 한다. (2) 시멘틱 요소의 종류와 이해 요소명 설명 header 사이트 소개, 정보, 메뉴, 로고 등을 포함하는 공간. 하나의 문서에 여러개의 헤더를 만들 수 있다. nav 웹 사이트의 탐색 링크의 집합 공간 main 웹 문서 전체의 주요 컨텐츠가 위치하는 공간요소. 문서에서 단 한개만 사용이 가능하다. aside 주요 컨텐츠 '외'의 내용을 정의하는 공간. section 한 주제에 대한 '영역'을 지정하는 공간요소. 반드시 제목 요소가 포함되어야 한다. section 과 ar..
(1-1) position:absolute 또는 fixed; top:50% left 50% / margin-top:-height/2 margin-left: -width/2 See the Pen 가운데 정렬 (position) by ++EXP (@pp_exp) on CodePen. position 속성을 이용해 top, left 속성을 적용하고, margin-top/left로 대상 요소의 정 중앙을 맞추어 중앙정렬을 실시. 만약 부모 개체가 존재한다면, position:relative를 사용하여 배열할 수 있다. (1-2) transform: translate(-50%, -50%); See the Pen 가운데 정렬 (position) (2) by ++EXP (@pp_exp) on CodePen. 위 방법..
FLOAT 속성의 설명 : 띄우기 1. 이미지의 형태에 맞는 텍스트 요소 붙이기 See the Pen float 속성의 사용(1) by ++EXP (@pp_exp) on CodePen. 2. block 요소의 좌우 배열에 사용한다. See the Pen block 요소의 좌우 배열에 사용하기 by ++EXP (@pp_exp) on CodePen. 3. float와 clear 속성의 사용. 레이아웃 배치시 사용되는 방법들. See the Pen float 속성 : 분할배열하기(1) by ++EXP (@pp_exp) on CodePen. - float:속성에 사용할 수 있는 값들 - left / right - flaoat:속성 뒤에 맞는 clear 속성 만들기 :left :right :both See the..
position속성의 활용 (1) 텍스트와 이미지 겹치기 See the Pen WNNejNj by ++EXP (@pp_exp) on CodePen. (2) 슬라이드 쇼 : 틀이 있는 겹침 이미지 만들기 See the Pen qBBWmoB by ++EXP (@pp_exp) on CodePen. 슬라이드 쇼 만들기에서 주로 사용하는 틀-배경 움직임 요소 만들기. 부모 요소에는 position:relative를 지정 후, 자식 요소에는 position:absolute 요소를 지정할 수 있다. 단, 이전에 position요소를 선언한 적이 있다면, 위치를 가릴 수 있으므로, z-index 속성을 반드시 끼워 넣어야 한다. (3) 고정 사이드 바 만들기. See the Pen 고정 사이드 바 by ++EXP (@..
(1) POSITION 속성 사용하기 - position:none : 속성 값 없음 See the Pen position 속성 사용하기 by ++EXP (@pp_exp) on CodePen. - position:absolute : 절대좌표-브라우저의 최외곽 최상단(0,0)에 위치하고, 스스로가 위치하는 영역이 없다. 주로 메뉴 바 등 영역에 지장을 주지 않는 부분에 사용된다. - position:relative : 상대 좌표-(현 위치 = 0,0)을 기준으로 위치하고, 스스로 위치하는 영역이 있다. 주로 슬라이드 쇼 영역 지정 등에 활용된다. - position:fixed : 고정좌표- 절대 좌표 기준으로 배열되지만, 화면 내에서 위치가 변하지 않는다. 주로 팝업 창 속성 제작에 사용된다. (2) top..
(1) box model(박스 모델) 속성명 설명 width&height contents 영역의 크기 지정. margin 다른 요소의 거리 지정. padding 컨텐츠와 border 사이의 거리 지정. border 외곽선을 설정하는 요소. contents와 padding 사이에 있다. See the Pen 박스 모델 by ++EXP (@pp_exp) on CodePen. (2) 마진겹침현상 See the Pen 마진겹침현상 by ++EXP (@pp_exp) on CodePen. top-margin의 영역이 겹치는 현상을 말한다. 일반적으로 margin - top의 겹침 현상이 일어나며, 각 위치에 따라 겹침 현상이 나타날 수 있다. 1) 처음 출력한 요소의 bottom과 그 다음 요소의 top이 겹치는 ..
(1) 요소와 속성과의 관계 "css 문서가 없어도 요소는 속성을 갖고 있다." 크롬 개발자 도구를 통해 사전 설정된 값을 확인할 수 있다. (2) 대표적인 display 속성 1) display:none; == 출력하지 않는다. h2{ display : none; } 설정된 요소를 html 태그에서 출력하지 않는다. 이 속성값은 html 문서에서 삭제하는 것이 아니라 출력에서 배제한다. javascript 등을 사용하여 동적으로 제어할 때, 본 옵션을 켜고 끄는 것으로 동적 제어를 실시한다. 2) 3개의 기본속성 ( block, inline, inline-block ) h1{ display:block;} /* 사전 설정 값과 동일한 설정 */ span{display:inline;} /* 사전 설정 값과..
