본문 바로가기

개발언어 기록/HTML3

[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.
[HTML] a tag / li tag 문제해결 의 경우처럼 tag가 tag 안에 들어가 있으면 position: flex / justify-content : space-between 을 해도 각 "column"에 flex가 적용되지 않습니다. 먼저, 이 문제를 해결하기 전에, tag와 tag에 대해 알아보겠습니다. tag는 hyperlink를 의미합니다. 워드나 파워 포이트에서도 많이 사용되는 그것을 의미하는 것 맞습니다. word를 작성할 때, 인터넷 주소를 복사해서 붙여 넣기 하면 글자색이 파란색으로 바뀌면서 밑줄 쳐지는 것 다들 아실 겁니다. 이것은 한 페이지에서 다른 페이지로 연결되는 데에 사용됩니다. 설명처럼 tag의 가장 중요한 속성은 href속성입니다. 이렇게 작성됩니다. 기본적으로 링크는 모든 브라우저에서 다음과 같이 나타납니다. 방문.. 2019. 5. 17.
[HTML5] class 이름 짓기 - BEM html에서 class이름을 짓는 것 그것도 잘 짓는것은 매우 중요하다. 기본적으로 css code를 작성에 대한 효율성이 매우 높아질 것이다. 그리고 타인과의 협업시 코드로 인한 의사소통의 문제를 줄일 수 있으며, 추후 유지보수시에 명확하지 않은 선택자로 인해 혼란스러운 불필요한 시간을 줄일 수 있다. class name을 잘 짓기 위해 다양한 방법들이 있지만 그중에서 frontend분야(html, css, javascript)에 최적화 되어있는 BEM이라는 방법론을 소개하려 한다. BEM은 Block Element Modifier의 약자로 블럭, 요소, 수식어를 기반으로 웹사이트 개발에 참여하는 모든 사람들이 하나의 codebase와 동일한 언어로 소통하여 효율적으로 작업할 수 있도록 naming을 .. 2019. 5. 15.