HTML4 clone coding 1 1. 계획 1) nomad coder에서 진행했던 예시를 가지고 clone coding을 한다. 2) 먼저 어떻게 구성되어있는지, 공통적인 부분들은 어떤 것인지 파악한다. 3) 분석한 것을 바탕으로 html을 작성한 후, css를 하나하나 해 나간다. 4) html 작성 시 공통된 부분을 올바른 naming을 한다. 추가 part 1. friends list에 (horizontal) scroll bar 추가하기 2. menu icon에 dropdown형식으로 [edit | delet]를 추가하기 3. mainone page에 footer navigation bar의 animation을 추가하기 - :hover시에 좌측의 '다이아몬드' icon이 한 바퀴 도는 동안 줄어들어있던 nav bar가 늘어나기 4.. 2019. 5. 23. [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. [HTML5] class 이름 짓기 - BEM html에서 class이름을 짓는 것 그것도 잘 짓는것은 매우 중요하다. 기본적으로 css code를 작성에 대한 효율성이 매우 높아질 것이다. 그리고 타인과의 협업시 코드로 인한 의사소통의 문제를 줄일 수 있으며, 추후 유지보수시에 명확하지 않은 선택자로 인해 혼란스러운 불필요한 시간을 줄일 수 있다. class name을 잘 짓기 위해 다양한 방법들이 있지만 그중에서 frontend분야(html, css, javascript)에 최적화 되어있는 BEM이라는 방법론을 소개하려 한다. BEM은 Block Element Modifier의 약자로 블럭, 요소, 수식어를 기반으로 웹사이트 개발에 참여하는 모든 사람들이 하나의 codebase와 동일한 언어로 소통하여 효율적으로 작업할 수 있도록 naming을 .. 2019. 5. 15. HTML에 CSS파일 적용하기 그리고 @import [HTML 문서에 CSS파일을 적용하기] HTML 문서에 CSS파일을 적용하는 방식에는 3가지가 있습니다. 1. Inline style sheet - HTML 태그의 style속성에 css 코드를 넣는 방식 2. Internal style sheet - HTML 문서 안에 태그를 넣어서 그 안에 css코드를 작성하는 방식 - 일반적으로 태그 가장 상단에 작성합니다. 3. External style sheet - CSS파일을 만들어 HTML 문서와 연결하는 방식 가장 많이 사용되는 세번째 방식인 외부 링크로 연결하는 방식은 다음과 같습니다. inline style의 경우에는 html에 하나하나 입력하는 방식이므로 작성할 때뿐만 아니라, 추후 수정 시 매우 번거롭고 어렵습니다. internal style s.. 2019. 5. 10. 이전 1 다음
