프론트엔드 개발에서 CSS는 필수적인 부분입니다. CSS는 웹 페이지에 스타일을 추가하고, 페이지를 더욱 아름답게 만들고, 웹 페이지를 더욱 전문적이고 사용자가 쉽게 액세스할 수 있도록 도와줍니다. 이번 글에서는 CSS를 호출하는 방법을 살펴보겠습니다. 1. 인라인 스타일 CSS는 HTML의 태그에 작성할 수 있습니다. 이러한 유형의 CSS를 인라인 스타일이라고 합니다. 인라인 스타일은 개별 요소의 스타일을 지정하는 데 적합하며 우선순위가 가장 높습니다. </p> <p>//HTML code<br><div style="Background-color: red; color: white;">이것은 div 요소입니다</div></p> <p>위의 예에서는 배경색에 인라인 스타일을 사용합니다. div의 색상은 빨간색으로 설정되고 텍스트 색상은 흰색으로 설정됩니다. 인라인 스타일은 가능한 한 적게 사용해야 한다는 점에 유의해야 합니다. 그렇지 않으면 HTML 코드가 길어지고 유지 관리가 어려워집니다. </p> <p>2. 임베디드 스타일</p> <p>CSS는 HTML 문서의 <head> 태그에도 작성할 수 있습니다. 이러한 유형의 CSS를 임베디드 스타일이라고 합니다. 인라인 스타일은 여러 요소의 스타일을 지정하는 데 적합하며 우선순위가 중간입니다. </p> <p>//HTML code<br><head></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><style> div { background-color: blue; color: white; } p { font-size: 14px; } 로그인 후 복사 这是一个 div 元素 这是一个 p 元素로그인 후 복사로그인 후 복사 위 예에서는 인라인 스타일을 사용하여 배경색을 변경했습니다. div 파란색으로, 텍스트 색상을 흰색으로 설정하고 p의 글꼴 크기를 14px로 설정합니다. 내장된 스타일은 외부에서 참조할 수 없으므로 통합 관리에 편리하지 않습니다. 3. 외부 스타일 시트 가장 좋은 방법은 CSS를 외부 스타일 시트에 작성한 다음 별도의 링크를 통해 외부 스타일 시트를 가리키는 것입니다. 이렇게 하면 HTML 코드가 더욱 간결해질 뿐만 아니라 스타일의 통합 관리도 더 잘 이루어집니다. // HTML 코드 로그인 후 복사 这是一个 div 元素 这是一个 p 元素로그인 후 복사로그인 후 복사 // style.css 코드 div { background-color: green; color: white;로그인 후 복사 }p { font-size: 16px;로그인 후 복사 } 위 예에서는 별도의 style.css 파일에 CSS를 작성한 다음 링크를 통해 HTML 문서와 연결했습니다. 외부 스타일 시트는 전체 웹사이트의 스타일을 지정하는 데 적합하며 여러 HTML 문서에서 공유할 수 있다는 점에 유의해야 합니다. 요약 인라인 스타일이든, 내장 스타일이든, 외부 스타일 시트이든 이를 통해 CSS 스타일을 호출할 수 있습니다. 그러나 실제 상황에 따라 다른 방법을 선택해야 합니다. 인라인 스타일은 개별 요소의 스타일을 지정하는 데 적합하고, 포함된 스타일은 여러 요소의 스타일을 지정하는 데 적합합니다. 외부 스타일 시트는 전체 웹사이트의 스타일을 지정하는 데 적합하며 여러 HTML 문서에서 공유할 수 있습니다.
