반응형

프로그래밍 언어/HTML / JavaScript 6

FE공부2 - 웹스토리보이님의 레이아웃02 영상

https://www.youtube.com/watch?v=dNQZqNd_uUE 지난번 영상과 큰 차이가 없는 것 같네요 다만, overflow: hidden 에 대해 이야기를 하고 있습니다. 버그라고 이야기를 하고 있는데, 버그 아니라 표준입니다;; (물론 웹 표준이 구현에 구겨 맞춰 만들어진 감이 있긴 합니다.) https://www.w3.org/TR/CSS2/visuren.html#block-formatting Visual formatting model In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of the..

FE공부1 - 웹스토리보이님의 레이아웃01 영상

https://www.youtube.com/watch?v=qnwa6I5WosI "[레이아웃01] 사이트 만들기 프로젝트1 - float, flex, grid 레이아웃 유형별 연습하기" 라는 제목을 갖고 있는데, 내용은 레이아웃 만져보기 정도였습니다. 그래도 궁금한건 직접 찾아서 공부해보면 되서 나쁘지 않았습니다. 언급된 내용들 중 중요하다고 생각되는 것들을 기초적으로만 정리해보면 다음과 같습니다. - float https://developer.mozilla.org/ko/docs/Web/CSS/float CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라..

Syntax highlighter 를 Tistory에 적용하기

간만에 블로깅을 하면서, 옛날에 설정해놨던 syntax highlighter관련 코드들이 스킨 변경으로 날라간걸 알게 되었다. 간만에 다시 설정하려고 하다가 CDN이 없을까 검색해 봤는데이미 고마운 분이 간단하게 적용할 수 있는 스크립트를 제공하고 있었다. 적용 방법은 아래 주소를 참조.http://kay.starian.kr/22 직접 적용을 원한다면, Syntax highlighter 주소 : http://alexgorbatchev.com/SyntaxHighlighter/

doctype and margin

아무 생각없이 아래와 같은 CSS를 줬는데 동작하지 않아 대략 난감. body { width: 480px; text-align: center; margin-left: 0; margin-top: 0; } 한참을 헤매다 보니, HTML5로 동작하도록 태그를 준 경우와 안 준 경우에서 차이가 발생했다. 찾아보니 아래와 같은 글을 발견 http://www.webmasterworld.com/html/3533864.htm 자세한 이유는 더 분석해 봐야 할 것 같다. 일단 이유도 모르고 아래를 추가하니, 문제가 없어졌다. h1, p { margin: 0px; }

html에서 html tag를 쓸 수 있는가? (I don't like &lt;foo&gt; in <pre>.

웹으로 간단한 프레젠테이션을 만들려고 했더니, html 태그를 쓰는게 무척 귀찮다는 걸 깨달았다. 물론 괜찮은 자바스크립트 유틸리티들이 있으면 쉽게 할 수 있겠지만, 원하는건 메모장 펴놓고 직접 고치는 거였는데... xmp라는 태그가 있었으나, 해당 태그는 표준에서 제외되었다는 사실을 알았다. https://www.w3.org/Bugs/Public/show_bug.cgi?id=12235 ... 와 같은 방법으로 지원하면 안되는건가? :(

반응형