[HTML]Reactive WEB

Study Site>

https://www.youtube.com/playlist?list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B

WEB2-CSS - YouTube

www.youtube.com

My Git>

https://github.com/ankiwoong/Bitnami_htdocs

ankiwoong/Bitnami_htdocs

[생활코딩]수업 코드. Contribute to ankiwoong/Bitnami_htdocs development by creating an account on GitHub.

github.com

반응형 웹 작동 영상>

수업 정리>

CSS에 대한 기본 지식을 얻을 수 있었고 반응형 웹이 어떻히 구현되는지를 알 수 있었던 수업이였다.

이고잉님이 만드신 유투브를 따라하고 정리하다보면 자연히 간단한 안내페이지를 만들때 사용할 수 있다는 것을 알게

되었다.

처음에는 아무것도 읽을 수 없었던 코드 내용도 조금 조금 읽어지는 것을 보면 정말 유익한 강의였다.

https://ko.wikipedia.org/wiki/%EB%B0%98%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8

반응형 웹 디자인 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. Content is like water: RWD의 원리를 설명하는 페이지. 반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있

ko.wikipedia.org

Main Page>

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - Welcome</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://localhost/css/web_style.css">
  </head>
  <body>
    <h1><a href="http://localhost/web/index.html">WEB</h1></a>
    <div id="grid">
      <ol>
        <li><a href="http://localhost/web/1.html">HTML</li></a> 
        <li><a href="http://localhost/web/2.html">CSS</li></a> 
        <li><a href="http://localhost/web/3.html">JavaScript</li></a> 
      </ol>
      <div id="article">
        <h2>WEB</h2>
        <p>
          WEB is a computer programming system created by Donald E. Knuth as the first implementation of what he called "literate programming": the idea that one could create software as works of literature, by embedding source code inside descriptive text, rather than the reverse (as is common practice in most programming languages), in an order that is convenient for exposition to human readers, rather than in the order demanded by the compiler.
          WEB consists of two secondary programs: TANGLE, which produces compilable Pascal code from the source texts, and WEAVE, which produces nicely-formatted, printable documentation using TeX.
        </p>
        <img src="http://localhost/img/2.png" width="100%" />
        <p style="margin-top:45px;">
          CWEB is a version of WEB for the C programming language, while noweb is a separate literate programming tool, which is inspired by WEB (as reflected in the name) and which is language agnostic.
        </p>
        <p>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/uQdCL5y4KQU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </p>
      </div>
    </div>
  </body>
</html>

HTML Page>

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://localhost/css/web_style.css">
  </head>
  <body>
    <h1><a href="http://localhost/web/index.html">WEB</h1></a>
    <div id="grid">
      <ol>
        <li><a href="http://localhost/web/1.html">HTML</li></a> 
        <li><a href="http://localhost/web/2.html">CSS</li></a> 
        <li><a href="http://localhost/web/3.html">JavaScript</li></a> 
      </ol>
    <div id="article">
      <h2>HTML</h2>
      <p>
        <a
          href="https://www.w3.org/TR/html51/"
          target="blank"
          title="html5 speicification"
          >Hypertext Markup Language (HTML)</a
        >
        is the standard markup language for
        <strong>creating <u>web</u> pages</strong>
        and web applications. With Cascading Style Sheets (CSS) and JavaScript, it
        forms a triad of cornerstone technologies for the World Wide Web.[41] Web
        browsers receive HTML documents from a web server or from local storage
        and render the documents into multimedia web pages. HTML describes the
        structure of a web page semantically and originally included cues for the
        appearance of the document. HTML elements are the building blocks of HTML
        pages. With HTML constructs, images and other objects such as interactive
        forms may be embedded into the rendered page.
      </p>
      <img src="http://localhost/img/2.png" width="100%" />
      <p style="margin-top:45px;">
        HTML provides a means to create structured documents by denoting
        structural semantics for text such as headings, paragraphs, lists, links,
        quotes and other items. HTML elements are delineated by tags, written
        using angle brackets. Tags such as and directly introduce content into the
        page. Other tags such as surround and provide information about document
        text and may include other tags as sub-elements. Browsers do not display
        the HTML tags, but use them to interpret the content of the page. HTML can
        embed programs written in a scripting language such as JavaScript, which
        affects the behavior and content of web pages. Inclusion of CSS defines
        the look and layout of content. The World Wide Web Consortium (W3C),
        maintainer of both the HTML and the CSS standards, has encouraged the use
        of CSS over explicit presentational HTML since 1997.
      </p>
    </div>
  </div>
  </body>
</html>

CSS Page>

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - CSS</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://localhost/css/web_style.css">
  </head>
  <body>
    <h1><a href="http://localhost/web/index.html">WEB</h1></a>
    <div id="grid">
      <ol>
        <li><a href="http://localhost/web/1.html">HTML</li></a> 
        <li><a href="http://localhost/web/2.html">CSS</li></a> 
        <li><a href="http://localhost/web/3.html">JavaScript</li></a> 
      </ol>
      <div id="article">
        <h2>CSS</h2>
        <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]
          CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
          Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4]
          The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
        </p>
        <img src="http://localhost/img/2.png" width="100%" />
        <p style="margin-top:45px;">
          The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.
        </p>
      </div>
    </div>
  </body>
</html>

JavaScript Page>

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://localhost/css/web_style.css">
  </head>
  <body>
    <h1><a href="http://localhost/web/index.html">WEB</h1></a>
    <div id="grid">
      <ol>
        <li><a href="http://localhost/web/1.html">HTML</li></a> 
        <li><a href="http://localhost/web/2.html">CSS</li></a> 
        <li><a href="http://localhost/web/3.html">JavaScript</li></a> 
      </ol>
      <div id="article">
      <h2>JavaScript</h2>
        <p>
          JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[7] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
          Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[8] JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior,[9] and all major web browsers have a dedicated JavaScript engine to execute it.</p>
        <img src="http://localhost/img/2.png" width="100%" />
        <p style="margin-top:45px;">
          As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). However, the language itself does not include any input/output (I/O), such as networking, storage, or graphics facilities, as the host environment (usually a web browser) provides those APIs.
          Originally used only in web browsers, JavaScript engines are also now embedded in server-side website deployments and non-browser applications.
        </p>
      </div>
    </div>
  </body>
</html>

CSS File>

body {
  margin: 0;
}
a {
  color: black;
  text-decoration: none;
}
h1 {
  font-size: 45px;
  text-align: center;
  border-bottom: 1px solid gray;
  margin: 0;
  padding: 20px;
}
ol {
  border-right: 1px solid gray;
  width: 100px;
  margin: 0;
  padding: 20px;
}
#grid {
  display: grid;
  grid-template-columns: 150px 1fr;
}
#grid ol {
  padding-left: 33px;
}
#grid #article {
  padding-left: 25px;
}
@media (max-width: 800px) {
  #grid {
    display: block;
  }
  ol {
    border-right: none;
  }
  h1 {
    border-bottom: none;
  }
}

저작자표시 비영리 동일조건

'Python_WEB > HTML' 카테고리의 다른 글

[Ch1]기초사항 - 연습문제 (0)	2020.11.01
[Font]Basic types of typefaces(서체의 기본 종류) (0)	2020.07.06
[WMAP]Bitnami WMAP Setup(비트나미) (0)	2020.03.01
[Tistory-플러그인]기본 스킨 방문객 카운터 HTML Code (0)	2019.10.29
HTML5 - 190701 Basic Study 69(반응형 웹) (0)	2019.07.01

오늘 코딩 내일 디버깅

[HTML]Reactive WEB

'Python_WEB > HTML' 카테고리의 다른 글

티스토리툴바

[HTML]Reactive WEB

'Python_WEB > HTML' 카테고리의 다른 글

'Python_WEB/HTML' Related Articles

티스토리툴바