<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <br><!DOCTYPE html> <br>  <br><html> <br>  <br><head> <br>    <title>Simple web Development Template</title> <br>  <br>    <style> <br>        * { <br>            margin: 0; <br>            padding: 0; <br>        } <br>  <br>        .navbar { <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            position: sticky; <br>            top: 0; <br>            cursor: pointer; <br>        } <br>  <br>        .background { <br>            background: black; <br>            background-blend-mode: darken; <br>            background-size: cover; <br>        } <br>  <br>        .nav-list { <br>            width: 70%; <br>            display: flex; <br>            align-items: center; <br>        } <br>  <br>        .logo { <br>            display: flex; <br>            justify-content: center; <br>            align-items: center; <br>        } <br>  <br>        .logo img { <br>            width: 180px; <br>            border-radius: 50px; <br>        } <br>  <br>        .nav-list li { <br>            list-style: none; <br>            padding: 26px 30px; <br>        } <br>  <br>        .nav-list li a { <br>            text-decoration: none; <br>            color: white; <br>        } <br>  <br>        .nav-list li a:hover { <br>            color: grey; <br>        } <br>  <br>        .rightnav { <br>            width: 30%; <br>            text-align: right; <br>        } <br>  <br>        #search { <br>            padding: 5px; <br>            font-size: 17px; <br>            border: 2px solid grey; <br>            border-radius: 9px; <br>        } <br>  <br>        .firstsection { <br>            background-color: green; <br>            height: 400px; <br>        } <br>  <br>        .secondsection { <br>            background-color: blue; <br>            height: 400px; <br>        } <br>  <br>        .box-main { <br>            display: flex; <br>            justify-content: center; <br>            align-items: center; <br>            color: black; <br>            max-width: 80%; <br>            margin: auto; <br>            height: 80%; <br>        } <br>  <br>        .firsthalf { <br>            width: 100%; <br>            display: flex; <br>            flex-direction: column; <br>            justify-content: center; <br>        } <br>  <br>        .secondhalf { <br>            width: 30%; <br>        } <br>  <br>        .secondhalf img { <br>            width: 70%; <br>            border: 4px solid white; <br>            border-radius: 150px; <br>            display: block; <br>            margin: auto; <br>        } <br>  <br>        .text-big { <br>            font-family: 'Piazzolla', serif; <br>            font-weight: bold; <br>            font-size: 35px; <br>        } <br>  <br>        .text-small { <br>            font-size: 18px; <br>        } <br>  <br>        .btn { <br>            padding: 8px 20px; <br>            margin: 7px 0; <br>            border: 2px solid white; <br>            border-radius: 8px; <br>            background: none; <br>            color: white; <br>            cursor: pointer; <br>        } <br>  <br>        .btn-sm { <br>            padding: 6px 10px; <br>            vertical-align: middle; <br>        } <br>  <br>        .section { <br>            height: 400px; <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            max-width: 90%; <br>            margin: auto; <br>        } <br>  <br>        .section-Left { <br>            flex-direction: row-reverse; <br>        } <br>  <br>        .paras { <br>            padding: 0px 65px; <br>        } <br>  <br>        .thumbnail img { <br>            width: 250px; <br>            border: 2px solid black; <br>            border-radius: 26px; <br>            margin-top: 19px; <br>        } <br>  <br>        .center { <br>            text-align: center; <br>        } <br>  <br>        .text-footer { <br>            text-align: center; <br>            padding: 30px 0; <br>            font-family: 'Ubuntu', sans-serif; <br>            display: flex; <br>            justify-content: center; <br>            color: white; <br>        } <br>    </style> <br></head> <br>  <br><body> <br>    <nav class="navbar background"> <br>        <ul class="nav-list"> <br>            <div class="logo"> <br>                <img src= "logo.png"> <br>            </div> <br>            <li><a href="#web">Web Technology</a></li> <br>            <li><a href="#program">C Programming</a></li> <br>            <li><a href="#course">Courses</a></li> <br>        </ul> <br>  <br>        <div class="rightNav"> <br>            <input type="text" name="search" id="search"> <br>            <button class="btn btn-sm">Search</button> <br>        </div> <br>    </nav> <br>  <br>    <section class="firstsection"> <br>        <div class="box-main"> <br>            <div class="firstHalf"> <br>                <h1 class="text-big" id="web">Web Technology</h1> <br>                <p class="text-small"> <br>                    HTML stands for HyperText Markup Language. <br>                    It is used to design web pages using a markup <br>                    language. HTML is the combination of Hypertext <br>                    and Markup language. Hypertext defines the <br>                    link between the web pages. A markup language <br>                    is used to define the text document within tag <br>                    which defines the structure of web pages. <br>                    HTML is a markup language that is used by the <br>                    browser to manipulate text, images, and other <br>                    content to display it in the required format. <br>                </p> <br>  <br>  <br>            </div> <br>        </div> <br>    </section> <br>  <br>    <section class="secondsection"> <br>        <div class="box-main"> <br>            <div class="firstHalf"> <br>                <h1 class="text-big" id="program"> <br>                    C Programming <br>                </h1> <br>                <p class="text-small"> <br>                    C is a procedural programming language. It <br>                    was initially developed by Dennis Ritchie <br>                    as a system programming language to write <br>                    operating system. The main features of C <br>                    language include low-level access to memory, <br>                    simple set of keywords, and clean style, <br>                    these features make C language suitable for <br>                    system programming like operating system or <br>                    compiler development. <br>                </p> <br>  <br>  <br>            </div> <br>        </div> <br>    </section> <br>  <br>    <section class="section"> <br>        <div class="paras"> <br>            <h1 class="sectionTag text-big">Java</h1> <br>  <br>            <p class="sectionSubTag text-small"> <br>                Java has been one of the most popular <br>                programming language for many years. <br>                Java is Object Oriented. However it is <br>                not considered as pure object oriented <br>                as it provides support for primitive <br>                data types (like int, char, etc) The <br>                Java codes are first compiled into byte <br>                code (machine independent code). Then <br>                the byte code is run on Java Virtual <br>                Machine (JVM) regardless of the <br>                underlying architecture. <br>            </p> <br>  <br>  <br>        </div> <br>  <br>        <div class="thumbnail"> <br>            <img src= "img.png" alt="laptop image"> <br>        </div> <br>    </section> <br>  <br>    <footer class="background"> <br>        <p class="text-footer"> <br>            Copyright ©-All rights are reserved <br>        </p> <br>  <br>  <br>    </footer> <br></body> <br>  <br></html></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML과 CSS를 사용하여 웹페이지 디자인</b></span></p>
<!-- -->
]]>
첫댓글 https://www.geeksforgeeks.org/design-a-web-page-using-html-and-css/
웹사이트 만들기 https://www.geeksforgeeks.org/design-a-web-page-using-html-and-css/
웹사이트 만들기 w.schllo.com https://www.w3schools.com/howto/howto_make_a_website.asp