[TIL] 211105
느낀점
우선.... 오늘 처음 제대로 코드리뷰를 받아서 참 의미가 깊다. 짧은 코드였지만 모두와 내 코드를 공유했고, 이 코드의 어떤 태그의 어떤 점 까지 상세하게 피드백 해 주셨다. 이게 진짜 코드리뷰이고 개발에 진심인 사수분들이 계신 기업으로 꼭 가야겠다는 다짐을 할 수 있었다.
그리고 이렇게 까지 css를 자세히 판 적이 있었나? 난 그저 구현을 위한 겉핥기만 해 온 것이 아닌가 반성하는 시간을 가졌다. 사실 겉핥기라도 알았기 때문에 이해도가 높았던 것 같다. 완전히 처음이었다면 이해도가 더 낮았을 것 이다.
배운점
- inline 요소는 margin-top, bottom이 안먹힌다. width도 줄 수 없다. 이러한 단점을 해결하기 위해 있는 것이 inline-block 인 것이다.
- 브라우저는 텍스트 하나하나를 인라인 요소로 생각한다. inline-block으로 수평 정렬을 사용하지는 않는데, 이는 자동으로 각 요소 사이에 공백이 생기기 때문이다.
<head>
<style>
body {
margin: 3rem;
}
div {
background: pink;
display: inline-block;
font-size: 10rem;
}
</style>
</head>
<body>
<div>hi</div>
<div>hi</div>
<div>hi</div>
</body>
이는 아래와 같이 코딩하면 해결되는데 우리의 가독성은 누가 책임지는가?
<body>
<div>hi</div><div>hi</div><div>hi</div>
</body>부모에게 font-size 를 0을 줄 수도 있다. 그러나 굳이 그렇게 어렵게 하지 않는다.
둘의 차이를 정리하자면,
inline: 수평 정렬을 자유롭게 하고 싶을 때
inline-block: 넓이 높이 마진을 자유롭게 사용하고 싶을 때 사용한다.
- 우선 css의 프레임 구조는 이렇게 돼 있다.
우리가 일반적으로 적용 되는 것이 normal flow, float을 주면 normal flow위에 붕 떠서 float이 되고 position은 absolute등을 주면 저렇게 변한다.
- position relative는 자기 자신을 참조, absolute는 바로 위 relative를 참조한다.
- absolute를 아래와 같을 때 사용 할 수도 있다.
이 것은 시각장애인들을 기준으로 생각해야 한다. 스크린 리더기는 위에서부터 아래로 읽는데, 더보기 버튼을 absolute로 빼지 않았다면
언론사별 가장 많이 본 뉴스 -> 오전 9시 ~ -> 더보기
이런 순서로 읽힐 것이다. 시각장애인들은 황당 한 상황이 오는 것이다. 더보기? 아직 안봤는데?
때문에, 더보기 버튼은 가장 아래로 마크업 하고 absolute로 위로 올리는 것 이다. 그렇다면 다 읽고 스크린리더기가 더보기를 읽을 수 있다.
- position sticky는 가장 가까운 부모에 붙는다. 처음 시작할 땐 static처럼 보이겠지만 위치 offset을 넘길 때 까지 붙어있다 벗어난다. 부모 요소의 영역 스크롤이 끝나면 해제된다. 그리고 sticky는 나온 지 얼마 안돼서 벤더프리픽스를 사용해야 한다.
- float은 원래 텍스트 레이아웃을 위해 탄생한 속성이다. 아 여기서 '엥 이제 flex랑 grid 있는데 왜 float?'이라고 생각할 수 있다. 그러나 아직 많은 대기업들은 인터넷 익스플로러가 사라지지 않는 한, 다시 거대한 서비스를 갈아엎지 않는 한 float을 사용할 것 이다. 아직 많이 float을 사용한다고 한다.
- float은 붕 뜨는 속성이기 때문에 형제요소나 부모요소가 못 알아볼 수 있다. normal-flow 단 요소들이 알아볼 수 없다는 것이다. 이 때, 못알아보는 요소에 clear을 쓰면 구조가 깨지지 않고 나타난다. clear-fix라고 쓰고 이를 필요한 부분에 클래스로 넣어주면 되는데, 형식은 아래와 같다.
.clear-fix::after {
display: block;
content: '';
clear: both;
}이 clear-fix는 현업에서 클래스로 만들어 부모 요소에 적용한다. 자식의 float을 해제하고 싶을 때.
- 가상요소 after은 요소의 가장 마지막 자식으로, html에 존재하지 않는 가상의 자식을 준다. before은 가장 첫번째 자식 앞에 준다.
그럼 왜 가상요소를 만든걸까? html에 필요 없는 새로운 요소를 만드는 것은 렌더링에 좋지 않다. html 태그는 최대한 적게 쓰는 것이 효율적인 코딩이다. 가상 요소는 css단에서 의미가 없는 마크업을 위해 사용한다.
- 레이아웃 구성 시, 부모가 되는 요소의 높이는 지정하지 않는 것이 좋다. 만약 자식이 몇 개인지 모르면 어쩌려고? 만약 자식이 동적으로 생겨나면 높이는 어떡하려고? 이와 비슷하게 nth-child 속성의 장점은 해당하는 요소를 딱 잡아낼 수 있지만 자식요소가 추가되면 재사용성에 문제가 비슷하게 생긴다. 현업에서는 class로 해결한다.
- block레벨 엘리먼트는 어차피 width가 100%이기 때문에 굳이 width100%를 넣어주지 않아도 된다.
- article 태그 내부의 img 태그는 alt 속성이 필요하지 않다.
- 디자이너가 던져준 이미지 대로만 만들면 안된다. 프론트엔드 개발자는 어떤 기능일지 생각하고 생각하고 만들어야 한다.
- vertical align은 inline요소에만 적용할 수 있다.
- 이미지는 예외적으로 넓이와 높이를 조절할 수 있는 인라인 요소이다.
- 의미 없는 이미지는 가상요소를 만든 후 그 요소의 background-image로 적용시킨다.
- button은 type을 꼭 넣어야 함. button에 type이 없으면 디폴트가 submit임. type을 쓰거나 앵커태그를 쓰는게 나음. 알트값은 너무 용도에 충실 할 필요가 없다. 버튼 태그는 버튼을 눌렀을 때 어떤 기능이 나타날 때 많이 쓴다. 네이버 로그인 버튼은 앵커태그를 이용함.
- 앵커태그는 모르겠는데 버튼은 기본적으로 텍스트를 수직정렬 해 준다.
- float을 사용할 땐 안전하게 뒤에 내용이 더 올 수 있기 때문에 해제해주어야 한다. 문제를 미연에 차단하는 방탄웹이라고도 부른다. 레이아웃을 무너지지 않게 차단하는 것 이다.
- flex와 inline-flex의 차이는 크롬의 보라색 부분.... 거기가 flex가 block처럼 영역을 다 차지해서 그런 것 이었다. inline flex는 영역이 inline처럼 사라진다.
- flex는 자신의 직계자식에게만 적용된다.
- justify-contents
space-between: 제일 끝 중간으로 / evenly: 아이템 간격이 완전히 같음 / around: 각각의 간격 넓이가 같음. 박스 사이의 간격이 두 배가 됨.