FE/HTML, CSS

[CSS] Reset CSS와 Normalize CSS이란 무엇일까?

Reset CSS, Normalize CSS는 브라우저마다 HTML 요소에 대한 기본 CSS값이 다르기 때문에 그 차이를 없애기 위해 필요하다(크로스 브라우징을 위해 사용). Reset.css 모든 브라우저의 내장 스타일을 '없애는' 기법이다. 아무 스타일도 없는 상태에서 스타일링을 시작하며, 공식적으로 권장하는 기법이라기보다 실무에서 편의에 의해 임의로 지정하는 설정이다. * { margin: 0; padding: 0; border: none; } 초기에 reset이라는 개념이 잡히기 전에는 *으로 초기화하는 방법을 많이 사용했으나 전역으로 사용되는만큼 불필요한 렌더링이 발생해 최근에는 많이 사용되지 않는다. Eric Mayer의 reset.css를 많이 이용한다. CSS Tools: Reset CSS..

[CSS] 마진 겹침 현상(Margin-Collapsing)

마진 겹침 현상이란? 인접한 마진이 상쇄되는 현상을 말한다. 블록 요소에 한해서 좌우 방향은 적용되지 않고 오직 수직방향으로만 적용되며, 마진값이 0이더라도 상쇄 규칙은 적용된다. 또한 좌우 마진은 겹치더라도 상쇄되지 않는다. 이는 아래의 경우처럼 3가지 상황에서 발생한다. 1. 형제 박스요소 간에 상하 마진이 겹칠 때 div { background-color: tomato; width: 100px; height: 100px; } .d1 { margin-bottom: 60px; } .d2 { margin-top: 30px; } 위와 같을 때, 생각대로라면 d1과 d2에 각각 margin-bottom과 margin-top을 주었으니 전체 margin이 90px이 되어야 할 것같지만 그렇지 않다. 형제 블록..

[HTML] HTML img 태그에 alt 속성값을 넣어줘야 하는 이유

새 프로젝트의 html을 짜기 위해서 다른 웹사이트들의 html 구조를 살펴보고 있었는데 보통 태그 안에 태그를 넣고 거기에 alt 속성값을 적어놓은 것을 발견했다. 전에는 alt는 써본적이 없었기 때문에 굳이 왜 써주는 것인지 찾아보았다. 보통 이미지 태그는 아래와 같다. 먼저 img폴더 안에있는 google.png파일을 불러왔고, alt로 로고라는 설명을 덧붙였다. 이번에는 이미지 경로를 틀린 경로로 바꿔보았다. 이미지가 깨졌지만 alt 속성에 써놓은 "로고"라는 텍스트가 나오는 것을 볼 수 있다. 이처럼 만약 서버에 문제가 생겼다든지 이미지에 문제가 있을 경우 이미지가 엑박으로 뜰 수 있다. 이 때 이미지 대신 해당 메뉴가 무엇인지 알 수 있게 해주는 것이 alt 속성이다. (그리고 이 alt값은 ..