Amazing Story

(5) 패딩(padding)과 마진(margin) 1) padding- 테두리와 콘텐츠 사이의 여백을 표현- 패딩은 top, right, bottom, left 네방향을 설정 2) margin- 테두리 바깥쪽 여백을 표현- 요소와 요소사이의 여백을 표현- 마진은 top, right, bottom, left 네방향을 설정 3)마진과 패딩은 작성법이 동일 margin:10px; → 모든방향이 마진 10px; margin:10px 20px; → 상하, 좌우 동일 margin:10px 20px 30px; → 상, 좌우, 하 margin:10px 20px 30px 40px; → 상, 우, 하, 좌 margin-top: margin-right: margin-bottom: margin-left: ■ 예시1 12345..

(4) border(테두리)란- 테두리 표현시 동서남북 네방향을 설정할 수 있으며 다음과 같은 값을 설정할 수 있다1) 선의 두께 : border-width2) 선의 종류 : border-style3) 선의 색상 : border-color (참고1)테두리 설정방향은 4방향 : top, right, bottom, left 작성1) 방향이 지정되지 않은 경우border : width style color; 작성2) 방향이 지정된 경우border-방향 : width style color; (참고2)선의 종류- solid(실선)- dotted(점선)- dashed(간격이 좁고 그려지는 라인이 긴 형태) (참고3) border를 없애는 경우- border: none;- border : 0 none; (→ 권장) ..

4. Box model(박스모델) - CSS가 HTML문서를 제어할 때 사용하는 기본단위는 Element이며 이때 요소를 네모상자(box)로 취급하여 모든 스타일의 기본 속성(1) 박스모델의 종류1) width, height → content 크기2) padding → 테두리와 콘텐츠와의 여백3) margin → 테두리 바깥쪽 여백4) border → 요소의 테두리5) background (2) 모든 브라우저는 사용자가 스타일을 적용하지 않더라도 기본값(초기값)이 적용된 상태- 여백을 최소화(0으로 셋팅)- margin, padding → 0으로 셋팅- border → 일부요소를 제외하고 테두리값은 없음 (참고1) 크롬(chrome) 브라우저 이용하기- 해당요소에서 마우스 우클릭(또는 F12)하여 검사-..

3. 스타일 겹침과 우선순위(1) 스타일 겹침- 스타일 겹침은 같은 요소로 동일한 선택자로 서로 다른 값이 적용될 경우 가장 마지막에 적용된 값이 우선한다.(2) 스타일 우선순위- 스타일 우선순위는 서로 다른 선택자로 같은 요소에 스타일을 적용할 경우 우선순위에 의해서 스타일이 적용되며 작성순서는 무시된다.1) 인라인 스타일2) 아이디 선택자3) 클래스 선택자4) 요소 선택자(3) 스타일 겹침과 우선순위 무시하고 스타일 적용하기- 스타일 겹침과 우선순위 무시하고 특정 스타일 값을 항상 적용하고자 할 때는 스타일 값 작성 후에 !important 를 써주면 된다.- 작성 방법 : 선택자{속성 : 값 !important;} ■ 예시 123456789101112131415161718192021222324252..

(7) 조합 선택자- 조합 선택자는 기본선택자 2개 이상을 한 번에 사용하는 선택자1) 조합 선택자의 종류- 그룹 선택자- 자식 선택자- 자손(하위) 선택자- 인접 형제 선택자2) 그룹 선택자- 그룹 선택자는 서로 다른 선택자가 같은 스타일을 적용할 경우 개별작성하지않고, 선택자를 콤마(,)로 연결하여 한 번에 스타일을 적용하는 방법 ■ 그룹 선택자 사용시, 선택자와 선택자는 콤마(,)로 연결하여 다음과 같이 작성→ 선택자1, 선택자2, 선택자3{} 12345678910111213141516171819202122조합 선택자 /* 그룹 선택자 */ .a1, .a2{color : #f00;} .a3, .a4, .a5, .a6, .a7{font-size : 20px;} .a1, .a2, .a3, .a4, .a..

(5) 가상클래스- 가상클래스 : 가상클래스는 요소의 이벤트에 대응하기 위하여 미리 만들어 놓은 클래스다1) 가상클래스의 종류- link : 하이퍼링크가 적용된 요소- visited : 링크 요소를 한 번 이상 방문한 요소- hover : 요소에 마우스가 올라간 상태- active : 링크 요소가 활성화된 상태 / 마우스가 누르고 있을 때- focus : 폼요소가 선택된 상태, 입력대기모드 2) 사용법- 선택자로 사용시 요소명 :가상클래스이름과 같이 사용한다.- 선택자로 사용시 요소명 대신에 아이디 또는 클래스 선택자가 올 수 있다.3) 사용 예제 12345678910111213141516171819202122가상클래스 /* 가상 클래스 */ a:link{color: #000;} .visited:visi..

2. 선택자(Selector)- 선택자란 내부, 외부 스타일에서 CSS가 HTML요소를 선택하기 위한 수단 ■ 선택자의 종류 1) 기본 선택자 - 전체 선택자 - 요소 선택자 - id 선택자 - class 선택자 - 가상 클래스 - 가상 요소 2) 조합 선택자 - 그룹 선택자 - 자식 선택자 - 하위(자손) 선택자 - 인접 형제 선택자 (1) 전체 선택자 - 전체 선택자는 문서의 모든 요소를 선택할 때 사용하고 선택자로 *를 사용한다. 123456789101112 (2) 요소 선택자 - 요소 선택자는 문서의 특정요소를 선택자로 요소명을 사용한다. - 요소 선택자 사용시 문서의 지정된 요소는 모두 선택된다. (3) id 선택자- 요소에 id속성, id이름을 생성하고 id이름을 선택자로 사용한다.- id이름..

1. 스타일이란?스타일이란 HTML요소를 디자인하기 위한 개념이며 이때 언어는 CSS를 사용한다.CSS는 HTML요소를 디자인하기 위한 언어. CSS는 레벨1, 레벨2, 레벨3까지 나와있으나 레벨3은 완성이 아님.CSS 레벨2는 현재 모든 브라우저가 정상 지원하며 CSS3는 브라우저마다 지원상태가 다를 수 있다. 브라우저간 CSS값을 화면에 표시할 때 100% 똑같이 표현하지 않으며, 모든 브라우저별로 다르다. 이를 똑같은 결과값을 만들어내는 작업이 크로스 브라우징이라 한다.( 가장 까다로움) 사용자가 스타일을 사용하지 않을 때 모든 브라우저에는 스타일 초기값이 셋팅되어 HTML 요소를 화면에 표시한다. CSS는 독립언어가 아니며 HTML 문서 안에서만 동작하는 의존언어다. (1) HTML요소에서 스타일..

기존 HTML과 HTML5의 가장 큰 차이는 다음과 같습니다. 1. 새로운 구조요소 추가(시멘틱마크업이 세분화됨)2. 자바스크립트가 공식 스크립트 언어가 됨3. canvas 그림그리기 기능추가4. 하드웨어 컨트롤 기능추가 그 중에서도 중요한 건! 바로 시멘틱(Semantic)마크업입니다.그림과 표로 한 번 살펴보겠습니다. ■ HTML5 레이아웃 요소- header : 헤딩요소- main : 웹 사이트 주요 콘텐츠- footer : 푸터요소- nav : 메뉴요소, gnb, lnb- section : 콘텐츠를 묶는 의미적 그룹요소- article : 독립적으로 배포/재사용이 가능한 요소 => 뉴스, 게시물- sidebar : 주요콘텐츠와 내용이 관련이 없으며 분리가 가능한 요소 : 퀵메뉴 ■ 기존 구조와 H..

10. 멀티미디어 태그 (1) 비디오 태그■ 기본 형식 1 ■ 다른 형식 12345 Your browser does not support the video tag. - controls 속성은 비디오의 컨트롤바를 보게게해주는 속성으로 사용하지 않으면 컨트롤바가 표시되지 않음. 현재 대부분의 브라우저에서 .mp4포맷의 영상을 디코딩하는 코덱을 지원하긴 하나, 해당 코덱을 지원하지 않는 브라우저에서는 영상을 재생할 수 없음. (2) 오디오 태그■ 기본 형식 1 ■ 다른 형식 12345 Your browser does not support the audio tag. - 비디오와 오디오태그의 속성은 거의 비슷하다. 경로를 정확히 작성할 경우 실행이 되나, 경로를 작성을 제대로 못할 경우와 파일의 코덱이 잘되지 않..