이진욱의코딩

이번에는 갤럭시 버즈 실버 색상 개봉기와 3개월 사용기에 대해서 적어보겠습니다. 삼성 갤럭시노트10를 구매하면서 갤럭시 버즈 할인권으로 실제 가격보다 저렴하게 구매하게 되었습니다. 실제 구매가격은 99000원에 구매를 했습니다. 요즘 중고나라에 매물이 많이 풀려서 현시세보다 저렴하게 구매할 수 있는 찬스입니다. 만약 중고나라 또는 지인을 통해서 구매를 하신 분들은 배송이 언제 오는지 궁금하신 분들이 많으실 텐데요. 그렇다면갤럭시노트1 0 이벤트 몰 [1833-6010]에 전화를 한 뒤 주문자 정보를 입력하면 배송이 언제 오는지 확인할 수 있습니다. 따로 배송비가 들지는 않았습니다. 삼성 기어 아이콘이 1세대 2세대를 지나서 3세대가 나왔는데 이번 3세대부터는 갤럭시 버즈라는 이름으로 바뀌었습니다. 삼성이..

이번 시간에는 css에서 float속성에 대해서 알아보도록 하겠습니다. 흔히 블로그에서 글을 보거나 책에서 첫 페이지 시작할 때 첫 문자는 대문자로 합니다. 이 속성을 "::first-letter" 이라는 속성입니다. p::first-letter{font-size:50px; color: blue;} 이렇게 색상과 크기를 조정해서 사용할수 있습니다. 이미지를 넣어서 그 이미지에 맞게 글을 배치하는 방법도 있습니다. 바로 float속성에서 none,left,right를 선택해서 사용하면 됩니다. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus ad totam nam ut aspernatur saepe possimus nisi nemo..

이번 시간은 css의 기술 중 하나인 위치에 대해 알아보도록 하겠습니다. 먼저 position의 상대 위치에 대해 알아보겠습니다. 여러 가지 오브젝트를 생성 후에 위치를 조정하게 될 때 사용하며 position의 옵션 중 relative를 선택하면 기존 오브젝트에 대해 상대적으로 배치되게 만듭니다. 우선, 예시를 보면서 설명드리겠습니다. box1 box2 box3 position:relative를 사용하면 이런 식으로 나타낼 수 있습니다. 만약 상대적으로 오브젝트를 이동하다가 겹치는 부분이 있다면 z-index를 써서 맨 앞부분에 나타낼 부분과 뒷부분에 위치시킴을 조정할 수 있습니다. z-index값이 높을수록 우선권을 얻습니다. 위치 속성 중 position: relative는 적용하는 요소를 기준으로..

이번 시간에는 css의 여러 가지 폰트 속성에 대해 알아보겠습니다. 첫 번째로는 text-align속성인데요 text-align은 블락 요소 내 인라인(텍스트, 이미지 등) 요소의 문단 정렬을 위한 속성으로, "블락 요소"에 적용해야 합니다. 이미지(img) 같은 경우에는 인라인 요소이기 때문에 적용이 불가능합니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, possimus. Lorem ipsum dolor sit amet, consectetur adipisicing. 두 번째로는 vertical-align속성인데요 흔히 수직 정렬할 때 사용됩니다. 텍스트를 수직으로 정렬하는 속성으로 vertiacl-align를 사..

이번 시간에는 앞서 배웠던 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 여러 가지 도형들을 세로로 배치할 때 사용되는 속성입니다. 가로로 배치하는 일은 드물기 때문에 가로배치를 하면 ..