css3 [HTML/CSS] a 태그 꾸미기 (지긋지긋한 보라색 링크) a태그를 사용하여 링크를 구현하였을 때, 한번 접속한 흔적이 있다면 위와 같이 보라색으로 표시된다. 너무 못생겨서 a태그 스타일링을 해보았다. styled-components를 사용하여 구현해보았다. 첫번째 const Site = styled.a` font-weight: 200; font-style: italic; text-decoration: none; `; font-weight를 사용하여 폰트의 굵기를 조금 얇게 해주었고, font-style: italic로 글씨를 기울임체로 바꿔주었다. 마지막으로 text-decoration:none으로 못생긴 밑줄을 없애주었다. 두번째 const Site = styled.a` font-weight: 200; font-style: italic; text-decora.. 2022. 2. 9. css 그라데이션(gradation) 컬러 사용하기 한번씩 웹페이지에 단색이 아니라 그라데이션이 있는 컬러를 넣고 싶을 때가 있다. 그라데이션 컬러를 적용하고 싶다면, colorzilla 웹사이트를 이용해보자. 웹 사이트에 접속 후, generater로 들어간다. 원하는 색상을 조정하면, 빨간색 상자에 css가 조정한 색상에 맞게 맞춰진다. 그리고 복사해서 내 프로젝트에 붙여넣으면 바로 사용이 가능하다. 2021. 11. 26. 부트스트랩(bootstrap) 사용해보기 부트스트랩은 이미 만들어진 컴포넌트를 사용함으로써 협업시에 디자인의 불일치 문제를 해결하고, 반응형 등의 직접 구현할 때의 방대한 코드와 css에 대한 깊은 이해도 없이도 빠르게 프론트개발을 할 수 있게 도와주는 프레임워크이다. 특히 반응형을 쉽게 구현할 수 있는 부분이 좋다고 느껴진다. 시작하기 부트스트랩페이지에 있는 link태그를 복사해서 head태그안에 넣어 준다. 이제 부트스트랩을 사용할 수 있게 되었다. 버튼을 생성해보기 위해서 부트스트랩 웹 페이지에서 button을 검색하고 원하는 디자인의 코드를 복사해서 붙여 넣으면, 바로 적용이 된다. 버튼 외에도 사용하고 싶은 컴포넌트를 검색하여 사용할 수 있다. 반응형 이해하기(grid) 부트스트랩을 통해 반응형을 적용시키고 싶다면, grid 시스템에 .. 2021. 11. 22. 이전 1 다음
