초보개발자

준비물은 하단에 고정시킬 태그(div, img 등)와 부모 div 방법은 간단하다. 아래와 같이 하면 된다. .parent{ position: relative; } .child{ position: absolute; bottom: 0; } 마찬가지로, 오른쪽에 두고 싶으면 right:0을 선언해주면 된다.이 때, position 속성같은 경우 default가 relative이지만 꼭 선언해줘야 한다.absolute는 부모 태그 중 relative로 선언된 기준으로 되기 때문이다.

이 게시물은 내가 직접 사용한 것만 기록하기로 한다. 핵(hack)이란 브라우저마다 css가 똑같이 적용되지 않는 것을 해당 브라우저에만 적용시키는 것을 말한다. IE 9 / IE 10 .ie9 div{ display: flex; } .ie10 div{ display: flex; } Chrome and Safari@media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari 5+ only */ ::i-block-chrome, div { display: -webkit-box; } /* chrome and Safari */ h1 { font-size: 2rem; } }

flex는 유연한이라는 뜻으로 css에서 block들을 가로나 세로, 혹은 역방향으로 세워놓는 것을 말한다.이번 근로를 하면서, flex를 사용하게 되었다. 게시판 형태의 content들이 가로 방향으로 3개씩 있어야 했다. content의 사이즈는 고정값이 었다. 3개씩 두는 방법을 찾고자 구글링을 하는데, flex를 공부하는 사이트를 알게 되었다.flex를 단기간에 공부해야 하면 아래 사이트를 참조하면 좋을것 같다.http://flexboxfroggy.com/ flex에 아무런 제한을 두지 않고 content를 늘려가면, 각 content들의 width값이 줄어들면서 한 줄로 서있는 것이 문제였다.위 사이트를 참고한 결과, flex-wrap 이란 속성을 사용하면 된다.default 값은 nonwrap..

만약 수평선 hr를 넣게 됐는데 색상을 지정하고 싶다면 다음 css에서 이렇게 설정해주면 된다. 물론 css뿐만 아니라 hr tag 내에서 style 로 지정할 수 있다. hr{ border: 1px solid 색상; } 웹페이지를 만드는 경우 border를 할 때가 많은데, 이때 디자이너가 border를 포함하여 값을 주었다면 box-sizing 이라는 값을 쓰면 된다. 예를 들어 다음과 같은 html이 선언되었다고 하자. 디자이너가 가로, 세로가 각각 200px이고 border가 3px인 content를 원한다고 하자. .content { box-sizing: border-box; width: 200px; height: 200px; border: 3px solid Black; }