지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > WebMatrix 고급 튜토리얼(3): 특정 스타일을 구현하는 방법

WebMatrix 고급 튜토리얼(3): 특정 스타일을 구현하는 방법

黄舟
풀어 주다： 2016-12-26 16:25:27
원래의
1315명이 탐색했습니다.

Csdn.NET은 개발자의 이해를 돕기 위해 Microsoft의 새로운 웹 개발 도구인 WebMatrix에 대한 고급 튜토리얼을 곧 출시할 예정입니다. WebMatrix는 Microsoft 역사상 가장 강력한 웹 개발 도구로 알려져 있습니다. Microsoft의 새로운 개발 도구인 WebMatrix를 설치 및 사용하는 방법에 대한 마지막 릴리스에 이어 WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 교육합니다. 이번 호에서는 계속해서 다음 튜토리얼을 소개합니다.

소개: Microsoft WebMatrix는 인터넷에서 웹 사이트를 생성, 사용자 정의 및 게시하는 데 사용할 수 있는 무료 도구입니다.

WebMatrix를 사용하면 웹사이트를 쉽게 만들 수 있습니다. 오픈 소스 애플리케이션(예: WordPress, Joomla, DotNetNuke 또는 Orchard)으로 시작할 수 있으며 WebMatrix가 애플리케이션 다운로드, 설치 및 구성 작업을 처리합니다. 또는 빠르게 시작하는 데 도움이 되는 다양한 내장 템플릿을 사용하여 직접 코드를 작성할 수도 있습니다. 무엇을 선택하든 WebMatrix는 웹 서버, 데이터베이스 및 프레임워크를 포함하여 웹 사이트를 실행하는 데 필요한 모든 것을 제공합니다. 웹 호스트에서 사용할 것과 동일한 스택을 개발 데스크탑에서 사용하면 웹 사이트를 온라인으로 전환하는 과정이 쉽고 원활해집니다.

http://web.ms/webmatrix에서 다운로드할 수 있습니다.

이제 단 몇 시간 만에 WebMatrix, CSS, HTML, HTML5, ASP.Net, SQL, 데이터베이스 등을 사용하는 방법과 간단한 웹 애플리케이션을 작성하는 방법을 배울 수 있습니다. 내용은 다음과 같습니다.

2부에서는 WebMatrix를 사용하여 매우 간단한 웹 페이지를 만드는 방법과 이 페이지가 다양한 브라우저에서 어떻게 실행되는지 살펴보았습니다. 이 섹션에서는 CSS(Cascading Style Sheets) 기술을 사용하여 웹 페이지의 시각적 스타일을 변경하는 방법을 알아봅니다.
다음은 웹 페이지에 구축할 수 있는 간단한 영화 목록입니다.

WebMatrix 고급 튜토리얼(3): 특정 스타일을 구현하는 방법

캐스케이딩 스타일 시트를 사용하여 웹 페이지 스타일을 준비하세요.

In 앞으로 며칠 동안 이 단계에서는 하이퍼링크, 웹 페이지 섹션 및 스크립트 태그와 같은 기능을 구현하는 데 사용할 수 있는 더 많은 HTML 태그를 볼 수 있으며 CSS(Cascading Style Sheet)를 사용하여 이 웹을 편집하는 방법도 배우게 됩니다. 페이지를 선택하고 모양을 설정합니다. 마지막으로 레이아웃은 이 페이지와 사이트의 다른 페이지 간에 동일한 콘텐츠를 가져오는 데 사용되므로 동일한 콘텐츠를 더 쉽게 편집할 수 있습니다.

구분 기호 사용

HTML에서는

태그를 사용하여 웹 페이지를 논리적으로 여러 조각으로 나눌 수 있습니다. 이는 이 문서의 뒷부분에서 해당 div를 설정하여 웹 페이지의 특정 부분의 스타일을 지정할 수 있는 스타일을 살펴볼 때 특히 유용합니다.

첫 번째 부분에 있는 페이지의 HTML은 다음과 같습니다. 

<!DOCTYPE html>  
   
<html lang="en">  
    <head>  
        <meta charset="utf-8" />  
        <title>My Favorite Movies</title>  
    </head>  
    <body>  
    <h1>A list of my Favorite Movies</h1>  
       <ol>  
            <li>Its a wonderful life</li>  
            <li>Lord of the Rings</li>  
            <li>The Fourth World</li>  
            <li>The Lion King</li>  
       </ol>  
    </body>  
</html>
로그인 후 복사

가장 먼저 해야 할 일은 아래와 같이 영화가 포함된 목록을 자체

로 래핑하는 것입니다. 

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1>A list of my Favorite Movies</h1>  
  <div id="movieslist">  
  <ul>  
    <li>Its a wonderful life</li>  
    <li>Lord of the Rings</li>  
    <li>The Fourth World</li>  
    <li>The Lion King</li>  
  </ul>  
</div>  
</body>  
</html>
로그인 후 복사

이제 영화가 포함된

  1. 목록이
    지금 페이지를 보시면 이전과 크게 다르지 않은 것을 보실 수 있습니다. 이는
    태그가 논리적 구분 기호이기 때문입니다. 육체적인 모습은 없습니다.

    하이퍼링크 사용

    한 페이지에서 클릭할 수 있고 다른 페이지로 연결되는 영역인 하이퍼링크에 이미 익숙하실 것입니다. 이러한 영역을 하이퍼링크라고 부르지만 HTML에서는 원래 앵커 태그(앵커)라고 불렀으므로 하이퍼링크를 만들 때마다 태그를 사용합니다.

    (또는 위치 지정) 태그는 사용자가 이 콘텐츠를 클릭하면 브라우저는 태그의 href 속성을 사용하여 표시된 HREF(하이퍼참조)로 리디렉션됩니다.

    속성은 다음과 유사하게 태그 내부가 아닌 태그 자체에 정의됩니다.

    content

    따라서 하이퍼링크를 만들려면 다음과 같은 구문을 사용할 수 있습니다.

    여기를 클릭하세요

    href는 위와 같은 웹사이트일 필요는 없으며, 프로그래머가 사용하는 작업을 수행하는 JavaScript 함수일 수 있습니다. 하이퍼링크 스타일이 작동하는지 테스트할 수 있도록 개발 중에 특수 href가 자리 표시자로 사용됩니다. 이렇게 하려면 "#" 문자를 href로 사용하세요.

    따라서 영화가 포함된 모든

  2. 항목을 하이퍼링크로 변환하기 위해 영화의 텍스트를 태그로 묶고 다음과 같이 HREF를 #으로 설정합니다. 

    <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8" />  
  <title>My Favorite Movies</title>  
</head>  
<body>  
  <h1>A list of my Favorite Movies</h1>  
  <div id="movieslist">  
    <ol>  
      <li><a href="#">Its a wonderful life</a></li>  
      <li><a href="#">Lord of the Rings</a></li>  
      <li><a href="#">The Fourth World</a></li>  
      <li><a href="#">The Lion King</a></li>  
  </ol>  
  </div>  
</html>
    로그인 후 복사

    웹 페이지를 실행하면 목록의 요소가 파란색 밑줄이라고도 알려진 친숙한 하이퍼링크 스타일을 사용하는 것을 볼 수 있습니다.

    WebMatrix 고급 튜토리얼(3): 특정 스타일을 구현하는 방법

    머리글 및 바닥글 추가

    将要做的下一件事是向网页添加页眉和页脚。您将使用Html5中提供的新

    和