css

🧩 css 파일 구조

• reset.css 초기화
• common.css 공통으로 쓰이는 영역
• layout.css header, footer, body 큰 구조물의 공통 스타일
• main.css 메인이미지
• style.css main페이지가 아닌 모든 서브스타일

🧩 Reset

기본리셋

* {margin:0; padding:0; font:inherit;}
body {line-height:1;}
ul {list-style:none;}
a {text-decoration:none; color:inherit;}
img {display:block; max-width:100%;}

*태그가 가지고 있는 기본영역들이 사라지고, 폰트 기본 사이즈 16이 된다
ul 기본으로 가지고 있는 스타일이 사라짐
a 밑줄과 색 리셋
img 인라인블록 요소이기 때문에 여백을 없애기 위함(vertical-align:top 쓰기도 함)과 이미지 크기가 내 화면을 넘어가지 않도록 함

🧩 float

float로 정렬을 할때, 반드시 해제작업을 해준다.

::after {
	content:''; 빈칸생성
    display:block; line 여백없애기 위함
    clear: both; float 양쪽해제
}

overflow:hidden 으로 간단하게 쓸 순 있지만, 단점! 넘치는게 다 잘려버린다

🧩 가운데 위치시키기

부모가 position: relative; 를 가지고 있어야 한다

{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

🧩 width

width가 유동적일 때 calc()를 활용한다
ex) 10px의 여유를 가지고 세등분으로 나눠야 한다면

{
	width: calc((100% - 20px) / 3);
	margin-right: 10px;
}
:last-child{
	margin-right: 0;
}

🧩 flex

flex 공부
float가 아닌 flex로 정렬하기
부모속성에게 기본적으로 display: flex; 가 있어야 한다
자식에게 flex:1; 을 주면 1대'자식의수'로 커지게 된다
gap을 주어 여백 주기

🧩 IR/IS 기법

IR(Image Replacement) 기법
이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것
웹 접근성과 검색엔진최적화를 위해서도 필요하다

.blind{
    position: absolute;   
    width: 1px;height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
}

IS(Image Sprite) 기법
조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법이다. 서버부하와 서버측 트레픽이 줄어든다.

• 활용 방법
  background-position을 이용하여 좌표를 잡아준다
  

🧩 font

• sans-serit -> 고딕
• serif -> 궁서

🧩 webkit

webkit-엔진 이란???

• 사파리
• 크롬