'programming/Front-end' 카테고리의 글 목록 (3 Page) :: 놓치기 쉬운 정보 저장
728x90
반응형
SMALL

작성간 느낀점 : 블록 사이즈가 커서 7칸이 나오지를 않아 어려움을 겪었으나, 사이즈를 줄여가며 하다보니 7칸이 맞춰졌고 그 후로 수월하게 만들어갔음.

 

 

728x90
반응형
LIST
728x90
반응형
SMALL
5n + 1 = 5의 배수만큼 이동
728x90
반응형
LIST
728x90
반응형
SMALL

first-child : 첫번째

nth-child(2) : "2" 번째  // ( )괄호안의 숫자만큼 해당

last-child : 마지막

728x90
반응형
LIST
728x90
반응형
SMALL

CSS reset

CSS Reset은 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화하는 전략이다. 구글링 해보면 리셋 방법도 굉장히 다양하게 나와 있는 걸 알 수 있는데, 그 중 그나마 가장 유명한 건 Eric Meyer라는 개발자가 만들어놓은 CSS reset이다. 그런데 가장 최근 업데이트가 2011년에 있었던 만큼 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율을 초래할 수 있다는 비판이 있다.

그래서 최근에는 필요한 부분만 초기화를 하여 사용하기도 하거나 CSS Normalize라는 기법을 사용하는 전략이 생겨났다.

CSS Normalize

CSS Normalizes는 브라우저 간 유저 에이전트 스타일의 오차를 줄이고, 버그만 줄이는 방향으로 스타일을 재지정하는 거다. CSS Reset는 기본값을 다 싸그리 엎는 데 반해 CSS Normalize는 기본값들을 최대한 보존하고 수정을 최소화한다.

normalize.css 는 오픈 소스이기 때문에 이 코드를 파일로 저장해 HTML에 연결해 사용하면 된다.

*** a, body, ul, li, ol, li, h1, h2, h3, h4, h5, h6 은 사용하기전에 Normalize 해야 한다.

728x90
반응형
LIST
728x90
반응형
SMALL

margin : CSS 약식 속성은 요소 의 네 면 모두에 여백 영역 을 설정합니다.

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/margin

padding : CSS 약식 속성 은 한번에 요소의 네 면에 패딩 영역 을 설정합니다 .

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/padding

 

728x90
반응형
LIST

+ Recent posts

.content { max-width: 100%; width: 100%; } img { max-width: 100%; height: auto; }