(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) 리스트 타입 지정하기 .circle { list-style-type: circle; } .square { list-style-type: square; } .upperAlpha { list-style-type: upper-alpha; } .lowerRoman { list-style-type: lower-roman; } 리스트의 스타일의 종류를 지정할 수 있다. 단, UL(Unordered List)와 OL(Ordered List)는 서로 갖는 속성값이 다르므로 주의가 필요하다. 속성명 요소 종류 값 설명 list-style-type ul disc 작은 검은색 원 circle 작은 흰색 원 square 사각형 ol decimal 숫자(기본값) upper-alpha 영문 대문자 lower-alpha 영..
1.색 표현 법 (1) 색상 이름으로 표현 색 이름 aqua blue lime purple white teal olive green black fuchsia navy silver yellow red maroon gray 사전 설정된 컬러 값으로 표현함. 위 표기는 html4.0에서 적용된 14개의 기본 컬러이다. 또한 웹 브라우저에는 별도로 여러 색상들이 정의되었으며, 특정한 브라우저에서는 이런 색상을 인식하지 못할 수도 있다. 그러므로 사용시에는 컬러 이름으로 지정하는 것 보다 hex코드로 입력하는 것을 추천한다. (2) RGB 색상값으로 표현 RGB 표현 예시 h1{ color: rgb(0,128,0); } h2{ color: rgb(192,192,192); } RGB값으로 색을 표기하는 방식. 순서..
1_FONT 속성 (1) 서체(font-family) See the Pen aeVoYV by ++EXP (@pp_exp) on CodePen. FONT 속성은 서체와 관련된 속성으로, 종류, 스타일, 작성 형태, 크기, 굵기 등을 지정할 수 있다. 국가별로 분류되는 방식과 시스템 내에서 읽히는 방식의 문제 때문에 다수의 폰트를 지정한다. (만약 앞서 폰트가 없다면, 뒤의 폰트로 읽는다.) 한글 폰트는 한글-영문의 순서로 입력하며, 한글 혹은 공백이 포함된 경우, 따옴표로 묶어준다. 영문 폰트는 폰트 종류를 입력하고 공백이 포함된 경우 쌍따옴표로 묶어준다. 또한 영문 폰트는 여기에 서체의 종류(generic-family)를 지정할 수 있고, 종류는 다음과 같다. font-family 사전 설정 값 설명 s..
1. 기본적인 선택자의 종류 - 전체 선택자 (*) 선택자 설명 * '*'는 존재하는 전체 요소에 사용하는 선택자로, 전체 요소에 적용시키는 만큼, 선택자들 중에 그 무엇보다도 우선하지 않는다. - 후손 선택자 ( ) 와 자식 선택자 (>) 선택자 설명 ul li ul의 후손인 li 요소를 모두 선택한다. (띄어쓰기 공백으로 구분한다.) ul>li ul의 자식인 li만 선택한다. = 자식 아래의 자손은 선택하지 않는다. - 형제 선택자 (+ ~) 선택자 설명 H1 + P 인접 형제 선택자 : h1의 바로 뒤에 있는 P요소를 선택한다. (즉, H1이후에 P요소가 아닌 SPAN요소가 있을 때는 선택하지 않는다.) H1 ~ P 일반 형제 선택자 : h1의 바로 뒤부터 이하의 모든 P요소를 선택한다. ( H1 ..
1. CSS 문서의 삽입 (1) 내부 스타일시트 (2) 외부 스타일시트 CSS를 사용하기에 앞서서, CSS문서를 HTML이 읽도록 하기 위해서는 반드시 문서 내에서 호출이 이루어져야 한다. 여기서 방법이 두 가지가 있는데, 하나는 내부 문서에서 CSS를 직접 작성하는 방법(내부 스타일시트)과, 외부 문서로 만들어서 연결하는 방법(외부 스타일시트)이 있다. HTML5 웹표준에서 권장하고 있는 것은 외부스타일시트이다. 이 외에도 HTML 태그의 STYLE 속성으로 처리하는 요소가 있는데, 이 경우를 인라인(INLINE)이라고 한다. 일부 파일 속성을 제외하고 HTML5웹 표준에 위반하므로 사용을 지양해야 한다. 2. CSS 기본규칙 : 선택자와 선언부 (1) 선택자{ 선언부 } - 선택자{선언부} 선택자{속..
(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;} /* 사전 설정 값과..
