Dog foot print

오늘 낮에 position 속성에 관한 내용을 자스민 회원분이 업로드 하였는데 잘 이해하지 못하고 포스팅 한 것 같아서 아쉽다. 중요한 속성인 만큼 조금 신경을 써서 포스팅을 해야겠다. position 속성 positon은 어떤 것을 기준으로 상대적으로 옮겨질지 정하는 속성이다. 여지껏 position 속성을 몰랐다면 해당 margin 값을 이용해서 해당 html 요소를 옮겨왔을 것이다. 그러나 positon 속성을 쓰면 화면내에서 꽤나 자유롭게 요소를 배치할 수 있게 된다. positon의 value는 다음과 같다. static : 기본값 , top, left, right, bottom을 줘도 움직이지 않는다. relative : 자신이 static이었을때 위치에서 이동한다. absolute : 부모가..

우리 자스민 그룹원들이 공부를 매일 안 해서 조금 걱정이다... 아마 내가 이 글을 오늘 단톡방에 올려도 클릭해서 보지 않을 것 같다. 만약 이글을 자스민 그룹원들이 본다면 호형 멋쟁이라고 카톡에 올려주길 바란다. box-sizing box모델은 다음과 같이 ''content, padding , border, margin " 으로 이루어져 있다. 우리는 box모델의 크기를 제어하기 위해서 width 나 height를 적용한다. 그러나 해당 box모델에 padding 값이나 border 값을 할당한다면 우리가 주었던 width와 height 값을 넘어서 padding + border + width 값으로 해당 box 모델이 결정된다. 그러나 개발자가 padding을 사용하더라도 boder + padding..

2007년 현재는 고인이 된 스티브잡스가 it의 생태계를 완전히 뒤집는 아이템인 아이폰을 선보였다. 이 아이폰의 등장으로 인해서 웹디자이너들은 고민에 빠졌는데 바로 작은 디스플레이에서 기존의 웹은 너무 크고 불편하다는 것이였다. 그래서 작은 디스플레이에 맞게 웹을 새로 만들어야했다. 그래서 디자이너들이 할 수 있는 결정은 두 가지였다. 디바이스의 크기를 보고 새로운 페이지를 연결해주거나 기존 페이지에 미디어 쿼리를 활용 해 디바이스에 따라 css가 다르게 반응 하게 하는 것이였다. 미디어 쿼리의 사용 기본적인 media query의 사용이다. @media("크기"){} 형태로 작성이 되며 각 블록에 작성된 스타일은 미디어 쿼리에 적용된 한계를 벗어나면 적용되지 않는다. min-width, max-widt..

텍스트나 콘텐츠요소들을 세로 중앙정렬 하기에는 꽤나 골치아프다. 나름 내가 해결 했던 방법들 위주로 올려보도록 하겠다. line-height 사용하기 line-heigth 속성은 text가 자신의 박스모델에서 각 텍스트간의 상하간격을 정할 수 있다. line-height에 박스모델 만한 height값을 주게 된 다면 heigth값 /2 씩 텍스트 위 , 아래에 적용되서 해당 텍스트가 세로중앙에 존재하게 된다. div{ width: 200px; height: 200px; border: 1px solid black; text-align: center; line-height: 200px; } margin-top 과 position : absolute 속성을 이용한 수직정렬 position : absolute를..

html 에 css를 연결하는 적용 방법으로는 3가지가 있다. 어트리뷰트를 사용하기 html 에 style 태그 작성하기 태그에 일일히 어트리뷰트를 작성하여 스타일을 적용시키는 것은 굉장히 불편하다. 그렇기에 html은 style태그를 제공하여 html 내부에 css문법을 사용할 수 있게 한다. head 내부에 style 태그를 작성하고 태그 내부에 css 문법에 맞게 작성하면 된다. 외부 css 파일을 링크 시키기 html에 style태그를 열고 css를 작성하면 html의 코드가 굉장히 길어지고 한 곳에 css가 몰려있어 굉장히 보기 불편하다. 그렇기에 외부에서 css파일을 작성한 후 html에 링크태그를 사용하여 사용할 수 있다. div{ color: gray; width: 100px; height..

width 와 height 는 처음 css를 배울 때 색상을 변경하는 단계를 넘어서 각 태그가 가지고 있는 box를 옮기며 사용 해볼 것이다. 그래서 내 경험상 width와 height를 쓸때 경험이적다면 pixel 단위를 사용하거나 단순히 % 단위를 사용하고 또한 내가 원하는 대로 사이즈가 나오지 않는 상황이 올 때가 있다. 이번 포스팅에서는 각 단위별로 width와 height가 어떻게 동작하는지 알아보겠다. 기본적용된 width와 height div의 경우 width와 height 를 명시 해 주지 않다면 div의 내부에 있는 콘텐츠의 높이만큼 height가 할당되고 화면의 끝까지 넓이가 증가한다.. a ㅈ % 단위 이 % 단위는 부모의 크기를 100%로 잡고 값을 할당한다. a b c px 단위 ..