Loading…

css 실전 예제

다른 것과 마찬가지로 자신의 웹 사이트에 가장 적합한 것을 결정하십시오. 그러나 블로그를 작성하는 경우 기사 제목에 H1 태그를 저장하는 것이 좋습니다. SEO 목적을 위해, 이것은 더 나은 연습 – 내 의견으로는. CSS로 스타일을 지정할 때 가장 멋진 점은 요소를 만들 때마다 스타일을 지정할 필요가 없다는 것입니다. “모든 단락은 이 특정 한 스타일을 가져야합니다”라고 말할 수 있으며 갈 수 있습니다. 다음은 이 작업을 수행하는 방법의 예입니다. 추가 하지 않고 태그 작성 시 관찰할 30가지 모범 사례를 살펴보겠습니다. 또한 이미지에 의미 있는 값이 없는 경우(예: 사용자 인터페이스의 일부일 수 있습니다)는 요소가 아니라 가능한 경우 CSS 배경 이미지로 포함해야 합니다. 아름다운 HTML과 CSS를 작성하는 원칙이 여기에서 명확해지기 를 바랍니다.

각 언어에는 고유한 복잡성이 있지만 이러한 관행의 대부분은 두 언어와 다른 많은 컴퓨터 언어로 공유할 수 있습니다. 이러한 질문은 HTML을 방금 배웠지만 아직 CSS를 배운 사람들을 대상으로합니다. CSS를 포함하는 고급 문제는 이 연습 테스트의 후반부에서 사용할 수 있습니다(목차 참조). 래핑 UL/OL 태그가 생략된 방법을 확인합니다. 또한 많은 사람들이 닫는 LI 태그를 떠나기로 결정했습니다. 오늘날의 기준에 따르면, 이것은 단순히 나쁜 관행이며 100 % 피해야합니다. 항상 태그를 닫아야 합니다. 그렇지 않으면 매 턴마다 유효성 검사 및 결함 문제가 발생합니다. 이러한 모범 사례를 검토할 때 다른 영역이나 프로그래밍 언어에서도 사용할 수 있는 방법에 대해 생각해 보십시오. 예를 들어, 이 단원에서 다루는 대로 코드를 구성하는 주석을 사용하는 것은 모든 프로그래밍 언어에서 유용합니다. 열린 사고 방식을 유지하고 각 연습을 완전히 활용할 수있는 방법을 고려하십시오.

틀림없이, 이것은 내가 느슨하게하는 경향이 뭔가이다. 이러한 태그 6개 모두를 사용하는 것이 좋습니다. 솔직히 말해서, 나는 보통 상위 4 개만 구현합니다. 하지만 난 그것에 노력하고 있어요! 🙂 의미 체계 및 SEO 상의 이유로 인해 해당 P 태그를 적절한 경우 H6로 바꾸도록 합니다. 마지막 예는 img:hover 대신 img.hover 🙂 배경 색은 배경 색으로 설정되고 텍스트 색상은 색상으로 설정됩니다. 패딩은 상자의 크기를 정의합니다 – 텍스트는 세로로 10px 및 25px가로 패딩됩니다. 텍스트 정렬을 사용하면 텍스트가 한쪽으로 꺼지 않고 단추 가운데에 표시됩니다. 마지막 예제에서 보았듯이 텍스트 장식은 밑줄을 제거합니다. w3resource에서 HTML 및 CSS 자습서를 공부하는 것과 함께 프론트 엔드 개발 기술을 연마하기 위해 HTML 및 CSS를 광범위하게 연습해야합니다.

다음은 지금까지 게시한 연습 목록입니다. RSS 피드를 구독하여 더 많은 운동을 하십시오. CSS의 한 가지 특징은 약식 속성 및 값을 사용하는 기능입니다. 대부분의 속성 및 값에는 허용 가능한 약식 대안이 있습니다. 예를 들어 네 개의 서로 다른 margin 기반 속성 및 값 선언을 사용하여 요소의 네 면 모두에 대한 여백을 설정하는 대신 한 번에 네 면모두에 대한 값을 설정하는 하나의 단일 여백 속성 및 값 선언을 사용합니다. 약어 대안을 사용하면 스타일을 신속하게 설정하고 식별할 수 있습니다. HTML과 마찬가지로 CSS의 코딩 방법은 코드를 간결하고 잘 정리하는 데 중점을 둡니다. CSS는 또한 언어의 복잡한 일부 작업 방법에 관한 몇 가지 추가 원칙을 가지고 있습니다.

예를 들어 이 웹 사이트의 내 버전에서 브라우저 창의 크기를 조정하면 특정 중단점에 도달한 사용자에게 배경 색을 표시기로 사용하도록 선택했습니다.