웹페이지 제작에 있어 CSS(Cascading Style Sheets)는 웹페이지의 스타일과 레이아웃을 제어하는 데 사용되는 언어로, 웹페이지의 미화와 호환성을 구현하고 프런트엔드 개발 작업을 크게 촉진합니다. 이번 글에서는 CSS를 참조하는 방법을 소개하겠습니다. 1. 내부 스타일 시트 내부 스타일 시트는 CSS 스타일 시트를 HTML 문서에 포함합니다. 내부 스타일 시트를 사용하여 태그에 태그를 만들고 다음과 같이 CSS 코드를 작성해야 합니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><head> <style> h1 { color: red; font-size: 36px; } 로그인 후 복사 이렇게 하면 h1 요소의 텍스트 색상이 설정됩니다. 빨간색으로 변경되었으며 글꼴 크기는 36픽셀입니다. 이 방법은 현재 페이지에만 사용할 수 있으며 동일한 스타일을 공유하는 여러 페이지에는 적합하지 않습니다. 2. 외부 스타일 시트외부 스타일 시트는 CSS 스타일 시트를 별도의 파일에 저장한 후 HTML 문서에서 해당 파일을 참조합니다. 외부 스타일 시트를 사용하려면 태그에 태그를 추가하고 다음과 같이 href 속성에 CSS 파일 경로를 지정해야 합니다. 로그인 후 복사styles.css 파일에서 모든 페이지에서 사용해야 하는 CSS 스타일을 작성할 수 있습니다. 예: h1 { color: red; font-size: 36px; }로그인 후 복사 이렇게 하면 styles.css를 참조하는 모든 페이지의 h1 요소 텍스트가 빨간색으로 설정되고 글꼴 크기는 36픽셀이 됩니다. 3. 인라인 스타일 시트인라인 스타일 시트는 CSS 스타일을 요소의 속성으로 정의합니다. 인라인 스타일 시트를 사용하여 다음과 같이 HTML 태그에서 직접 스타일 속성을 사용합니다. Hello World!로그인 후 복사이 방법으로 h1 요소의 텍스트 색상은 빨간색으로 설정되고 글꼴 크기는 36픽셀입니다. 인라인 스타일 시트를 과도하게 사용하는 것은 유지 관리가 번거롭고 여러 요소에 동일한 CSS 스타일을 사용하는 데 도움이 되지 않으므로 피해야 합니다. 요약: 위 세 가지 방법의 경우 단일 페이지에서 사용되는 스타일에는 내부 스타일 시트가 적합하고, 여러 페이지에서 공유되는 스타일에는 외부 스타일 시트가 적합하며, 개인화된 스타일 설정에는 인라인 스타일 시트가 적합합니다. 이러한 방법을 능숙하게 사용하면 프런트엔드 개발 작업을 보다 효율적이고 표준화할 수 있습니다.
