IT관련/Web Publishing6 부모 컨테이너 넓이에 상관없이 full-width값 주는방법 .fullcon {background: #?; width:100vw; margin-left: calc(-50vw + 50%);} 부모컨테이너의 넓이가 정해져있고 부분부분 full-width값의 배경을 줘야할경우 부모컨테이너의 width값을 100%로 주고 부분부분 넓이를 맞춰야 하지만 작업이 복잡해 질수가 있다. 해당소스를 활용하면 부모컨테이너의 넓이에 상관없이 full-width값을 줄수있다. 2022. 2. 10. stroke-dasharray, stroke-dashoffset 스트로크 에니메이션을 구성하려면 구성요소인 stroke-dasharray와 stroke-dashoffset에 대해 잘이해해야 한다. See the Pen Untitled by kimminse (@bjche) on CodePen. 해당 소스는 css에니메이션으로 구성한 기본적인 형태이며 조건에 맞는 퍼포먼스를 위해서는 자바스크립트를 활용하는것이 좋다. stroke-dasharray, stroke-dashoffset은 점선의 간격과 시작점의 간격이라고 이해하였다. 또한 선의 길이는 레이아웃의 가로값이나 높이값이 아닌 그려진 스트로크 자체의 길이이다. 2022. 1. 14. 브라켓(Brackets) 관련내용 브라켓 다운로드 http://brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long. brackets.io 확장기능 수동 다운로드 https://github.com/adobe/bra.. 2021. 9. 29. 웹디자인 기능사(필기, 실기) 후기 웹개발을 하며 관련자격증이 있으면 좋을것같아 정기 3회 웹디자인기능사에 접수하였고 필기와 실기시험을 치루게 되었다. 퍼블리싱과 관련된 국가자격증은 웹디자인 기능사 하나밖에 없는걸로 알고있으며 필요성에 대해서도 말이 많은것 같았다. 사실 웹디자인기능사가 있어야만 웹디자인을 할수있는것도 아니고 회사에서도 자격증보다는 포트폴리오와 실력을 중요시 하는것 같아 필요성이 큰건 아니지만 보여지는걸 하나더 만들어주는게 조금더 나아가는것 같고 자신감이 상승될수 있다고 생각되었다. 필요성은 크지않을수 있어도 웹디자인기능사에서 공부하는 내용은 상당히 좋은내용이 많다고 생각되었다. 필기시험은 유튜브를 통해 공부하였고 디자인에 관련된 역사와 다양한 표현방법, TCP/IP, 퍼블리싱에 대한 내용도 나온다. 생각보다 범위가 넓어 .. 2021. 9. 17. 부트스트랩 정리2 알맞은 css를 변경했지만 적용이 안되는 경우가 있다. 웹페이지에서 저장된 값이 안바뀔때는 쿠키삭제를 진행하면 되는데 그래도 안되는 경우가 있다.(정확한 이유는 모르겠으나 고정값 문제일것 같다.)이럴경우 이와같이 새로 만들어준다. 배경색을 투명하게 할경우 이와같이 써주는걸 추천한다. .bg-custom { background-color: rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 0, 0, 0.11765) 0px 1px 3px; } rgba의 a는 투명도를 나타내는데 1로 갈수록 뚜렷해지고 낮아질수록 투명해진다. 2020. 12. 18. 부트스트랩 정리1 container는 말그대로 무언가를 채울수있는 빈컨테이너라고 생각하면 된다. row클래스는 col-sm-4 등을 이용하기전 미리 선언해 줘야한다. col-sm-4등은 가로폭을 어떻게 분할하여 표현할지 정해준다. 부트스트랩의 가로폭은 12등분까지 분할가능하며 col-sm-1~12까지의 숫자를 적용할수 있다 sm은 소형기기에서 보이는 화면 xs는 그보다 좀더큰 태블릿 정도 md는 노트북 정도 lg는 데스크톱 모니터 등의 대형화면에서 보이는 분할정도를 나타낸다. 4가지를 다안정하고 하나만 정해줘도 문제는 없는데 그에따른 나머지 분할정도는 정해진 공식이 있다. 패딩(p)은 내부여백 마진(m)은 외부여백을 말하며 pb-3 pt-3 py-3 px-3 pl-3 pr-3 mb-3 mt-3 my-3 mx-3 ml-3 .. 2020. 12. 15. 이전 1 다음
