13. 웹 표준 사이트 만들기(2019) - 헤더 아이콘 수정

13. 웹 표준 사이트 만들기(2019) - 헤더 아이콘 수정

사이트를 만들때 이미지를 표현하는 부분이 중요하다. 

 

크롬에서 아래 앱을 설치한다. 작성한 css의 유효성 검사를 해준다.

전체소스

 

index.html

...

<!-- 웹 폰트 -->

    <link href="hㅇttps://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

...

                <div class="header">

                    <div class="header-menu">

                        <a href="httㅇp://nanci.tistory.com/">Desinger</a>

                        <a href="">Publisher</a>

                        <a href="">Youtube</a>

                    </div>

                    <!-- //헤더 메뉴   -->

                    <div class="header-tit">

                        <h1>Professional Publisher &amp; Designer</h1><br/>

                        <a href="httㅇps://nanci.tistory.com/">nanci.tistory.com</a>

                    </div>

                    <!-- //헤더 타이틀  -->

                   

                    <!-- 이미지를 표현하는 방법

                       의미가 있는 것과 없는 것을 구분해서 작업을 해야 한다. 웹 접근성때문에 alt 태그를 꼭 사용해야 한다.

                        1. img 태그로 표현(이미지가 의미가 있을 때. 예를 들어, 네이버의 로고는 의미가 있다. ) / 이미지가 없을 시 alt 태그 - 대체 문자 표현

                        2. background 속성으로 표현(의미가 없을 때. 장식용) - 대체 문자 X

                        3. 요즘은 background속성으로 표현한다. /

                        - 가상으로 대체 문자를 만들어줌(웹 표준을 준수해야 하므로)IR 효과라고 한다.

                        - 이미지 스프라이트 기법(이미지를 하나로 묶어놓았다.)을 이용할 수 있고 이미지 용량이 줄어든다.

                        

                    -->

                    <div class="header-icon">

                        <!--

                        a[#].class$*4>span{icon$}

                        뒤에 배경이 있어서 이미지가 없어도 대체텍스트가 안 보이는 ir_pm을 선택한다. 

                       

                        -->

                        <a href="#" class="icon1"><span class="ir_pm">icon1</span></a>

                        <a href="#" class="icon2"><span class="ir_pm">icon2</span></a>

                        <a href="#" class="icon3"><span class="ir_pm">icon3</span></a>

                        <a href="#" class="icon4"><span class="ir_pm">icon4</span></a>

                    </div>

                    <!-- //헤더 아이콘  -->

                </div>

            </div>

        </div>

        <!-- //header -->

       

 

style.css

 

...

 

.header .header-icon {text-align: center; margin-top: 30px;}

/* 이미지 영역을 설정하기 위해 block을 주었고 일렬로 만들고 가운데로 오게 하기 위해 inline 속성을 주었다. img 태그를 사용하면 하나하나 가져와야 하는데 이미지 스프라이트 기법을 사용해서 이미지 하나로 표현했다.*/

.header .header-icon a{width: 60px; height: 60px; display: inline-block; background: url(../img/icon.png); margin: 0 3px;}

.header .header-icon a.icon1 {background-position: 0 0px;}

.header .header-icon a.icon2 {background-position: 0 -60px;}

.header .header-icon a.icon3 {background-position: 0 -120px;}

.header .header-icon a.icon4 {background-position: 0 -180px;}

.header .header-icon a.icon1:hover {background-position: -60px 0px;}

.header .header-icon a.icon2:hover {background-position: -60px -60px;}

.header .header-icon a.icon3:hover {background-position: -60px -120px;}

.header .header-icon a.icon4:hover {background-position: -60px -180px;}

 

reset.css

/* 폰트 초기화 */

/* 윈도우랑 맥이랑 기본폰트가 달라서 초기화함. font-family는 순차적으로 왼쪽부터 순차적으로 적용시켜줌. 첫번째가 없으면 다음거를 적용시킨다. 맥은 첫번째가 나오고 윈도우는 두번째인 맑은 고딕이 나온다. 글자가 틀리면 패딩 속성 적용 시 틀려지기 때문에 크로스 브라우징 작업을 통해 웹 폰트를 사용하여 통일시켜준다. 폰트가 안깔려 있어도 자동으로 설치해준다. 구글 폰트를 검색하여 아래와 같이 'Nanum Gothic'이 첫번째로 오게한다.line-height: 1.5는 1.5가 자손요소에게 상속된다. 예를 들어 h1의 font-size가 32px이라면 32*1.5= 48px 이 된다. */

body, input, textarea, select, button, table {

    font-family: 'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;

    color:  #222; font-size: 13px; line-height: 1.5;

}

...

 

/* IR 효과 */

/* 기존에 보이던 글자를 안보이게 하니 reset.css에 작성한다. */

/* IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수 있다. background 속성으로 이미지를 표시할 때 사용한다. */

/* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */

/* overflow: hidden은 내용이 넘치면 자른다. text-indent는 들여쓰기나 내어쓰기를 한다. -는 내어쓰기이다.  */

.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}

 

/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */

/* z-index는 position을 썻을 때 우선순위를 정해준다. position 속성을 이용하면 요소를 겹치게 놓을 수 있다. 이때 요소들의 수직 위치를 z-index 속성으로 정한다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려간다. */

.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}

 

/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; }