기본적인 reset.css 만들기

브라우저마다 기본 css가 다른데 그기본값을 초기화 하는 reset.css를 사용한다.

 

1. 작성하는 페이지 꽉채우기

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 

2. 작성하는 페이지 글자크기 및 글높이 초기화

html{
    font-size: 0.625em;
    line-height: 1.15; /*모든 브라우저에서 라인 높이를 수정합니다.*/
    -webkit-text-size-adjust: 100%; /*iOS의 방향 변경 후 글꼴 크기 조정을 방지합니다.*/
}

 

3.작성 페이지 글꼴 초기화

body{
    font-family: nbgR; /*폰트 종류는 변경가능*/
    line-height: 1;
}

 

4. 태그별 고유스타일 초기화

li{
    list-style: none;
}

a,i{
    color:#333;
    text-decoration: none;
}

 

5. 항상 버튼에 포인터 주기

button{
    cursor: pointer;
}

 

6. float로 흐트러진 배열 바로 잡기

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

 

7. modal메뉴 (*차후 설명 예정으로 모바일이나 웹상에 바로 sub창이 나타나며 뒤배경이 흐려지는 효과)

.modal{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rbga(0,0,0,0.6);
    display: none;
    z-index: 99;
}

 

8.웹접근성 (시각장애인용) 으로 보여질 필요는 없지만 읽어주는 웹 사용시 필요한 텍스트

.ir_pm{
    text-indent: -999em;
    white-space: nowrap;
    overflow: hidden;
}
/*사용된 이미지의 대체텍스트 시각장애인용*/
.ir_wa{
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -10;
    width: 100%;
    height: 100%;
}/* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen_out{
    position: absolute;
    top: -9999em;
    left: -9999em;
}