Development/Web, WWW(447)
-
임포트 삽입형(Import style), @import 사용
임포트 삽입형(Import style)· 외부에 스타일 파일을 만들고 연결하는 또 하나의 방식입니다.· style태그안에서 외부 스타일을 임포트(import)할 수 있게 해 줍니다. @import 사용· 영역 내에 있는 태그 안에서 사용합니다.· “@import”선언이 다른 스타일시트보다 먼저 선언되어야 합니다.· url 안에 .css경로를 지정해 줍니다. 파일의 url"; 또는 @import "파일명"; //]]>
-
외부 경로 삽입형(link style), <Link> 태그
외부 경로 삽입형(link style)· 외부 스타일 시트(External Style Sheet)라고도 합니다.· 외부에 스타일 파일을 만들고 연결하는 방식입니다.· 홈페이지 전체의 스타일을 일관성있게 유지할수 있습니다.· 외부의 존재하는 스타일 시트파일은 지속적으로 관리해 주어야 합니다. 태그 영역에 태그를 사용하여 외부에 있는 스타일시트 파일(.css 확장자) 참조하도록 작성합니다. 구분 설명 link rel="stylesheet" 스타일시트 파일이 링크되어 있음을 의미 type="text/css" CSS 파일이 텍스트 포맷으로 되어 있음을 의미 href="파일명.css" CSS 파일의 경로(상대 경로나 절대 경로)
-
문서 내 지정형(Embedding style)
문서 내 지정형(Embedding style)· 내부 스타일 시트(Internal Style Sheet)라고도 합니다.· HTML문서안에서 별도 영역으로 스타일을 정의하며 일반적으로 사이에 스타일을 정의합니다.· 처럼 사용하는 것이 표준입니다.· HTML문서마다 스타일을 지정해 주어야 하지만, HTML 한 문서에만 적용되는 스타일을 지정할 때 편리하고 간단하게 동일한 서식을 적용할 수 있습니다.
-
태그 내부 삽입형(ln-line style)
태그 내부 삽입형(ln-line style)· 기존의 태그 요소안에 직접 style 속성을 정의하는 방법입니다. 즉, HTML 태그와 섞어서 스타일을 사용합니다.· 태그에 직접 적용하므로 직관적으로 사용이 가능하다는 장점이 있지만 내용과 스타일을 분리하여 스타일을 일괄적으로 적용 및 관리하는 측면에서는 효율적이지 않습니다.· 직관적인 방법이며 CSS목적과는 덜 부합되지만 오류 수정등에 적절히 사용하면 유용합니다. HELLO
-
id 속성과 class 속성, id vs class
id 속성과 class 속성· 모든 태그에는 id 속성과 class 속성을 지정할 수 있습니다.· 이 속성을 사용하면 CSS나 JavaScript등에서 태그를 좀더 쉽게 다룰 수 있습니다. id vs class DOCTYPE html> id,class 선택자에 따라 스타일 적용 #idName { width: 200px; height: 100px; border: 2px solid magenta; } .className { width: 100px; height: 50px; background-color: #0099ff; border: 1px solid green; } idName className1 className2
-
ID 선택자 - id를 선택자로 사용
ID 선택자 - id를 선택자로 사용· id 요소를 호출할 수 있는 스타일 정의· 원하는 HTML 태그에 모두 적용 가능· 지정된 id 하나의 객체에만 한번만 적용· 자바스크립트 함수에서 객체를 사용할 수 있도록 특정 페이지상에서 특정 HTML 태그에 한 번만 적용· 샵(#)을 이용하여 정의하며 반드시 영문으로 시작하는 아이디 이름을 작성 #wrapper { width: 800px; display: block; position: static; } 아이디선택자