소개:
한 책의 한 구절을 인용하자면: "내가 처음 중국어를 배우기 시작했을 때, 나의 선생님 Lao Wang은 나에게 한-영 사전, 중국어 문법 책, 초급 튜토리얼을 주었습니다. 그러나 그는 책을 책 바구니에 넣고 첫 주 동안 그는 나에게 몇 가지 문구만 듣고 암기하라고 가르쳤고 그 다음에는 그 중 일부를 반복하는 방법을 배우기를 원했습니다. 레스토랑? ". "밥 좀 가져다 주세요." "이 옷은 얼마예요?" ”.그 주에는 지식, 문장 구조, 발음, 문법을 무조건 받아들여야 했습니다. 하지만 금요일에는 실제로 중국 식당에 가서 밥 한 그릇을 주문하고 비용을 지불할 수 있었습니다. 모든 간단한 문구는 나에게 이를 수행하기에 충분한 문법과 어휘를 제공했습니다.
언제부터 중국인들이 CSS를 진지하게 받아들이기 시작했는지는 모르겠습니다. 많은 사람들이 CSS를 배우기 시작했지만 어디서부터 시작해야 할지 모르기 때문에 이 글은 초보자들이 CSS를 배울 수 있도록 작성되었습니다.
1. CSS 학습은 방법 중심으로 진행됩니다!
초등학교, 중학교, 대학교까지 무엇이든 배울 때도 마찬가지입니다. 지식뿐만 아니라 방법도 배워야 합니다!
CSS를 마스터하려면 먼저 HTML을 배워야 합니다. 저는 처음부터 HTML을 배우기 시작했고 선생님이 없어서 책이 유일한 선생님이었고 인터넷에 접속할 수도 없었습니다. 한 달 뒤, CSS를 배우기 시작했습니다. 처음 읽은 CSS 책은 "CSS 웹 스타일 디자인"이었습니다. 며칠 동안 읽은 후에는 전혀 이해할 수 없었습니다. , 그리고 "HTML 참조 백과사전"으로 변경되었습니다. 이 책은 웹 페이지 디자이너를 위한 일반 책상 책입니다! CSS를 배우기 위해 이 책을 바꾼 이유는 그 일부가 CSS이고, 그것이 나의 CSS 계몽서가 되었기 때문이다. 몇 문단을 읽고 나니, 외국인들이 쓴 튜토리얼이 얕은 것부터 시작해서 깊은 것까지 매우 체계적으로 구성되어 있고, 한 단계씩 앞으로 나아가도록 이끌어 주므로, 국내 책들과 달리 그들이 말하는 내용을 이해할 수 있다는 것을 느꼈습니다. 깊이가 다르고 조직이 부족합니다. 마치 그가 지식이 풍부하다는 것을 당신이 알지 못하는 것처럼 말입니다! 앞서 언급한 "CSS 웹 스타일 디자인"이라는 책처럼, 당시 저는 CSS 초보자로서 무슨 내용인지 전혀 몰랐습니다.
스타일은 HTML 페이지와 분리될 수 없기 때문에 학습 과정에 대해 자세히 이야기해 보겠습니다. HTML이 스타일과 결합되지 않으면 CSS는 존재 의미를 잃게 됩니다. 따라서 책에서는 일반적으로 예를 제시한 다음 컴퓨터에 미치는 영향을 테스트하도록 합니다. 이는 저자가 스타일 시트 CSS에 대한 예비적인 인상을 갖고 CSS가 무엇을 할 수 있는지 알려 주기를 원하기 때문입니다. 작은 예: "참새는 작지만 다섯 가지 내장을 모두 가지고 있습니다." 각 진술의 진정한 의미를 이해하지 못할 수도 있습니다. 하지만 예제의 패턴을 기억하고 앞으로도 계속해서 연습에 활용하면 됩니다. 계속해서 사용하는 과정은 계속해서 암기하는 과정이기 때문에 긴장을 풀지 못하고 항상 기억력이 좋지 않다고 생각하는데 그렇지 않습니다. 소를 타든, 천 마일의 말을 타든, 인내만 있다면 반드시 목적지에 도달할 것입니다.
책을 읽을 때, 일반적으로 처음에는 책 전체를 읽어야 합니다. 이해가 되지 않으면 계속 읽어야 합니다. 읽는 과정에서 그 질문에 대한 답을 찾을 수도 있습니다. 읽고 나면 대략적인 인상을 받게 되겠지만, 이해하지 못하는 부분도 많을 것입니다. 상관없으니 계속 읽으세요.
2번은 읽으면서 핵심이라고 생각되는 부분을 적고, 궁금한 부분은 질문으로 계속해서 읽어보세요. , BBS에 게시물을 게시할 수 있습니다. 여전히 좋은 의도를 가진 사람들이 많이 있습니다. 다음은 알림입니다. "질문하는 방법을 배워야 합니다!" 여기서는 자세히 설명하지 않겠습니다. 책에 있는 예를 연습하려면 컴퓨터로 가야 합니다. 가장 혼란스러운 점은 "첫째, 기억이 나지 않고, 두 번째로 개념을 잘못 이해하고 있다는 것입니다. 책이 잘 번역되지 않았고, 또 하나는 당신의 이해가 틀렸다는 것입니다. 끝에 도달하면 모든 것이 당연하다는 것을 알게 될 것입니다. 열심히 노력하면 보상과 결과가 있을 것이기 때문입니다.
많은 분들이 시청해 보셨으나 진전이 없었습니다. 그 주된 이유를 다음과 같이 분석합니다.
이유 1: 예술가와 같은 많은 사람들은 다른 사람이 배우는 것을 보기 때문에 CSS를 배우기 때문에 배우지 않으면 아무런 이점이 없습니다. 이런 부담감은 아주 작습니다. 잘 배우지 못하더라도 여전히 예술가라는 직업을 갖게 될 것입니다.
이유 2: 단지 시간제 공부일 뿐이고, 단지 재미를 위한 것입니다. 꼭 이 기술로 생계를 꾸릴 필요는 없기 때문입니다.
이유 3: 방법이 잘못되었습니다. 어떤 사람들은 튜토리얼만 보고 있지만 그들은 하지 않습니다. 저는 너무 많이 보고 너무 적게 했기 때문에 이론적인 것들을 통합할 수 있습니다.
2. CSS의 4가지 학습 단계를 마스터하세요
네티즌에게 물어보니 CSS를 배우기가 어렵나요?
그녀는 "어렵지 않아요"라고 말했고 나는 "공부한 지 얼마나 됐어요?"라고 물었습니다. 그녀는 "방금 배웠어요"라고 말했습니다. 사실, 그녀가 말한 것이 옳습니다! 누군가 CSS를 배우는 것이 어렵냐고 묻는다면? 나는 "어렵다!"라고 말하고 싶습니다. 왜 어렵다고 말하겠습니까?
CSS 학습은 다음 단계로 나눌 수 있습니다.
1단계: 브라우저 호환성 문제를 고려하지 않고 페이지를 생성할 수 있지만 페이지는 어디에서나 TABLE 모드 DIV로 작성됩니다.
2단계: 호환성 문제를 생각하지만 사전에 예방할 수 있는 방법이 없습니다. 문제를 해결하고 HACK 기술을 광범위하게 사용할 수만 있습니다. (HACK 기술에 대해서만 알고 있지만 거의 사용하지 않습니다.)
3단계: BUG를 사전에 예방할 수 있으나, 스타일시트에는 ID, CLASS가 널리 사용되고, CSS는 "DIV P SPAN"과 같이 중복되는 스타일시트로 번역됩니다. 이 코드는 DIV의 하위 요소에 P의 하위 요소 SPAN을 표시합니다. 이렇게 작성하면 SPAN에 CLASS를 추가하지 않고도 SPAN의 스타일을 정의할 수 있습니다. 이것이 CSS의 장점입니다. 이를 잘 활용하고 반드시 CLASS를 정의하는 것이 좋습니다.
4단계: 이 단계는 가장 어렵고 좋은 HTML 의미 구조, 합리적인 CSS 및 재사용 가능한 스타일입니다. 이 분야에는 좋은 의미론과 합리적인 CSS에 관한 기사가 있습니다. 앞으로 이 두 가지 측면을 연구하기 위해 특별한 주제를 작성하겠습니다.
3. CSS 초보자를 위한 자주 묻는 질문
단계별로 살펴보겠습니다. 첫 번째 요구 사항은 미리보기 이미지 바로 아래에 제목이 있어야 한다는 것입니다. 매우 간단합니다. HTML에 이미지를 넣은 다음 줄 바꿈(BR)을 입력하고 제목을 단락(P) 안에 넣고 중앙에 배치합니다(CSS 사용).
다음으로 브라우저 창에서 이러한 썸네일과 제목을 쌍으로 정렬해야 합니다. 테이블 레이아웃을 사용하는 경우 썸네일과 제목 쌍이 각각 TD에 배치됩니다. CSS 레이아웃을 사용하는 경우 각각 DIV에 배치해야 합니다. 창에서 수평으로 정렬하기 위해 CSS를 사용하여 DIV를 왼쪽으로 띄웁니다(FLOAT).
질문 1: CSS를 배우려면 어떤 종류의 책을 읽어야 합니까?
먼저 몇 권의 책을 추천해 드리겠습니다.
"CSS에 대한 확실한 가이드"
"웹사이트 재구축"
"웹사이트 레이아웃 기록"
"HTML 참조"
HTML에 대해 잘 모른다면 먼저 "HTML Reference"라는 책을 읽어보세요. 이 책은 HTML을 질의하기 위한 훌륭한 도구서일 뿐만 아니라 교육용 책이기도 합니다. 최근 출간된 "Mastering CSS"와 "Impeccable Web Design"은 매우 좋은 책이지만 CSS에 대한 기초가 없는 사람들에게는 적합하지 않습니다. 영어로 된 CSS 튜토리얼을 읽고 관련 포럼에 참여할 수 있습니다. 어떤 사람들은 영어를 모르면 코드만 읽어도 된다고 말하지만 사실 그들의 책에서는 코드뿐만 아니라 더 중요한 내용도 다루고 있습니다. , 그들은 우리에게 코딩의 아이디어와 코딩 방법은 배우고 이해할 가치가 있다고 말할 것입니다. 또한 제가 추천하는 중국어 튜토리얼은 다음과 같습니다: "HTML 및 CSS 표준", Su Chen Xiaoyu의 "CSS2 중국어 매뉴얼", "웹 디자이너"의 전자 버전은 외국 및 영어 전자책이 많기 때문에, 예를 하나씩 들어주지 마세요. 전자책을 읽는 것은 매우 지루한 일이다. 나는 전자책을 읽는 데 익숙하지 않아서 읽을 책을 자주 구입한다.
질문 2: CSS 코드를 편집하는 데 어떤 소프트웨어가 사용됩니까?
이 질문을 가장 많이 받는 것 같아요! 먼저 제 이야기를 하자면, 제가 처음으로 DreamWeaver를 사용하여 코드를 작성했는데, DreamWeaver 소프트웨어 자체가 CPU와 메모리를 많이 소모하는 소프트웨어이기 때문에 런타임 중 편집 속도가 어떨지 상상이 가실 겁니다. 한참을 걷다가 '반필기' 상태로 전환되었는데, '반필기'는 DW에서 제공하는 코드프롬프트 기능을 이용하면 'F'를 쓰면 바로 'F' 스타일이 됩니다. 나중에 선택하면 편리합니다. 몇 글자 더 쓰면 원하는 스타일을 빨리 찾을 수 있습니다. 이렇게 하면 스타일 작성 속도가 빨라질 수 있지만, 한 가지 단점은 메시지를 표시하는 편집 소프트웨어를 그대로 두면 스타일을 작성할 수 없다는 것입니다. 예를 들어, 프로그래머의 미세 조정 스타일을 수정할 때 그 프로그래머는 귀하가 사용하는 것과 동일한 소프트웨어를 사용하지 않을 수도 있고 코드 프롬프트 기능이 없을 수도 있으므로 귀하는 자신의 컴퓨터로 돌아가서만 편집할 수 있습니다. 그런 다음 프로그래머에게 보내십시오! 이것은 분명히 비전문적입니다! 그러니 훌륭한 사람이 되고 싶다면 전문가가 되어야 합니다!
이렇게 말하면 해당 주제는 아직 언급되지 않은 것 같습니다.
손으로 작성할 수만 있다면 어떤 소프트웨어든 사용할 수 있습니다. DreamWeaver 플러그인 TopStyle(최신 버전은 Pro V3.12)을 사용하는 것이 좋습니다.
질문 3: HTML이나 CSS를 먼저 작성해야 합니까?
인터넷에는 많은 답이 있습니다. HTML을 먼저 작성한 다음 CSS를 작성하고, CSS를 먼저 작성하고 동시에 HTML을 작성합니다. CSS를 먼저 작성하거나 HTML을 먼저 작성하는 것은 초보자에게 적합한 방법이 아닙니다. 누군가에게 코드 작성을 요청하고 먼저 HTML을 작성하라고 하면 HTML을 작성한 후 수정할 수 없으며 CSS를 작성할 수 있다면 이 사람은 매우 높은 수준의 빌더임에 틀림없습니다! 따라서 초보자의 경우 대부분의 경우 구체적인 단계를 동시에 작성하는 것이 좋습니다.
먼저 사이트와 디렉토리를 구축해야 합니다. 예를 들어 CSS와 IMAGES 폴더를 생성합니다. 그런 다음 새 HTML 파일인 style.css와 빈 스타일 시트를 생성합니다. 이 외부 스타일 시트에 추가됩니다.
그런 다음 가장 기본적인 레이아웃 부분을 DIV를 사용하여 HTML로 작성한 다음 DIV에 직접 ID 또는 CLASS를 추가합니다. 이러한 레이아웃 부분에는 외부 부분, 헤더 부분, 중간 부분, 왼쪽, 중간, 오른쪽이 포함됩니다. , 저작권 부분 등.
이를 작성한 후 스타일 시트로 이동하여 스타일을 작성하거나 계속해서 레이아웃의 부분을 작성할 수 있습니다. 헤더에 LOGO 부분을 작성하고 ID 또는 부분을 추가해 보겠습니다. NAV 부분에 대한 CLASS. 다른 사람들에게도 마찬가지입니다.
HTML 부분을 한 번에 작성하는 것이 불가능하다고 말하는 이유는 사람들이 실수할 가능성이 높기 때문입니다. 아이디어를 작성하는 과정이나 브라우저 호환성 문제가 있을 수 있습니다. 이러한 단점은 사전에 예상되지 않으므로 스타일 작성 시 문제가 발견되면 HTML 코드를 변경해야 할 수도 있습니다. 이것이 작성하는 방법입니다. HTML/CSS를 동시에 사용할 수도 있습니다. 모두 습관에 따라 다릅니다. 우리는 코드를 작성하면서 테스트를 하는 경우가 많습니다. 한 문장을 테스트하기 위해 한 문장을 작성하는 것이 아니라, 코드를 작성한 후 IE6과 FF로 동시에 테스트하는 것입니다. . 대부분의 경우 좋은 개발자는 코드를 오랫동안 작성한 후에 테스트합니다. 왜냐하면 경험이 많으면 브라우저 오류가 발생하는 것을 미리 알고 방지할 수 있기 때문입니다. 그래서 경험이 없는 사람보다 코드를 더 빨리 작성할 수 있습니다. 그들은 이미 당신이 겪고 있는 오류를 겪었습니다. 잘못된 브라우저 표시 문제가 처음 발생하면 문제를 해결하는 데 시간을 투자해야 하지만 사전에 이를 방지하거나 즉시 문제를 해결할 수 있습니다! 이것이 당신과 그들 사이의 차이점 중 하나입니다.
초보자와 전문가의 또 다른 차이점은 전문가는 단축키를 많이 사용하기 때문에 자주 사용하는 단축키를 꼭 기억해두세요. 작은 디테일 하나하나가 조금씩 나아지고, 함께하면 큰 발전이 됩니다.
또한 자신의 수준을 향상시키는 가장 좋은 방법은 더 많이 연습하고 코딩 연습을 위한 더 나은 HTML+CSS 템플릿을 찾는 것입니다. 처음에는 더 간단한 것을 선택하고 페이지의 스크린샷을 찍은 다음 여기에 자신의 아이디어를 사용하십시오. 그림. HTML 페이지로 복원...