<실습 중 생긴 문제>
하단의 '사용 기술' 부분의 checkbox를 들여쓰기 하고 싶지만 잘 되지 않았습니다.
- '사용 기술' 부분은 span태그이며, 높이 지정을 위해 display:inline-block 설정을 하였습니다.
- checkbox부분은 글 높이 지정을 위해 style 설정은 하였지만 하나의 span으로 묶었습니다.
<해결 방법>
간단히 들여쓰기 기능으로 해결될 것 같아 검색해보았습니다.
style="padding-left: 80px; text-indent: -80px;로 된다고 하는군요.
처음 찾아볼 때는 두번째 줄부터 들여쓰기 하는 기능이 있을 것이라 생각했지만 text-indent는 첫번째 줄을 들여쓰는 기능인가 봅니다. 그래서 반대로 text-indent로 첫번째 줄만 내어쓴 뒤, span 전체를 padding으로 들여써서 해결하는 모양입니다. 제가 못 찾은 것 뿐 원했던 기능을 가진 커맨드가 있을지도 모르겠네요! 더 찾아봐야죠.
<안되는데?>
아무튼 해당 기능은 제 코드에는 먹히지 않았습니다. 따로 연습해봤을 때는 됐지만 아마 checkbox용 label과 input에는 해당 기능이 먹히지 않는 것일지도 모르겠습니다...? 해당부분은 더 찾아보고 실습해봐야겠군요.
들여쓰기 기능이 실패했으니 어쩔 수 없이 체크박스 부분의 position을 조절하기로 했습니다. 해당 span을 저기에 박아버리면 줄이 바뀌더라도 두번째 줄도 그 자리에서 이어지겠죠.
display: inline;
position: absolute;
left: 85px;해당 부분을 div로 묶은 뒤 상단과 같이 처리했습니다. 아직 저 position 기능에 어떤 요소가 있는지, 요소마다 어떤 역할을 하는지 정확히 파악하지는 못했습니다. 다음 공부할거리가 생겼네요! 일단 absolute는 부모 요소의 top, left를 기준으로 위치를 지정해 주는 것으로 이해했습니다. 저는 미리 사용기술 text와 checkbox를 미리 div로 묶어놓았기에 body를 기준으로 잡는 사고가 나지는 않았습니다.
일단 어떻게든 원하는 결과가 나왔네요.
<공부해야할 것>
- position 기능 씹고 뜯고 맛보기. 즐길수는..있나?
- text-indent가 작동하지 않은 이유 찾기
-> 못 찾더라도 하다못해 실습 더 해보기
<복습>
오늘 flex를 배웠습니다. 쉽게 해결할 수 있었네요.
