******************** 글 보시기 전 참고사항 ********************
우선 제 글을 읽어주셔서 감사합니다.
저는 코딩 전문가가 아니라 일개 컴퓨터공학을 전공하며, 컴퓨터 언어를 사랑하는 대학생입니다.
이 블로그는 제가 자주 들여다보고 싶은, 그리고 이렇게 생각하면 편하여서 사람들과 공유하고 싶은
그런 저만의 노하우를 담아놓는 공간입니다.
그렇다보니 전문 지식이 아니라 저의 생각 위주로 글이 게시됩니다.
제가 드리고 싶은 말은 제 글이 정답이 아니기에, 읽으시는 분께서 선별적으로 읽어주셨으면 하는 것입니다.
명확히 문제가 되는 부분, 제가 잘못 알고 있는 부분은 지나치지 마시고
귀찮으시더라도 댓글 한번 달아주시면 감사하겠습니다.
******************************************************************
웹프로그래밍은 단순히 내가 원하는 기능을 잘 찾고, 그 해당 파트를 잘 적용하면 되겠거니 하고 생각을 해왔다.
그런데 최근 드는 생각은 생각보다 그 양이 상당히 방대하다는 것이다.
방대한 양을 담고 있는 사전이 있는데 이 사전을 일일이 코딩할 때마다 뒤적이면서 공부할 것인가..?
분명히 공부해야 될 부분이 있고 어떤 부분에 있어서는 암기를 해주면 좋을 것이라는 생각이 든다.
이해를 해야되는 부분은 확실히 이해를 해야 나중에 코딩을 할 때 "그래 이건 이거였지" 생각하며
참고하는 느낌으로 코딩할 수 있을 것이다.
웹프로그래밍은 크게 HTML 요소와 CSS 요소로 나누어볼 수 있다.
HTML 요소는 전체 코드를 관할하는 큰 흐름 즉 몸체 같은 느낌으로 보면 되고,
CSS 요소는 그런 몸체를 어떻게 "간지"나게 꾸며줄까를 관할하는 부분으로 보면 좋을 것 같다.
여기서 ------ 선을 기준으로 윗 부분이 CSS 요소이며 아랫부분이 HTML 요소이다.
위의 코드를 그대로 적용하여, 사이트를 열면 아래와 같이 나타난다.
HTML 요소에서 쓰인 것은 <div>와 <p>태그 뿐인데, 네모난 상자와 빨간테두리까지 형성됐다.
이 이유는 일단 기본적으로 모든 HTML 요소는 자리를 차지하는 네모 박스 모양으로 간주가 된다.
원래부터 그런 모양이었고 CSS 요소가 그것을 부각시킨 것 뿐이다.
만약에 CSS 요소가 없었다면 모두가 흰 바탕에 흰 테두리였을 것이기에 티만 나지 않았을 것이다.
방금 말한 네모박스는 또 네가지 구성요소로 이루어져있다.
바로 Content(내용) - Padding(테두리를 기준으로 내부여백) - Border(테두리) - Margin(테두리 기준 외부여백)
이다. 이를 그림으로 이해하기 쉽게 표현하자면
와 같이 나타낼 수 있다.
CSS 요소를 잘 보면 width : __px; height : __px; 라고 적혀있다
이건 박스모델의 가로 세로를 설정해주는 문구인데,
원칙적으로 이것은 Content 의 가로와 세로만을 의미한다.
그러니까 Padding 과 Border 의 폭은 포함되지 않은 것이다.
Box-sizing : border-box 라는 줄을 추가하게되면, Padding+Border+Content 까지 합쳐서
사이즈를 측정한다
외부여백을 제외하고 보여지는 크기만을 생각하고 싶다면 Box-sizing : border-box; 라는 줄을 CSS-div 내에 포함시켜주면 되겠다.
margin(외부여백) 과 padding(내부여백)은 각각 상하좌우를 따로따로
margin-top:__px;
margin-botton:__px;
margin-left:__px;
margin-right:__px;
로 설정해줄 수도 있지만,
margin : __px __px __px __px 로 입력해도 설정이 된다.
인자가 네개가 들어가면 상-우-하-좌(시계방향) 순으로 설정이되고 3개가 들어가면 상 좌/우 하 이며, 2개가 들어가면 상하 좌우로 설정이 된다.
만약에 HTML 요소에서 <div>가 다양해서 외부여백이 서로 겹칠때는 어떻게 될까?
-> 큰쪽으로 병합이 된다.
