멋쟁이사자처럼 프론트엔드스쿨3기 회고(특강-0914)

✅배운점

1. 작업순서가 안잡혀있으면 코드의 품질에도 영향을 미침
2. 가장 먼저 할일은 항상 div(wrapper)를 써서 어떻게 공간을 차지하고 있는지 background-color로 먼저 보고, 가운데 정렬을 해준다.
3. 그리고 나서 wrapper 안에 하나의 덩어리를 만들 수 있어야 함
확장성을 위해서라면 가운데정렬된 wrapper랑 하나의 덩어리(section)랑 다르게 보는게 맞다(추가로 어떤 요소나 상하단에 또다른 컨텐츠가 추가될 수도 있으니까)
4. 그 다음에 관심가질 것은 section안에 몇 개의 덩어리로 나눌 수 있는지?
5. 전반적인 큰 틀,템플릿을 만든다고 생각해야지 특정 컨텐츠가 들어가야 한다고 생각하면 안된다(예를 들어 ul에도 ul이라는 특정한 컨텐츠가 아닌 전반적인 틀을 만들기 위해서 ul을 바로 써주는게 아니라 div로 하나 묶음)
6. h1에서 초기화를 안해주고 시작하면 코드가 지저분해짐

*em: 현재지정된 폰트사이즈의 배수

 

타이포그래피

h1안에 font-size로 24를 지정하고 텍스트를 작성하면 h1의 높이가 29로 나온다. 그리고 이 남는 공간 때문에 상당히 불편하다. 깔끔하게 글자가 있는 부분만 텍스트의 높이로 잡고 싶은데 알수없는 공간이 있기 때문이다.
이 남는 공간이 생기는 이유는 half-leading 때문이다.

(leading area가 생긴 이야기
원래 활자 사이의 글자를 띄우기 위해서 납을 끼워넣었다고 한다. 그리고 그 납의 이름이 lead이다.
M이라는 알파벳을 기준으로 이 캔버스 사이즈를 지정한 것이 1em이다. 그리고 두줄이 되면 납을 끼워넣어야 하니까 lead가 들어가게 되는 것이다. 포토샵에서도 아래쪽에 leading 영역이 들어가게 된다. lead까지 포함한 것이 한줄의 높이이다. 하지만! css의 세계에서는 leading area를 위아래로 나눠서 넣기 때문에 half leading라고 한다. )

즉 line height는 font-size+leading area 인 것이다.
이것을 지정하지 않을 때 font-family가 뭐냐에 따라서 line height 가 달라진다. 즉 line height는 em은 그대로이고 half lead가 커지는 것이다. 그리고 line height를 많이 키우면 글자가 아래로 내려간다.
그래서 이 lead를 없애기 위해서는 line height :1 해주면 된다.
그런데도! 간격이 쬐금 남는다. 이 간격까지 없애주기 위해서는 css leading trim이라는 속성을 쓰면 되는데 문제는 아직 구현한 브라우저가 없어서 쓸수 없음. 그래서 해결방법은 네거티브 마진으로 해결할 수 있다.

 

네거티브 마진

마진을 다른 관점으로 얘기하면, 마진은 차지하고 있는 공간의 크기이다. 마진을 안주면 차지하고 있는 공간의 크기랑 실제 보여지는 것이랑 똑같은 것이다.
그리고 마진을 주면 차지하고 있는 공간의 크기랑 실제 보여지는 것이랑 다른 것이다. 마진은 그 두 개를 별도로 가져갈 수 있는 property인 것이다. 실제 브라우저는 그만큼 있다고 생각한 것이다.

예제에서 margin-top :50px 하면 실제 차지하는 공간이 50px 만큼 늘어난 것이고 실제 보이는 이미지는 똑같다.
그러면 margin-top: -50px 을 하면 보이는 공간은 그대로인데 차지하는 공간이 50px 만큼 줄어들어서 시작하는 것이다.
margin-bottom:50px 하면 또 50이 줄어들어서 글자가 위로 올라온다. 이미지가 빨리 끝나니까 글자가 더 빨리 올라올 수 있다.
그런데 왜 이미지가 짤렸는가? 실제 이미지는 껍데기일뿐 공간을 차지하지 않는다.
마진을 차지하는 공간의 크기와 실제 보이는 그림을 별도로 이해한다면 마이너스 마진 이해가능
그리고 이것을 텍스트에서 수직 가운데 정렬을 위해서 사용가능하다. 그러나 폰트가 바뀌면 또 다시 값을 할당 해야하기 때문에 이걸 쓰는 것은 비추다.

---

페이지 만드는 순서를 좀더 유념해야 할것 같다. 그리고 코드도 다시봐야한다. 공부가 밀려서 걱정이다 ㅠㅠ..