CSS

: 이번에는 css를 이용해서 html요소를 정중앙에 놓는 몇가지 방법을 테스트해보고자 한다. 사실 개발자로 일할 때 가장 많이 썼던 기능? 방법?이었던 것 같은데, 한번도 제대로 정리해본적이 없어서(방법은 여러가지인데 그것을 딱 체계화해놓고 쓰진 않았던 것 같다) 이

: CSS는 이 글이 제목과 같이 Cascading Style Sheets의 축약어이다. 이 때, 'Cascading'은 계단모양의 폭포(위에서 아래로 떨어지는)를 의미하는데, 이러한 케스케이딩이라는 단어에 입각해서 css의 특징인 '스타일 적용 측면에서 우선순위'와

작업한 내용 코드펜 링크: css 선택자는 후에 자바스크립트로 DOM 객체를 가져올 때도 사용되기 때문에 제대로 짚고 넘어가는 편이 좋을 것 같아서 포스팅을 하고자 한다. 오늘 배운 내용은 모두 저 위에 코드펜 링크로 연습을 해봤고, 여기서는 그에 대해 요약 및 정리를

!codepen0715yk/embed/powNGxJ?default-tab=html%2Cresult단위로는 절대 단위, 상대 단위가 있다.이중 절대단위는 px(cm,pt 등 이외의 것도 있지만, 결국 컴퓨터가 계산할 때는 px단위로 인식함 + 주로 쓰는 것은 px)이 대

살펴볼 가상 요소 선택자의 종류 1) before & after 2) first-letter & first-line & selection!codepen0715yk/embed/mdwWMwJ?default-tab=html%2Cresult조잡하지만..? 간단하게 예매 시간표

!youtubex7EWFoRzAkkcalc css 내에서 사칙연산을 가능하게 해준다.실제로 어떤 부분에서 쓸 수 있는지를 바탕으로 학습을 해보고자 한다.이번 포스팅은 위의 동영상을 참고로 작성했다.1) calc를 이용한 반응형 설계 !codepen0715yk/embed

: 사실 개발자로 일을 할 때도 마진 상쇄를 많이 경험했었는데, 그 때는 창피하지만 그것이 마진 상쇄 때문인지도 몰랐던 경험이 있다. 물론 디버깅을 하면서 이것이 마진 상쇄구나 알았지만...ㅎ 어쨌든, 마진 상쇄는 개발중인 웹문서 커질수록 정말 알 수 없는 포인트에서

CSS 배운 내용을 바탕으로 원하는 것 설계해서 구현해보기

: 프로젝트를 진행하면서 레거시 코드를 수정할 일이 있었는데, 그 과정에서 flex: 1이 꽤나 많이 쓰이고 있는 것을 알게 됐고, 정확히 어떤 역할로 이걸 쓰고 있는지를 공부해봤다.: flex: 1이 뭔지를 알기 전에 알아야할 3가지 속성이 있다.예시에 쓰인 JSX:

말줄임 표시 구현 학습 계기 : 최근에 어떤 콘텐츠에 대해서 3줄 이상이 되면 ... 말줄임을 해야하는 구현 내용이 있었다. 원래였으면 그냥 JS를 사용해서 구현을 했을 것 같은데, 순수 CSS로도 충분히 구현 가능하지 않을까 싶어서 공부를 하게 됐고, 결과적으로 훨