본문 바로가기

전체 글47

css animation 1. CSS에서 animation이란? css에서 animation이란, 하나의 element가 다른 상태로 서서히 변하게 하는 것을 말합니다. 다양한 속성들을 사용해서 원하는 변화를 줄 수 있습니다. animation을 사용하기 위해서는 우선적으로 키프레임(keyframes)을 정의해야 합니다. keyframes란 언제 어떤 animation을 줄지 설정하는 것을 말합니다. 2. @keyframes 사용법 @keyframes animation-name{ } 형식으로 작성합니다. 여기서 'animation-name'속성은 해당 요소(element)와 keyframes를 연결하는 역할을 합니다. ex) @keyframes widthChange{ from { width:100% } 선방향 animation-.. 2019. 5. 21.
[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.
[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.

티스토리툴바