말할 것도없이 웹 개발은 거대하다. 그것의 대부분은 거의 모든 사람이 웹에 있기 때문입니다. 그러나 현장에는 개발자가 부족하기 때문에 웹 개발 커리큘럼을 쉽게 이용할 수 있고 무료입니다. 이를 염두에두고 HTML과 CSS가 무엇인지 조금 보여 드리겠습니다. 보다 구체적으로, “클래스”의 작동 방식을 보여 드리겠습니다.
우리는 이미 많은 무료 커리큘럼이 있기 때문에 처음부터 시작하지 않습니다. 대신, 웹 사이트를 스타일링하는 데 필요한 구성 요소이기 때문에 클래스의 작동 방식을 구체적으로 보여줄 것입니다. 또한 클래스는 필수 구성 요소이기 때문에 Twitter의 Bootstrap API에 대한 내용을 게시하기 전에 다루어 볼 가치가 있다고 생각했습니다.
면책 조항으로 HTML과 CSS를 완전히 처음 사용하는 경우 이는 좋은 시작이 아닙니다. 그래도 익숙하다면 픽업하기가 너무 어렵지 않아야합니다. 그러나 완전한 초보자 자습서를 찾고 있다면 온라인에는 훌륭한 옵션이 많이 있습니다. 예를 들어 FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity 등이 있습니다. 그 중 하나에 파고 들기를 선택한다면, 많은“기본”컨텐츠가 꽤 반복적 일 수 있기 때문에 하나 (Free Code Camp와 같은)를 고수하고 다른 것을 시작하기 전에 마무리하는 것이 좋습니다.
그 길을 벗어나서 모든 클래스가 무엇인지 파헤쳐 봅시다.
수업의 작동 방식
수업은 매우 유용합니다. 그들은 스타일링 HTML에서 반복성을 취합니다. 클래스가 없으면 마크 업의 각 요소를 개별적으로 스타일링합니다. 동일한 요소가 두 개이지만 각 요소를 다르게 스타일링하려면 어떻게해야합니까? 완전한 혼란 일 것입니다. 그래서 수업이 있습니다. 클래스는 HTML의 일부 조직 구조를 추가하여 코드를 비교적 깨끗하게 유지할 수 있습니다. 뿐만 아니라 클래스를 두 번 이상 사용할 수 있습니다. 다시 말해, 동일한 스타일 규칙을 두 번 만들 필요가 없습니다.
다음은 수업 내 모습입니다.
꼬리표:
보시다시피 body 태그 아래에 두 가지가 있습니다.
다른 클래스의 요소. 첫번째태그에는“head1”클래스가 있고 두 번째 태그에는“head2”클래스가 있습니다. 따라서 CSS에서 스타일을 적용하는 대신요소별로 개별 클래스에 스타일을 적용 할 수 있습니다. 왜 그렇게하고 싶습니까?
요소별로 개별 클래스에 스타일을 적용 할 수 있습니다. 왜 그렇게하고 싶습니까?
주된 이유는 당신이 모든 것을 원하지 않기 때문입니다
동일한 스타일을 갖는 요소. 웹 사이트를 만들 때 많은 골치 거리가 생길뿐만 아니라 웹 사이트가 그리 좋아 보이지 않을 것입니다. 클래스를 사용하면 태그의 한 인스턴스에만 스타일을 적용 할 수 있습니다.문서 전체의 태그. 그렇다면 어떻게 HTML로 클래스를 작성합니까? 이처럼 :
일부 내용
거의 모든 HTML 요소에 "클래스"속성을 추가 할 수 있습니다.
큰! 우리는 수업을 가지고 있지만 현재 상태에서는 실제로 아무것도하지 않습니다. 클래스에 스타일 규칙을 아직 추가하지 않았기 때문입니다. 그렇게하려면 별도의 .css 문서를 만들어야합니다. 그냥 main.css라고 부르겠습니다. 이 문서에서 우리는 다음과 같은 클래스를 만들 것입니다.
스타일을 지정하려는 클래스를 선택하려면 다음을 수행하십시오.
.head1 {색상 : 빨간색; 텍스트 정렬 : 가운데; }
중괄호 안에는 해당 클래스에 적용되는 모든“규칙”(또는 스타일)이 있습니다. 해당 클래스에 넣을 수있는 다양한 규칙이 있습니다. 필자의 경우 "색상"규칙을 사용하여 텍스트 색상을 빨간색으로 변경하고 "텍스트 정렬"규칙을 사용하여 텍스트를 중앙에 배치했습니다. Mozilla의 개발자 네트워크에서 전체 CSS 규칙 목록과 해당 설명서를 찾을 수 있습니다.
이제 스타일은 여전히 HTML 문서의 클래스에 적용되지 않습니다. 두 파일을 아직 연결하지 않았기 때문입니다. HTML 파일로 돌아가서
태그를 사용하려면 다음을 수행하여 CSS 파일을 연결해야합니다.
HTML 문서는 다음과 같아야합니다.
그리고 테스트 프로젝트는 웹에서 다음과 같아야합니다.
이 단계를 수행하는 자세한 비디오는 아래를 참조하십시오.
비디오
결론
그리고 그것이 수업에 전부 있습니다! 정말 이해하기 쉽습니다. 분명히 당신이 방문하는 크고 인기있는 웹 사이트에서 클래스 내의 규칙은 우리가 다루는 것보다 훨씬 더 복잡하지만 가장 기본적인 형태로 작동하는 방식입니다.
궁금한 점이 있거나 오래 지속되는 데 어려움이 있다면, PCMech 포럼에서 아래의 의견이나 의견을 통해 알려주십시오! 또는 PCMech에 대한 완전한 HTML / CSS 초보자 가이드에 관심이 있으시면 저희에게도 알려주십시오!
