이진욱의코딩

이번 시간에는 앞서 배웠던 html과 css를 이용해서 핀터레스트 스타일의 레이아웃을 만들 겁니다. 핀터레스트 사이트에 접속하시면 이렇게 구조화가 되어있습니다. 이것을 masonry라고 하며 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러한 모양의 레이아웃을 masonry 레이아웃이라고 합니다. 여기서는 masonry을 만드는 방법을 알아보겠습니다. change view로 코드들을 먼저 살펴보겠습니다. 여기 이 코드 들을 참조해서 만들어볼게요. 스파이더맨 배경화면 이렇게 여러 개를 만들고 나면 이렇게 일자로 쭉 나열되어 있습니다. 위의 핀터레스트 형태로 만들기 위해 ..

이번 시간은 여러 가지 테두리 사용법과 background적용에 대해서 알아보도록 하겠습니다. 테두리라고 하면 border을 말하는 것쯤은 알고 있을 거라고 생각합니다. 보통 border값을 정할때는 border: 10px solid pink; 이런 식으로 solid를 많이 쓰지만 이번 시간에는 여러 가지 선종류에 대해서 알려드리겠습니다. 선종류로는 solid, dotted, dashed, double ridge, groove, inset, outset 등이 존재합니다. 하나씩 입력해보시면서 변화를 보시면 좋을 겁니다. 그리고 한번 응용도 해보도록 하겠습니다. 우리가 이번에 만들 것을 먼저 보도록 하지요. 결과물입니다. 이것을 앞서 배웠던 내용을 바탕으로 한번 만들어보세요!! 결과 코드는 밑에 적어놓겠습..

이번 시간에는 html의 여러 가지 속성에 대해 차례대로 알아보는 시간을 가지도록 하겠습니다. 1.box-sizing 2.display 3.visibility_opacity 1.box-sizing box-sizing속성은 padding적용시 넓이, 높이에 영향을 주는 것을 방지하는 속성입니다. 인터넷 익스플로어9,10버전 이상만 사용 가능하고 그 전 버전 들은 사용 불가능입니다. Lorem ipsum dolor sit amet consectetur. Lorem ipsum . style태그에 first, last-child속성을 적어서 서로 인접한 두 도형의 간격을 조정합니다. 2.display 여러 가지 도형들을 세로로 배치할 때 사용되는 속성입니다. 가로로 배치하는 일은 드물기 때문에 가로배치를 하면 ..

이번 시간에는 css의 여러 가지 속성에 대해 알아보도록 하겠습니다. 목차 1. 단위크기 2. 단위 색상 3. 단위 url 4. 박스 5. margin, padding 1. 단위 크기 일반적으로 css로 스타일을 줬을 때 기본적으로 설정된 h1태그의 폰트 사이즈는 32px이고, p태그의 폰트사이즈는 16px입니다. h1{font-size: 32px;} p{font-size: 16px;} style태그에서 변화를 줬을 때 css는 부모 폰트의 크기를 기준으로 설정합니다. Lorem, ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem..

이번 시간에는 웹문서의 본문을 구성하는 요소들 중에 section울 구성하는 요소에 대하여 알아봅시다. 1. body요소 body요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body요소는 브라우저가 렌더링해야 할 범위를 알려준다. 2. header요소 html5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택 등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다. 동아스포츠신문 국내에서 제일 많이 보는 스포츠신문 문서나 각 section, article의 헤더부분에 사용 가능하며, 그것들의 제목이나 간단한 ..

오늘 포스팅 내용은 여러 가지 태그에 대해 알아보는 시간을 가지도록 하겠습니다. -목차- 1.오디오태그 오디오 태그는 웹브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그이다. HTML5에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. 옛날 html은 각자 확장자에 따라서 mp3, ogg, wmv 등이 있었지만 현재는 mp3만 적어도 됩니다. 이런 식으로 말이죠. controls는 말 그대로 음악 재생할 때 직접 컨트롤을 할 수 있게 만드는 명령어입니다. 2. 비디오 태그 비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다. 원래 HTML5 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있..