<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> HTML과 CSS를 사용하여 포트폴리오 갤러리를 만드는 방법은 무엇입니까?</b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><br><!DOCTYPE html> <br><html> <br>   <br><head> <br>    <title> <br>        Create a Portfolio Gallery <br>        using HTML and CSS <br>    </title> <br>      <br>    <meta name="viewport" <br>        content="width=device-width, initial-scale=1"> <br>          <br>    <style> <br>       <br>        /* wildcard styling */ <br>        * { <br>            box-sizing: border-box; <br>        } <br>           <br>        /* padding for whole body */ <br>        body { <br>            padding: 15px; <br>        } <br>           <br>        /* styling body */ <br>        .container { <br>            max-width: 1200px; <br>            margin: auto; <br>        } <br>           <br>        h1 { <br>            color: green; <br>        } <br>           <br>        /* anchor tag decoration */ <br>        a { <br>            text-decoration: none; <br>            color: #5673C8; <br>        } <br>           <br>        a:hover { <br>            color: lightblue; <br>        } <br>           <br>        /* paragraph tag decoration */ <br>        p { <br>            display: -webkit-box; <br>            -webkit-box-orient: vertical; <br>            -webkit-line-clamp: 4; <br>            overflow: hidden; <br>       <br>        } <br>           <br>        /* row and column decoration */ <br>        .row { <br>            margin: 0px -18px; <br>            padding: 8px; <br>        } <br>           <br>        .row > .column { <br>            padding: 6px; <br>        } <br>           <br>        .column { <br>            float: left; <br>            width: 25%; <br>        } <br>           <br>        .row:after { <br>            content: ""; <br>            display: table; <br>            clear: both; <br>        } <br>           <br>        /* content decoration */ <br>        .content { <br>            background-color: white; <br>            padding: 10px; <br>            border: 1px solid gray; <br>        } <br>           <br>        /* window size 850 width set */ <br>        @media screen and (max-width: 850px) { <br>            .column { <br>                width: 50%; <br>            } <br>        } <br>       <br>        /* window size 400 width set */ <br>        @media screen and (max-width: 400px) { <br>            .column { <br>                width: 100%; <br>            } <br>        } <br>    </style> <br></head> <br>  <br><body> <br>       <br>    <!-- title and tag --> <br>    <div class="container"> <br>        <h1>GeeksforGeeks</h1> <br>        <h3>A Computer Science Portal for Geeks</h3> <br>        <hr> <br>   <br>        <!-- Content of the body--> <br>        <h2>Portfolio</h2> <br>        <div class="row"> <br>            <div class="column"> <br>                <div class="content"> <br>                    <img src= <br>"<a href="https://www.geeksforgeeks.org/wp-content/uploads/html.png" target="_blank" class="ke-link">https://www.geeksforgeeks.org/wp-content/uploads/html.png</a>" <br>                        alt="" style="width:100%"> <br>                    <h3> <br>                        <a href="#">HTML Tutorials</a> <br>                    </h3> <br>                      <br>  <br>  <br>  <br><p> <br>                        HTML stands for Hyper Text Markup <br>                        Language. It is used to design web <br>                        pages using markup language. HTML <br>                        is the combination of Hypertext and <br>                        Markup language. Hypertext defines <br>                        the link between the web pages. <br>                    </p> <br>  <br>  <br>  <br>  <br>                </div> <br>            </div> <br>              <br>            <div class="column"> <br>                <div class="content"> <br>                    <img src= <br>"<a href="https://www.geeksforgeeks.org/wp-content/uploads/CSS.png" target="_blank" class="ke-link">https://www.geeksforgeeks.org/wp-content/uploads/CSS.png</a>" <br>                        alt="" style="width:100%"> <br>                    <h3> <br>                        <a href="#">CSS Tutorials</a> <br>                    </h3> <br>                      <br>                      <br>  <br>  <br>  <br><p> <br>                        Cascading Style Sheets, fondly referred <br>                        to as CSS, is a simply designed language <br>                        intended to simplify the process of <br>                        making web pages presentable. CSS allows <br>                        you to apply styles to web pages. <br>                    </p> <br>  <br>  <br>  <br>  <br>                </div> <br>            </div> <br>              <br>            <div class="column"> <br>                <div class="content"> <br>                    <img src= <br>"<a href="https://www.geeksforgeeks.org/wp-content/uploads/php-1.png" target="_blank" class="ke-link">https://www.geeksforgeeks.org/wp-content/uploads/php-1.png</a>" <br>                        alt="" style="width:100%"> <br>                    <h3> <br>                        <a href="#">PHP Tutorials</a> <br>                    </h3> <br>                      <br>                      <br>  <br>  <br>  <br><p> <br>                        The term PHP is an acronym for PHP:  <br>                        Hypertext Preprocessor. PHP is a  <br>                        server-side scripting language  <br>                        designed specifically for web  <br>                        development. PHP can be easily <br>                        embedded in HTML files. <br>                    </p> <br>  <br>  <br>  <br>  <br>                </div> <br>            </div> <br>              <br>            <div class="column"> <br>                <div class="content"> <br>                    <img src= <br>"<a href="https://www.geeksforgeeks.org/wp-content/uploads/javascript.png" target="_blank" class="ke-link">https://www.geeksforgeeks.org/wp-content/uploads/javascript.png</a>" <br>                        alt="" style="width:100%"> <br>                    <h3> <br>                        <a href="#">JavaScript Tutorials</a> <br>                    </h3> <br>                      <br>                      <br>  <br>  <br>  <br><p> <br>                        Javascript was developed by Brendan <br>                        Eich in 1995. At first, it was called <br>                        LiveScript but was later name to <br>                        JavaScript. JavaScript is the muscle <br>                        of the structure <br>                    </p> <br>  <br>  <br>  <br>  <br>                </div> <br>            </div> <br>        </div> <br>    </div> <br></body> <br>   <br></html></b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default