교수님 말씀에 css 만만하게 보다가 큰 코 다친다고 했는데, 맞는 말이다.
javascript에 급급하다가 막상 css를 짜려니까 눈 앞이 깜깜한 것이다.
그래서 잠시 css 공부를 확실히 하고 넘어가려고 한다.

도움 받은 사이트는 코드메이트!
css 심화편이다.

링크 | 코드메이트 css 심화편

padding과 margin의 차이점

맨날 헷갈렸다. css를 꺼리게 된 장본인이라 해도 될 듯하다. 이참에 외워버리자.

마바패안
마바패안
마바패안

마진은 박스 테두리의 바깥
패딩은 박스 테두리의 안쪽
...이다.

<!--margin code-->
<div style="background-color: #eeeeee">
            <a href="#" style="display: inline-block; padding: 20px">홈</a>
            <a href="#" style="display: inline-block; padding: 20px">
                벨로그 바로가기
            </a>
            <a href="#" style="display: inline-block; padding: 20px"
                >네비게이션</a>
        </div>

<!--padding code-->
<div style="background-color: #eeeeee">
            <a href="#" style="display: inline-block; margin: 20px">홈</a>
            <a href="#" style="display: inline-block; padding: 20px">
                벨로그 바로가기
            </a>
            <a href="#" style="display: inline-block; padding: 20px"
                >네비게이션</a>

마진만 설정하면 딱 "텍스트 크기만큼만" 클릭된다.
패딩은 설정값 만큼 주변 상자를 눌러도 클릭이 된다.