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;} /* 사전 설정 값과..
본문 텍스트에 다양한 강조 표기를 통해 여러 형식의 텍스트를 입력할 수 있다. 여러 방식으로 텍스트를 강조할 수 있다. 다만 출력만을 위해서가 아니라, 형식에 따른 의미까지 포함된다. 1. 강조 표기 EM & STORNG (주관적&객관적 강조) See the Pen dxVxJN by ++EXP (@pp_exp) on CodePen. 기존 요소와 요소와를 대신하여 과 을 사용한다. 은굵게 표시되어 강조되고, 은 기울어진 채로 강조된다. 그러나 이 두 요소는 의미마저도 포함하여 강조한다. 은 가장 객관적인 사실로서 강조를, 은 주관적인 감상으로서의 강조를 의미한다. 2. 인용 표기 BLOCKQUOTE, Q, CITE (인용 표기영역, 인용 줄, 인용 출처) See the Pen MNENQd by ++EXP ..
텍스트만으로는 불충분한 설명을 이미지, 동영상, 사운드 등을 통해서 전달할 수 있다. 이미지 요소는 ,비디오 요소는 , 오디오 요소는 를 사용한다. 1. See the Pen PMJMwj by ++EXP (@pp_exp) on CodePen. 는 이미지를 출력할 때 쓰인다. SouRCe 속성으로 이미지 경로의 값을 붙여 넣으면 된다. ALTernate 속성은 이미지가 어떠한 이유로든 출력되지 않을 경우, 혹은 시각장애인과 시각을 사용하지 않는 검색엔진을 대비하여 이미지의 설명을 추가한다. 또한, 빈 태그이므로, 스스로 닫는 표기 "/>"를 사용하여 닫는다. See the Pen WVZVbz by ++EXP (@pp_exp) on CodePen. 그 외에 TITLE 속성을 사용하여 마우스 오버 시 이미지 ..
목록은 문서 내 텍스트 구조를 명확하게 보이는 데 도움을 준다. 내부 문서 구조를 명확하게 하기 위해 사용한다. 가장 기본적인 목록 태그는 로 리스트를 만들 때 사용한다. 그러나 태그 혼자서만 존재하지 않는다. 반드시 목록을 규정하는 혹은 의 하위 요소로서 위치하여야 한다. 반대로, , 의 하위에는 반드시 1개 이상의 가 있어야 한다. 1. 순서가 있는 목록 (Ordered List) See the Pen RXLzZN by ++EXP (@pp_exp) on CodePen. 순서가 있는 리스트 목록을 만들 때 태그를 사용한다. 2. 순서가 없는 목록 (Unordered List) See the Pen RXLXwo by ++EXP (@pp_exp) on CodePen. 순서가 없는 리스트 목록을 만들 때 태..
