CSS3 CSS 사용하는 3가지 방법 CSS 사용하기 CSS를 사용하는 방법에는 크게 세 가지 방법이 있습니다. 1. 내부 스타일 시트 사용하기 2. 외부 스타일 시트 사용하기 3. 인라인 스타일 사용하기 위 세 방법을 알아보겠습니다. 내부 스타일 시트 사용하기 내부 스타일 시트는 HTML 파일 내부에 CSS 코드를 작성하는 방법입니다. HTML에서 제공하는 style 태그를 이용하여 CSS 코드를 작성하면 됩니다. 실제 코드에서 내부 스타일 시트 사용하는 방법은 다음과 같습니다. HTML 파일에 head 태그에 스타일을 지정하는 것입니다. 내부 스타일 시트 HTML 삽입 미리보기할 수 없는 소스 외부 스타일 시트 사용하기 외부 스타일 시트는 CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 연결하는 방법입니다. 이때 별도 파일의 .. 2023. 1. 8. CSS 선택자 CSS 선택자 CSS 선택자(selector)는 HTML에 스타일을 적용할 때 HTML 요소를 지정하는 역할을 합니다. 예를 들어 p 태그에 스타일을 적용하고 싶을 때 p태그를 선택합니다. 이때 p가 선택자가 되는 것입니다. p { color: color; } 사례 VSCode에서 코딩한 내용을 옮겨봅니다. HTML 삽입 미리보기할 수 없는 소스 소스 코드 index.html 소스 코드는 다음과 같습니다. 안녕하세요 style.css 내용은 아래와 같습니다. h1{ color:red; } CSS 선택자의 종류 CSS 선택자의 종류에는 5가지 방법이 있습니다. 전체 선택자 유형 선택자 아이디 선택자 클래스 선택자 복합 선택자 1. 전체 선택자는 모든 HTML 문서에 스타일을 적용합니다. 특정 태그 대신 '.. 2023. 1. 7. CSS가 왜 필요할까? CSS는? HTML로 웹페이지를 원하는 글이나 그림을 넣는 방법을 익혔습니다. 만든 HTML 페이지를 더 예쁘게 꾸미고 싶다면 CSS를 통해 원하는 웹 페이지를 만들 수 있습니다. CSS는 HTML 문서를 시각적으로 꾸미는 언어입니다. 왜 HTML에 꾸미기 기능을 넣지 않고 CSS를 별도로 만들까요? HTML 코드와 꾸미기 코드를 별도로 분리하면 가독성과 효율성 모두 높아지기 때문입니다. 두 기능을 함께 섞어놓으면 꾸미기를 변경할 때 일일이 코드를 뒤져서 수정해야 합니다. 하지만 꾸미기 코드를 분리하면 꾸미기 코드 관리가 쉬어집니다. 꾸미기 코드를 따로 분리하면 HTML 구조 자체에 집중할 수 있고, 꾸미기는 CSS를 통해 변경하면 됩니다. CSS 적용하기 문단에 글자 색을 빨강색으로 CSS를 이용하여 .. 2023. 1. 6. 이전 1 다음
