본문 바로가기

모든 기록47

[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.
reset css 와 normalize css의 차이점 reset css ▷모든 margin 값을 0으로 만드는 것. ▷많은 html tag들은 기본적으로 가지고 있는 스타일들이 있다. (margin, padding 등의 기본 스타일들을 제거해주는 역할을 한다. 심지어 h1의 크기나, li부분의 dot같은 경우도 전부 reset 된다. ▷하나하나 전부 제거하기 어렵기 때문에 하나의 파일을 사용하면 간편하다. ▷browser마다 해당 tag의 값들이 다르기도 하기 때문에 어떤 브라우저를 사용하든 사용자들에게 동일한 서비스를 제공하기 위해서는 reset.css를 사용하는 것도 좋다. 또한 padding과 같은 것들은 전체적인 디자인을 하는데에 있어서 영향을 미치기 때문에 원하는 디자인을 하기 위해서는 꽤 중요한 부분이라고 생각한다. normalize.css ▷기.. 2019. 5. 16.
[HTML5] class 이름 짓기 - BEM html에서 class이름을 짓는 것 그것도 잘 짓는것은 매우 중요하다. 기본적으로 css code를 작성에 대한 효율성이 매우 높아질 것이다. 그리고 타인과의 협업시 코드로 인한 의사소통의 문제를 줄일 수 있으며, 추후 유지보수시에 명확하지 않은 선택자로 인해 혼란스러운 불필요한 시간을 줄일 수 있다. class name을 잘 짓기 위해 다양한 방법들이 있지만 그중에서 frontend분야(html, css, javascript)에 최적화 되어있는 BEM이라는 방법론을 소개하려 한다. BEM은 Block Element Modifier의 약자로 블럭, 요소, 수식어를 기반으로 웹사이트 개발에 참여하는 모든 사람들이 하나의 codebase와 동일한 언어로 소통하여 효율적으로 작업할 수 있도록 naming을 .. 2019. 5. 15.
HTML - WAI-ARIA #WAI-ARIA에 대한 내용이 꽤나 방대한 편이라서 이번에는 최대한 간략하게 핵심적인 부분만 설명할 것이며. 추후 각각의 기능들과 속성 및 사용법 등을 자세히 다룰 것입니다. WAI-ARIA(Web Accessibility Initiative - Accessibility Rich Internet Applications) 스크린리더 및 보조기기 등을 사용하는 장애인이 좀 더 Web Application을 편리하게 사용할 수 있도록 만들어졌으며, 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선시킬 할 수 있도록 되어있다. 이러한 정보들은 Web Browser에 의해 자동으로 해석되어 각각의 운영체제(OS)의 접근성 API로 변환되어서 스크린리더와 같.. 2019. 5. 14.