어제 책을 좀 읽다가 블로그를 쓰지 못하고 잠들었다.
할게 너무 많은데 물리적인 시간이 부족한가 싶다가도 새벽까지 공부하는 멋사 1기 수강생들을 보면 반성해야 된다는 생각도 든다.. 난 잠을 못 자면 다음 날 너무 힘들어서 무슨 일이 있어도 7시간을 자려고 하는데.. 프로젝트 시즌 오면 밤새서 코딩해야된다는 얘기 듣고 살짝쿵 놀라버렸다..ㅋㅋㅋㅋㅋ
여튼, 어제 읽었던 책은 HTML5+CSS3 웹표준의 정석(고경희 지음) 이다!
물론 완독을 하지는 못햇지만, 3주 동안 HTML, CSS에 대해서 배워서 그런지 빠르게 이해하며 읽을 수 있었다. 태그 부분을 복습하며 아직 헷갈리는 부분은 나중에 한번 더 정리해야겠다는 생각이 들었다.
그리고, 예전에 질의하려고 캡쳐했던 파일들을 보면서 3주만에 성장했다는 것도 느꼈다. 매번 수업마다 어렵다, 모르는게 너무 많다 등의 생각이 들어서 멘붕이 올 때도 있었지만 지난 날의 질의사항을 보며 지금은 이해하고 있는 자신이 대견스러웠다.ㅋㅋㅋㅋ
(자기애 킹.ㅋㅋㅋㅋㅋ)
어제는 수업이 끝나고 저녁 먹고 좀 쉬다가 책을 읽느라 따로 공부한 부분이 별로 없긴 하지만 그래도 정리해본다면..!! display 속성에 대해서 공부하였다.
display 속성은 매번 수업 때마다 사용하고 중요하다고 생각하지만, 각잡고 공부해본 적은 없어서 헷갈릴 때가 있었다. 수업을 들을 때면 이해가 100% 되지 않아도 진도에 맞춰 지나갈 때가 있었는데. 그러다 보면 이해가 되는 부분도 있고 아닌 부분도 있다. 근데 난 아직 display 속성에 대해 이해를 다 하지 못했다는 생각이 들어 공부하였다.
HTML의 요소는 블록 레벨 요소와 인라인 요소로 분류된다.
인라인 요소는 새로운 줄을 만들지 않으며, 필요한 너비만 차지한다는 속성을 가지며, 요소 목록으로는 a, abbr, b, br, button, date, em, ing, input, label, q, small, span, strong, sub, sup, textarea, time, var 등이 있다.
블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다는 속성을 가진다. 즉, 상자를 쌓는 것이라고 생각하면 되며, 요소 안에서만 나타날 수 있다.
요소의 목록에는 address, article, aside, blockquote, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1~h6, header, hr, li, main, nav, ol, p, pre, section, table, ul 등이 있다.
이때 요소가 가지는 시각적 표현 레벨을 변경할 수 있는 것이 'display' 이다.
하지만, display 속성을 사용한다고 해도 요소의 카테고리나 콘텐츠 모델은 바꿀 수 없다. 즉, span 요소의 display를 block로 지정하여도 그 안에 div 를 넣을 수 없다는 말이다.
display: inline;
컨텐츠 자체만을 꾸며주는 것으로, 컨텐츠 크기에 맞게 적용됨.
즉, 글자화 되기 때문에 글자만큼만 공간을 차지하고, 나머지 공간은 수평정렬 된다고 생각하면 된다.
diplay: block;
상자 형태로 최대한으로 늘어난 상태로 한줄을 차지하게 되어, 수직으로 정렬됨.
display: inline-block;
상자로 표현되어도 글자화 되는 속성을 가지기 때문에, 한줄에 여러 개의 상자가 정렬될 수 있다는 특별한 속성을 지님.
display: none;
내용이 없어짐.
실습을 하다보면 콘텐츠들을 겹쳐져서.. 배치하는 것이 항상 어렵게 느껴졌는데, 이제부터는 헷갈리지 말고 사용해야겠다!!
★ 긍정의 한줄!
시간은 삶의 동전이다. 그것은 내 수중에 있는 한 푼의 동전이며, 그것을 어떻게 쓸지는 나만이 결정할 수 있다. 다른 사람이 대신 쓰게 하지 않도록 조심하라.
- 칼 샌드버그 -
