css37 [CSS3] a 태그를 비활성 시키는 방법 안녕하세요. 혀코입니다. 이번 시간에는 태그를 비활성 시키는 방법에 대해서 알아보겠습니다. 보통 태그는 페이지 이동이나 같은 페이지 내에서 단락 이동할 때 쓰입니다. 하지만 때에 따라서 이러한 기능을 하지 못하도록 비활성화 해야합니다. 가령 현재 페이지 경로를 표시하는 breadcrumb 에서 현재 페이지를 나타내는 텍스트에 a 태그가 사용되어 있다면 이 때 a 태그는 비활성화 해줘야합니다. a:last-child { pointer-events: none } 이렇게 태그를 비활성 시키는 방법에 대해서 알아봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 16. [CSS3] ::marker 를 사용해서 <li> 태그에 이모티콘을 추가하는 방법 안녕하세요. 혀코입니다. 리스트 텍스트 앞에 이모티콘을 사용하는 방법이 있나 고민하던 차에 방법을 알아냈습니다. 그래서 이번 시간에는 ::marker를 사용해서 태그에 이모티콘을 추가하는 방법에 대해서 알아보겠습니다. HTML5 CSS3 JavaScript HTML5 기본 구조를 짜고, li 를 잡고 ::marker를 사용하고 content: ' ' 안에 원하는 이모티콘을 넣어주시면 됩니다. 그러면 아래와 같이 브라우저에서 보여지게 됩니다. ::before 를 사용할떄는 list에 list-style-type: none 속성이 있어야만 bullet 표시가 안나는 데 ::marker를 사용할 때는 태그에 list-style-type: none 속성이 없어도 bullet 표시가 안되는 점 참고 하시면 될 것.. 2022. 7. 28. [CSS] :is pseudo selector 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 :is pseudo selector 을 사용하는 방법에 대해서 알아보겠습니다. :is pseudo selector 을 사용하면 상위 요소 셀렉터들을 하나로 묶어서 사용할 수 있습니다. header button:hover, nav button:hover, article button:hover { padding: 5px 10px; color: white; background: green; } 위와 같은 코드가 있을 때, :is pseudo selector 을 사용하면 상위 요소들을 하나로 묶어서 사용할 수 있기 때문에 코드 사용량을 줄일 수 있습니다. :is(header, nav, article) button:hover { padding: 5px 10px; color:.. 2022. 7. 22. [CSS3] 레이아웃 오류 디버깅하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 레이아웃 오류 디버깅하는 방법에 대해서 알아보겠습니다. JavaScript 에서는 오류가 나면, console.log를 찍어서 연산이 잘 되고 있는지 확인하는 과정이 있으나, 웹사이트의 레이아웃이 오류가 나면 각 노드당 css 속성이 잘 들어가 있는지 확인하느라 시간이 상당히 오래 걸리는 편입니다. 그래서 레이아웃 오류시 디버깅을 하려면 두가지 방법을 추천 드립니다. 첫번째, 모든 노드에 outline을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다. * { outline: 1px solid orange !important } 두번째, 모든 노드에 background 을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다. * { background: rgb(0 0 .. 2022. 7. 17. [CSS3] 마우스 오버하면 이미지를 확대하는 방법(feat. transition) 안녕하세요. 혀코입니다. 네이버 메인화면을 보면, 이미지에 마우스 오버하면 이미지가 확대되는 효과를 볼 수 있습니다. 그래서 이번 시간에는 마우스 오버하면 이미지를 확대하는 방법에 대해서 알아보겠습니다. 이미지를 확대하려면 CSS의 transition과 transform 속성을 사용해야 합니다. html 구조는 이미지 노드를 감싸는 wrapper 노드로 구성되어 있습니다. wrapper 노드에는 가로값과 세로값을 지정해 주고 child 노드인 이미지가 wrapper의 사이즈 보다 커지는 부분은 안보이도록 overflow: hidden을 추가했습니다. 가로값과 세로값을 272px과 153px로 한 이유는 16:9 사이즈로 원본 이미지와 동일한 비율을 갖기 위해서 해당 값으로 지정했습니다. child 노드에.. 2022. 7. 16. [CSS] 일정 간격 띄어 자식노드 표시하는 방법(inset) 안녕하세요. 혀코입니다. 이번 시간에는 CSS의 inset 속성을 사용해서 부모노드로부터 일정 간격을 띄어서 자식노드를 표시하는 방법에 대해서 알아보겠습니다. inset property를 사용하면 해당노드가 가로값과 세로값이 없어도 부모 노드로부터 일정한 간격을 두고 위치하게 됩니다. 우선 예제 코드부터 보겠습니다. 우선 parent 노드를 웹사이트 가운데 위치하게 하기 위해서 html과 body에 height을 100% 주고, body의 display 속성을 flex로 지정하고 flex-direction과 align-items를 center로 지정했습니다. 이렇게 하면 parent 노드가 웹사이트 중앙에 위치하게 됩니다. parent 노드에 가로값과 세로값을 주고 확인하기 쉽게 배경색도 세팅했습니다. .. 2022. 7. 13. 웹사이트 엘레먼트를 CSS 사용해서 가운데 정렬하는 5가지 방법 안녕하세요. 혀코입니다. 이번 시간에는 웹사이트 엘레먼트를 CSS 사용해서 가운데 정렬하는 방법 5가지에 대해서 알아보겠습니다. 1. CSS position을 사용해서 중앙정렬 하는 방법 .parent { width: 500px; height: 500px; position: relative; background-color: grey; } .child { width: 50px; height: 50px; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); background-color: orange; } 부모 엘레먼트에 position: relative 값을 줘서 자식 엘레먼트에서 absolute 값을 줬을시 초기값을 부모 엘.. 2022. 6. 28. 이전 1 다음
