비디오: [CSS 기초와 활용] 구글 클론 사이트 만들기 (feat. 개발자도구, Bootstrap, codepen 등) 2024
HTML 프레임 워크를 사용하면 CSS 작업을 시작하여 사이트에서 페이지 스타일을 만들 수 있습니다. CSS3를 통합하는 가장 좋은 방법은 다음 단계를 따르는 것입니다.
-
페이지 템플릿 다이어그램부터 시작하십시오.
필요한 모든 정보가 있어야합니다.
-
브라우저에서 CSS를 테스트하십시오.
간단한 CSS 구현으로 시작하여 모든 페이지 요소에 적합한 이름을 지정하십시오. 그런 다음 디자인 문서에 따라 각 요소를 수정하고 테스트하십시오.
-
다이어그램에서 CSS를 구현하십시오.
페이지를 디자인하는 것이 아니라 이미 작성한 디자인을 구현해야합니다. (다이어그램 작성 과정에서 이미 발생했습니다.) 디자인을 저장하십시오. 다중 페이지 프로젝트의 경우 별도의 파일에 외부 CSS를 사용하는 것이 좋습니다. 작업하면서 CSS를 일반적인 방법으로 저장하면 브라우저에서 읽을 수 있습니다.
-
테스트와 조정.
브라우저는 표준에 동등하게 부합하지 않기 때문에 CSS로는 절대 보이지 않습니다. 다른 브라우저에서 테스트하고 조정해야합니다. 구형 기술을 사용하는 사용자가 걱정할 경우 IE의 이전 버전에 대한 보조 스타일 시트를 사용해야 할 수도 있습니다. 모바일 버전을 만들고 싶을 수도 있습니다. -
다른 템플릿에도 반복하십시오.
사이트 다이어그램에서 확인한 다른 템플릿 각각에 대해이 과정을 반복하십시오.
-
이 프로세스의 결과는 사이트 전체에서 쉽게 재사용 할 수있는 수많은 CSS 파일이어야합니다.
기본 페이지의 CSS 코드는 다음과 같습니다.
body {background-color: # 000000;} h1 {text-align: center; font-family: sans-serif; 색깔: 백색; 텍스트 그림자: 0 0 10px 검정;} #all {background-color: white; 테두리: 1 픽셀 단색 검정; 너비: 800px; margin-top: 2em; margin-left: 자동; margin-right: 자동; 최소 높이: 600 픽셀;} #heading {background-color: # A11204; background-image: url ("cbBackground. png"); color: #FFFFFF; 높이: 100px; 글꼴 크기: 2em; 패딩 - 왼쪽: 1em; border-bottom: 3px 검정색; margin-top: -1. 5em;} #menu {background-image: url ("cbBackground. png"); 배경색: # A11204; color: #FFFFFF; 왼쪽으로 뜨다; 너비: 100px; 최소 높이: 500 픽셀;} #menu li {list-style-type: none; margin-left: -2em; margin-right:. 5em; 텍스트 정렬: 센터;} # 메뉴 a {색상: #FFFFFF; 디스플레이: 블록; 국경: # A11204 3px 시작; text-decoration: none;} #menu a: hover {border: # A11204 3px inset;} content {border: 3px double # A11204; margin: 1em; margin-left: 110px; 패딩 - 왼쪽: 1em; 패딩 - 바닥: 1em; 패딩 오른쪽: 1em; border-radius: 5px; 상자 그림자: 5px 5px 5px 회색;}내용 h2 {배경색: # A11204; background-image: url ("cbBackground. png"); color: #FFFFFF; text-align: right;} #footer {color: #FFFFFF; 배경색: # 000000; 국경: 1px 고체 # A11204; 왼쪽으로 뜨다; 명확: 둘 다; 너비: 100 %; 텍스트 정렬: 센터;}
