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..

css reset div가 블락속성이라도 브라우저에 걸려있는 디폴트 속성들 때문에 body태그에 약간의 마진이 있어 딱 맞지 않기 때문에 디폴트 속성도 없애주는 css reset을 다운받아 링크 걸어주어야 한다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was disc..

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를..

css를 만지면서 가장 힘들다고 느끼는 점은 한 div안에 고정적인 공간이 한개 혹은 두개 있는 경우 가변적인 공간의 크기를 할당하는 일이다. 100% - 250px-300px 이게 된다면 얼마나 좋을까 그런데 안된다. // sass는 된다고 알고있다. 여튼 이런 불편함을 제거 해주고자 css3는 다양하고 사용하기 쉬운 flex-box를 제공한다. FLEX-BOX flex-box는 item을 담고 있는 containner와 containner내부에 있는 item으로 구분 한다. 사용은 굉장히 쉽다. containner가 되는 div에 display : flex 를 선언한걸로 시작한다. .containner{ display: flex; width: 500px; height: 500px; border : 5..

모든 html의 요소는 사각형의 박스 모델을 가지고 있다. 이는 해당 요소가 동그랗게 생겨도 삼각형의 이미지를 가지고 있더라도 사각형의 박스를 가지고 있다. 이유는 html요소는 내부에 contents 이외에 padding , border, margin 으로 이루어져있기 때문이다. padding padding 속성은 border 윤곽선과 컨텐츠 사이의 여백이다. padding-top : border의 상단 부분과 컨텐츠의 여백 padding-right : border의 오른쪽 부분과 컨텐츠의 여백 padding-bottom : border의 아래 부분과 컨텐츠의 여백 padding-left : border의 왼쪽 부분과 컨텐츠의 여백 padding : 1px 1px 1px 1px 맨 처음 부터 위, 오른..

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..