마카로닉스

1916 No

웹표준 사이트 만들기 ( Webstoryboy) - 1 기본셋팅, Layout, header, block 와 inline 차이 ,폰트 적용, ir 효과 적용

2022-09-08 22:38:37 By 라이트 0 457 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

강의 목록 : https://www.youtube.com/playlist?list=PL4UVBBIc6giKkfYN_2TVPgbMpd87lJEfg

01. 웹표준 사이트 만들기 - 기본 셋팅하기
02. 웹표준 사이트 만들기 - Layout1
03. 웹표준 사이트 만들기 - Layout2
04. 웹표준 사이트 만들기 - Layout3
05. 웹표준 사이트 만들기 - Layout4
06. 웹표준 사이트 만들기 - header1
07. 웹표준 사이트 만들기 - header2
08. 웹표준 사이트 만들기 - header3
09. 웹표준 사이트 만들기 - header4
10. 웹표준 사이트 만들기 - header5
11. 웹표준 사이트 만들기 - header6
12. 웹표준 사이트 만들기 - header7
13. 웹표준 사이트 만들기 - header8

강의 자료는 여기서 참고하세요~

현재 준비중이지만 http://webstoryboy.co.kr/3

HTML/CSS는 여기서 참고하세요~ http://coderap.tistory.com/

동영상 소스는 여기서 확인하세요~ http://wtss.tistory.com/category/Webs...

CSS 소스는 여기서 확인하세요~ http://wsss.tistory.com/

이쿼리 소스는 여기서 확인하세요 http://codejss.tistory.com/

소스 :

1) https://github.com/webstoryboy/webstandard

2) https://github.com/braverokmc79/web_publishing_project1

결과 화면 : https://braverokmc79.github.io/web_publishing_project1/#

01. 웹표준 사이트 만들기 - 기본 셋팅하기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." >
    <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" >
    <title>Webstandard</title>
</head>
<body>
    
</body>
</html>

02. 웹표준 사이트 만들기 - Layout1

03. 웹표준 사이트 만들기 - Layout2

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." >
    <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" >
    <title>Webstandard</title>
    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  
    
    <div id="wrap">
        <div id="header"></div>
        <div id="contents"></div>
        <div id="footer"></div>
    </div>



</body>
</html>

css/style.css

#wrap{}
#header{}
#contents{}
#footer{}

04. 웹표준 사이트 만들기 - Layout3

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." >
    <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" >
    <title>Webstandard</title>
    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  
    
    <div id="wrap">
        <div id="header">
            <div class="container">header</div>
        </div>
        <div id="contents">
            <div class="container">contents</div>
        </div>
        <div id="footer">
            <div class="container">
                footer
            </div>
        </div>
    </div>



</body>
</html>

reset.css

/* 여백 초기화 */
@charset "utf-8";
body,div,dl,dd,dt,ul,li,ol,h1,h2,h3,h4,h5,h6,form,legend,textarea,input,select,fieldset, p,button{margin: 0;padding: 0;}

style.css

/* layout */
#wrap{ width: 100%;}
#header{width: 100% ; height: 327px; background-color: #999;}
#contents{width: 100%; height: 400px; background-color: #888;}
#footer{width: 100%; height: 200px; background-color: #777;}


/* container */
.container{width:900px; background-color: rgba(255,255,255,0.4); margin: 0 auto;}

05. 웹표준 사이트 만들기 - Layout4

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트 수업 입니다." >
    <meta name="keywords" content="웹표준,웹표준사이트, 웹접근성, webstroyboy" >
    <title>Webstandard</title>
    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  
    
    <div id="wrap">
        <div id="header">
            <div class="container">header</div>
        </div>
        <!-- //header -->
        <div id="contents">
            <div id="cont-nav">
                <div class="container">cont-nav</div>
            </div>
            <!-- //cont-nav -->
            <div id="cont-tit">
                <div class="container">cont-tit</div>
            </div>
            <!-- //cont-tit -->
            <div id="cont-ban">
                <div class="container">cont-ban</div>
            </div>
            <!-- //cont-ban -->
            <div id="cont-cont">
                 <div class="container">cont-cont</div>
            </div>
            <!-- //cont-con -->
        </div>
        <!-- //contents -->
        <div id="footer">
            <div class="container">
                footer
            </div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->



</body>
</html>

style.css

/* layout */
#wrap{width: 100%;}
#header{width: 100% ; height: 327px; background-color: #999;}
#contents{width: 100%; height: 400px; background-color: #888;}
#footer{width: 100%; height: 200px; background-color: #777;}


/* container */
.container{width:900px; background-color: rgba(255,255,255,0.4); margin: 0 auto;}


/* contents layout */
#cont-nav{width: 100%; height: 100px;background-color: #666;}
#cont-tit{width: 100%;height: 100px;background-color: #555;}
#cont-ban{width: 100%;height: 100px;background-color: #333;}
#cont-cont{width: 100%;height: 100px;background-color: #222;}

06. 웹표준 사이트 만들기 - header1

이미지를 표현하는 방법

1. HTML 태그를 통해서 표현하는 방법(의미가 있는 이미지)(alt:대체 문자)

2. CSS 속성을 통해서 표현하는 방법 (의미가 없는 이미지)

3. 이미지 스프라이트 방법(IR효과)

coderap CSS Description

https://coderap.tistory.com/121

07. 웹표준 사이트 만들기 - header2

block 와 inline 차이

index.html

        <div id="header">
            <div class="container">
                    <!-- block 
                         <div class="quick">
                        
                        <ul>
                            <li><a href="#">Designer Cafe</a></li>
                            <li><a href="#">Publisher Cafe</a></li>
                        </ul>                        
                    </div> -->
                    <div class="quick">
                        <a href="#">Designer Caf</a>
                        <a href="#">Publisher Cafe</a>
                    </div>
                    <div></div>
            </div>
        </div>

style.css

/* quick */
.quick{text-align: right;}
.quick ul{overflow: hidden;}
.quick ul li{float: left;}
.quick a{ color: #fff; padding: 5px 0 0 10px; display: inline-block;}
.quick a:hover{color: #ccc;}

08. 웹표준 사이트 만들기 - header3

폰트 적용

구글 폰트

https://fonts.google.com/specimen/Nanum+Gothic?subset=korean

구글 폰트 사용하기 (부분 적용하기)

index.html

~
<head>
    <!-- webfont -->
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet">


</head>

~

reset.css

/* 폰트 초기화 */
body, input, textarea, select, button, table{font-family: 'Nanum Gothic', sans-serif , "Noto Sans KR", "돋움", Dotum ; font-size: 12px; line-height: 1.7;}

09. 웹표준 사이트 만들기 - header4

index.html

        <div id="header">
            <div class="container">
                    <div class="quick">
                        <a href="#">Designer Caf 디자이너 카페</a>
                        <a href="#">Publisher Cafe 퍼블리셔 카페</a>
                    </div>


                    <!-- inline -->
                    <div class="title">
                        <p>Can See the Futrue, Only Dream</p>
                        <h1><a href="#">Webstoryboy.co.kr</a></h1>                                             
                    </div>


            </div>
        </div>

reset.css

/* 제목 스타일 초기화 */
h1, h2, h3,h4, h5, h6{font-size: 12px; font-weight: normal;}

style.css

/* title */
.title{text-align: center;}
.title p{background-color: #2698cb; font-size: 28px; display: inline-block; color:#fff; margin-top: 100px; padding: 5px 15px; text-transform: uppercase;}
.title h1 a{background-color: #4aa8d4; font-size: 18px; color: #fff;display: inline-block; text-transform: uppercase; padding: 5px 15px;}

10. 웹표준 사이트 만들기 - header5

index.html

~
    <div class="container">
                    <div class="quick">
                        <a href="#">Designer Caf 디자이너 카페</a>
                        <a href="#">Publisher Cafe 퍼블리셔 카페</a>
                    </div>


                    <!-- inline 
                     <div class="title">
                        <p>Can See the Futrue, Only Dream</p>
                        <h1><a href="#">Webstoryboy.co.kr</a></h1>                                             
                    </div> -->
                    
                    
                    <!-- position -->
                    <div class="title">
                        <p>Can See the Futrue, Only Dream</p>
                        <h1><a href="#">Webstoryboy.co.kr</a></h1>                                             
                    </div>

                    

            </div>
~

1) inline 방식 css

/* title inline  방식 css  
.title{text-align: center;}
.title p{background-color: #2698cb; font-size: 28px; display: inline-block; color:#fff; margin-top: 100px; padding: 5px 15px; text-transform: uppercase;}
.title h1 a{background-color: #4aa8d4; font-size: 18px; color: #fff;display: inline-block; text-transform: uppercase; padding: 5px 15px;}
 */

2)position 방식 css

 /* title position 방식 css */
.title{}
.title h1{position: absolute; left: 390px; top: 160px;}
.title h1 a{ background-color: #2698cb;font-size: 18px; color: #fff;text-transform: uppercase; padding: 5px 15px; display: block; }
.title p{background-color: #4aa8d4; font-size: 28px;  color:#fff;  padding: 5px 15px; text-transform: uppercase; position: absolute;left: 230px; top: 110px;}

소스 : https://github.com/braverokmc79/web_publishing_project1/commit/3626342ef6c2b5111f3b69bd1f91cda8b2a464d7

11. 웹표준 사이트 만들기 - header6

아이콘 이미지 마다 교체하는 방법

ul>li*4>a[href="#"]{icon$}

index.html

            <div class="icon">                         
                        <ul>
                            <li class="icon-tit1"><a href="#">icon1</a></li>
                            <li class="icon-tit2"><a href="#">icon2</a></li>
                            <li class="icon-tit3"><a href="#">icon3</a></li>
                            <li class="icon-tit4"><a href="#">icon4</a></li>
                        </ul>
                    </div>

reset.css

/* 블릿기호 초기화 */
li, ol, ul{list-style: none;}

style.css

다음 내용은 아이콘별 이미지가 없는 관계로 스프라이트 방식 적용

/* icon */
.icon{position: absolute; left: 360px; top:220px}
.icon ul{overflow: hidden;}
.icon ul li{float: left;}
.icon li a {width: 60px; height: 60px;  display:block; margin: 0 3px; background-image: url(../img/icon.png);}
.icon li a:hover{background-image: url(../img/icon.png); background-position-x: -60px;}
.icon li.icon-tit1 a{}
.icon li.icon-tit2 a{}
.icon li.icon-tit3 a{}
.icon li.icon-tit4 a{}

소스 : https://github.com/braverokmc79/web_publishing_project1/commit/72bdf3173ed0ed25560f0a9ef431d0b676c1de32

12. 웹표준 사이트 만들기 - header7

이미지 스프라이트(Image Sprite)란?

여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법

IR 기법(Image Replacement)은 무엇인가?

IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.

/* icon   스프라이트  방법 */
.icon{position: absolute; left: 360px; top:220px}
.icon ul{overflow: hidden;}
.icon ul li{float: left;}
.icon li a {width: 60px; height: 60px;  display:block; margin: 0 3px; background-image: url(../img/icon.png);}
.icon li a:hover{background-image: url(../img/icon.png); background-position-x: -60px;}
.icon li.icon-tit1 a{ }
.icon li.icon-tit2 a{background-position-y: 690px;}
.icon li.icon-tit3 a{background-position-y: 630px;}
.icon li.icon-tit4 a{background-position-y: 570px;}

소스 : https://github.com/braverokmc79/web_publishing_project1/commit/45dca7507b7b429d3b2a0acf58e83469c96074f7

13. 웹표준 사이트 만들기 - header8

ir 효과 적용

validator.kldp.org[마크업검사]

OpenWAX

https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe?hl=ko

Color Contrast Analyze

https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=ko

index.html

                    <div class="icon">                         
                        <ul>
                            <li class="icon-tit1"><a href="#"><span class="ir">icon1</span></a></li>
                            <li class="icon-tit2"><a href="#"><span class="ir">icon2</span></a></li>
                            <li class="icon-tit3"><a href="#"><span class="ir">icon3</span></a></li>
                            <li class="icon-tit4"><a href="#"><span class="ir">icon4</span></a></li>
                        </ul>
                    </div>

reset.css

/* ir 효과 */
.ir{width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; position: absolute; left: 0; top:0;}

style.css

/* icon   스프라이트  방법 */
.icon{position: absolute; left: 360px; top:220px}
.icon ul{overflow: hidden;}
.icon ul li{float: left;}
.icon li a {width: 60px; height: 60px;  display:block; margin: 0 3px; background-image: url(../img/icon.png);}
.icon li a:hover{background-image: url(../img/icon.png); background-position-x: -60px;}
.icon li.icon-tit1 a{ }
.icon li.icon-tit2 a{background-position-y: 690px;}
.icon li.icon-tit3 a{background-position-y: 630px;}
.icon li.icon-tit4 a{background-position-y: 570px;}