Programing14 Position Position 이것을 잘 다루는 것이 CSS를 자유자제로 사용하는 것의 관건이다. 엘리먼트의 위치를 지정하는 방법은 4가지가 있다. staticrelativeabsolutefixed static우리가 아무런 position을 지정하지 않았을 경우 디폴드 값으로 static이 들어가 있다.static은 reft,right,top,bottom 즉, offset값을 다 무시하고 원래 있어야 하는 곳, 부모의 안에 위치하게 하는 position속성이다. relative하지만 이런 원래 있어야 하는 곳을 기준으로, 부모를 기준으로 위치를 옮기고 싶다면 position을 relative로 설정해 주면 된다. css는 left값과 right 값이 겹칠 경우 left를 우선시하고 top/bottom은 top을 우선시.. 2017. 7. 26. 크롤링 보호되어 있는 글 입니다. 2017. 7. 26. 마진 겹침 현상 마진 겹침 현상 마진 겹치는 것 때문에 해커톤에서 깊은 빡침을 경험하는 경우가 드물지 않음... 진짜진짜 ( 아니!! 나는 마진을 줬는데에 8ㅅ8 왜 적용이 안되냐고...)진짜 몇번 빡침을 경험하다 보니까 무작정 덤비는 것 보다 좀 알고 이게 왜 내 말을 안듣는건지 먼저 아는게 중요하다는 것을 알게 되었다. 1. 두개의 엘리먼트의 마진이 겹칠 경우 더 큰 값이 적용이 된다. 어떤 경우에 어떤게 도움이 될까? 만약에 리스트라는 것이 있고, 리스트의 스타일에 margin을 50px 적용을 한다면 중간 li밑에 나오는 li의 마진이 100이 되는 경우 때문에 이런 속성을 만들어 놨다고 생각 2. 부모 엘리먼트와 자식 엘리먼트가 있고, 두가지의 엘리먼트가 겹칠 경우 부모 엘리먼트가 시각적으로 보이지 않는 상태가.. 2017. 7. 25. box-sizing box-sizing hi hello .hi { width:150px; border 15px;}.hello{ width:150px; border 1px;} 가로 넓이가 같음에도 불구하고 둘의 크기는 달라 보인다.왜냐하면 처음 CSS을 만들 때 width와 hight는 컨텐츠의 크기, 즉 박스를 의미하는 것으로 지정을 해놨기 때문이다.그래서 border값을 상관하지 않고 박스의 크기를 지정하기 때문에 같은 크기의 상자를 만들고 싶을 때 참 난감한 상황이 벌어진다. 그래서 맨 처음 설정하는 것이 *{ box-sizing: border-box;} 전 영역의 컨텐츠에 (*) 박스 사이즈인 width와 hight의 기준은 border로 한다는 것을 말해주는 것이다. 원래는 컨텐츠 사이즈 이기 때문에 디폴트를 이렇게.. 2017. 7. 25. CSS box-model CSS box-model https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/ 여기를 보면css테그의 사용 빈도가 박스 모델과 관련된 테그 사용빈도가 엄청 높다는 것을 알 수 있다. 어떤 컨텐츠가 있다. 그것을 박스라고 한다, 그 박스에 대한 것이 박스 모델인데 용어는 중요하지 않음 박스 모델중 중요한 것은border : 테두리 값, margin : 다른 박스 사이의 거리padding : 테두리와 컨텐츠(글자, 그림 등등) 사이의 거리width : 박스의 가로 크기hight : 박스의 세로크기구글에 css box model이라고 검색을 하면 많은 참고 이미지가 나온다. 하지만 인라인 요소에서는 블럭 요소와 달리width 와 hight .. 2017. 7. 25. inline / block level inline / block level css를 처음으로 시작하면서 가장 먼저 들었던 이야기는 인라인과 블럭 요소의 구분이었다. 블럭 방식은 부모의 가로 넓이를 모두 채움 인라인 방식은 딱 자기 크기만큼 채움 인라인을 블럭 레벨로 블럭을 인라인으로 마음껏 바꿀 수 있다. 대표적인 블럭 레벨의 html테그로는 hn이 있다. 처음 html 을 접했을 때 제목 부분에 사용하는h1 테그가 줄 바꿈을 자동으로 해 주는 것을 볼 수 있었을 것이다. 이처럼 블럭 레벨은 혼자서 가로를 다 차지한다는 특성이 있다. 그래서 제목 다음에 바로 내용(p)이 나오지 않고 다음 줄에 나오도록 할 수 있는 것h1 스타일에 border값을 1px적용을 하면 가로를 차지한다는 것이 무엇인지 알 수 있다. 인라인 방식은 줄바꿈을 야기하지.. 2017. 7. 25. 이전 1 2 3 다음
