본 글은 (나)가 참고하기 위해 작성한 글입니다.
공부하는 과정에서 느낀 부분을 에세이처럼 정리하(려 하)고 있습니다.
하여, 제 글은 매우 주관적입니다😁
목차는 오른쪽을 참고해주세요👉👉
아직 공부하는 단계임에도 이것저것 만져보면서 감으로 CSS 작업을 하는 내 자신을 발견…
아무것도 안 하는 것보다 뭐라도 할 수 있는 만큼 만들어 보는 게 중요하대서 그런대로 하고 있다. 물론 정말 많은 경험이 쌓이면 어느 정도 나만의 규칙이 잡히겠지만 지금은 안개 속에서 눈만 부릅뜨고 더듬어 가며 운전하는 것 같은 기분이 든다.
뭔가 감이 잡히지 않을 때 하나 안심되었던 것은 그래도 초반부터 엉망은 아니라는 점이었다.
그 기초공사 제대로 하는 법을 지금 나름의 방식대로 정리하고자 한다.
CSS 기초공사 = CSS 리셋
CSS없이 HTML만 존재했던 시절, 기본 태그에는 기본 스타일이 있었다. 이후 CSS가 생기면서 이 스타일은 CSS의 기본(default)스타일이 되었고 이를 User-Agent StyleSheet라고 한다.
이건 브라우저 별로 다양한데, 이를 덮어쓰기 위한 작업 중의 하나로, CSS 리셋작업을 한다.
자세히는 모르지만 CSS 리셋방법에도 역사가 존재한다. 그 시작은 CSS Reset. 그런데 어차피 덮어씌워질 CSS를 굳이 0과 같이 설정할 필요가 있나라는 의문 등이 제기되며 다양한 방법들이 파생되기 시작했다. 그 중에 유명한 것은 다양한 브라우저의 CSS을 일단 통일해보자라는 시도에서 등장한 normalize.css이다. 이것 말고도 더 많은 방법들이 존재하나, 결국에는 개인이 원하는 것을 선택해서 적용해야 한다는 결론에 다다른다.
골라담아서 나만의 reset.css를 만드는 것도 재미있는 방법일 듯 싶다.
그래서 이 글은 초보 입장에서 작성해본 reset.css에 포함할 것들 정도가 되겠다.
1️⃣ * { box-sizing: border-box; }
CSS파일을 처음 열면 일단 이 작업부터 한다. 근데 왜인지 직관적으로 그 이유가 다가오지 않는다. 그래서 이것저것 만져봤다. 직접 div요소를 설정해서 너비는 300px로 설정하고 패딩 10px, 보더 5px, 마진 10px로 설정했다.
div {
background: blue;
width: 300px;
padding: 10px;
border: 5px;
margin: 10px;
box-sizing: border-box;
}아래 이 이미지는 보더박스를 설정하지 않았을 때이다. 총 너비가 320으로 나온다. 내가 width에 설정한 300px을 정확히 내부 콘텐츠 너비로만 판단하고 300에 양쪽 패딩을 더해서 320이 나온다. 개발자 도구를 보면 더 이해하기가 쉽다.
근데 보더박스를 설정하게 되면 아래 이미지처럼 브라우저에 표시되는 박스 자체는 크게 변경되는게 없어보이지만 사이즈에 특별한 차이가 있게 된다.
위 이미지의 오른쪽 박스를 보면 콘텐츠의 영역이 300px이 아니라 (어차피 추가될) 패딩 사이즈를 미리 빼고 콘텐츠 너비를 280으로 줄인 것을 볼 수 있다.
즉, ‘어차피 너가 패딩 생각없이 너비 정한 거 알아. 근데 너는 패딩 포함해서 박스 너비를 결정하고 싶었던 거지?’라는 심정을 보더박스 설정이 대변해주고 있다.
⚙️ my-reset.css
보더박스 외에도 font와 color에 대한 기본 설정을 해두면 편하다
* {
box-sizing: border-box;
font: inherit;
color: inherit;
}font를 inherit으로 설정하는 이유는, 버튼 등과 같은 요소에 기본 서식이 적용되는 등의 경우가 있기 때문이고 color는 textarea 등에 글자색이 내가 설정한 컬러로 들어갈 수 있게 설정하는 것이다.
2️⃣ body에 설정된 디폴트 값 없애기
멍 때리면서 내비게이션 바 작업을 하다보면 당황스러운 좌우 여백이 생긴다.
body에 기본적으로 설정된 margin 값을 0으로 만들어 줘야 한다. 아래를 보면 미세하게 여백이 생기는 것을 알 수 있다.
또한, margin뿐만 아니라 padding도 설정할 수 있다.
⚙️ my-reset.css
body {
margin:0;
padding:0;
}3️⃣ 기타 안 쓰는 스타일 제거하기
이밖에도 내가 원치 않는 빌트인 스타일이 적용되어있는 요소들이 있다.
(1) 리스트 스타일 제거하기
-
{list-style:none;}: 앞에 있는 불렛(ul인 경우)이 사라진다. -
{margin: 0; padding: 0;}: 불렛이 차지하고 있는 42px의 왼쪽 마진도 사라진다.
(2) 버튼 태그 스타일 제거하기
{background: none;}: 버튼의 마음에 안 드는 회색 배경을 없앤다{border: 0;}: 버튼의 경계 삭제{font: inherit;}: 내가 지정한 폰트를 적용하도록 강제하는 키워드로, 버튼에만 설정해줄 수도 있지만, body 태그 등에 설정해줄 수도 있다.{cursor:pointer;}: 4️⃣에 넣으려고 했지만, 버튼과 관련된 부분이라 여기서 넣었다. 버튼에 마우스 포인터가 있으면 손가락 모양으로 바뀐다. 유저에게 해당 버튼 영역이 클릭 가능한 부분임을 알려줄 수 있는 유용한 프로퍼티이다.
(3) 앵커 태그 스타일 제거하기
{text-decoration: none;}: 링크에 들어가는 밑줄을 제거할 수 있다.
⚙️ my-reset.css
ul ol {
list-style: none;
}
button {
background: none;
border: 0;
font: inherit;
cursor:pointer;
}
a {
test-decoration: none;
}4️⃣ 기타 유용한 스타일 추가하기
CSS 기초공사에 대해서 글을 작성하면서 결국 기초공사가 CSS 리셋과 관련된 내용임을 알게 되었다. 특히, 이 다른 글보다도 이 포스팅을 통해 리셋에 대한 이해도를 높일 수 있었다.(감사합니다)
아래 프로퍼티 설정은 윗 글의 일부를 발췌하였다.
:root {overflow-wrap: break-word;}: 글씨를 띄어쓰기없이 입력하는 경우, wrap되지 않고 박스를 빠져나가는 일을 막아주는 기능이라고 한다.{img, picture, video, canvas, svg {display: block;max-width:100%;}
⚙️ my-reset.css
:root {
overflow-wrap: break-word;
}
img, picture, video, canvas, svg {
display: block;
max-width:100%;
}(추가) margin 작업 시 유의점: margin collapsing
내가 설정한 마진이 안 나오는데?
블록 모델로 작업할 때, 위의 블록과 아래 블록의 마진이 상쇄되는 효과가 있다. 일반적으로 더 큰 마진을 가진 쪽이 작은 마진을 가진 쪽을 덮어버린다고 설명할 수 있다.
css에서 강제로 수행하는 작업인데 이렇게 하면 두 요소 사이의 거리가 너무 멀지 않게 유지할 수 있다. 덕분에 내가 블록 하나하나만 보고 설정해둔 마진들이 알아서 상쇄되어서 보기에 이상하지 않은 페이지로 만들어준다.
만약 의도적으로 마진을 두고 싶다면 margin-top/bottom을 통해 top,bottom에 발생하는 상쇄를 방지할 수 있다.
일반적으로 상쇄가 일어나는 이유는 다음 3가지이다.(예외도 있을 수 있음)
- 마진을 가진 인접형제 요소(붙어있는 형제요소)
- 마진을 가진 자식요소를 가진 부모요소
👉 이 경우에, 부모 요소는 자식 요소의 마진과 상쇄되고 마진이 큰 쪽이 살아남는다. 그 살아남은 마진은 부모에 적용된다. - 마진이 설정된 빈 요소
👉 자주 발생하는 경우는 아니지만, 비어있는 요소의 상/하단의 마진은 하나의 단일한 마진으로 병합되고 마찬가지로 큰 값이 살아남는다.
위의 여러 요소들을 종합하여, 나만의 reset.css를 만들어봤다.
* {
box-sizing: border-box;
font: inherit;
color: inherit;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
background: none;
border: 0;
cursor: pointer;
}
a {
test-decoration: none;
}
:root {
overflow-wrap: break-word;
}
img, picture, video, canvas, svg {
display: block;
max-width:100%;
}
ul ol {
list-style: none;
}왜인지 앞으로 이거 link에 넣어서 쓸 생각하니까 쫌 설렘...ㅎ
참고한 자료
