개발언어 기록20 [HTML] Block-level element, Inline-level element 지난번 tag와 tag 문제를 해결하며 Block-level element, Inline-level element에 대해 한번 더 짚고 넘어가야겠다 싶어서 이번 포스팅을 작성하게 되었습니다. 모든 HTML 요소들은 그 요소들이 어떤 타입인지에 따라 기본적인 display 값(margin, padding 등)을 가지고 있습니다. 이전에 reset css에서 말했던 것처럼 이 reset css가 이러한 default display 값을 reset 시켜주는 것입니다. 그리고 대부분의 element들의 default display 값은 block 혹은 inline의 형태입니다. Block-level elements block level의 element는 항상 새로운 line에서 시작하며 전체적인 width값을 .. 2019. 5. 20. box-sizing: border box 사용법 box-sizing: border box은 언제 사용하는 것일까? box-sizing: border box는 기존 box에 padding값을 줄 경우, 안의 contents의 길이가 줄어들지 않게 해줍니다. 예시) width:300px, padding-left: 20px인 경우 (right/top/bottom 상관없음) padding-left로 20px만큼 차지하기 때문에 contents가 사용할 수 있는 width는 280px로 줄어들게 됩니다. 그때 html/css가 하는 역할이 처음 설정한 box의 크기를 유지시켜줍니다. 따라서 browser에서 box의 크기를 300px로 유지할 수 있게 되고, padding값까지 더해져서 box의 전체 width는 320px이 됩니다. 좀 복잡하게 느껴지신다면 .. 2019. 5. 19. position: fixed; 가운데 정렬하기 position:fixed;가 적용된container에 가운데 정렬하는법. .class-name { position: fixed; margin: 0 auto; left: 0; right: 0; } 2019. 5. 18. [CSS] 선택자 활용하기 .parent1 .parent__child1 { /* some style */ } - 'parent1에 속해 있는 parent__child1(결과적으로는 parent__child1)에 스타일을 적용할 거야!'라는 의미입니다. .parent1, .parent__child1 { /* some style */ } // , 다음 붙여도 되고, 띄어쓰기를 해도 상관 없습니다. - parent1과 parent__child1 각각에게 스타일을 적용할 거야! - parent / child와 상관없이 그냥 동일한 스타일을 적용하고 싶을 때 쓰면됌. 동일한 스타일이 많이 적용된다면 차라리 따로 class naming을 하는 게 낫다. .parent__child1 h1 { /* some style */ } - parent_.. 2019. 5. 17. 이전 1 2 3 4 5 다음
