개발💻/CSS

오늘은 ::before 와 ::after에 대해 알아보겠다 before는 한글 번역이 잘 안돼서 이렇게 가져왔다 쨌든 before는 after는 말 그대로 어떤 요소 앞뒤에 content를 추가한다고 생각하면 되겠다 아주 간단한 예를 들어보겠다 첫번째 두번째 세번째 이렇게 코드를 작성하였고 지금은 이러한 모습이다 여기서 글자앞에는 🤜 이 이모티콘을 넣고 글자 뒤에는 🤛이 이모티콘을 넣는다고 해보자 물론 그냥 div태그마다 글자를 추가하는 🤜첫번째🤛 이런 식으로 넣어주는 방법도 있다 근데 만약 저 박스가 엄청 많고 하나하나 다 넣어줘야 한다면?? (물론 option+ ⌘+ F 로 바꿀 수야 있지만 쨌든) 이걸 해결할 수 있는 방법이 ::before 와 ::after를 활용하는 방법이다! .wrap div:..

css도 자꾸 자꾸 까먹어서 좀 기록 할만한 것들은 기록해보려고 한다 오늘은 지그재그로 요소를 배치하는 방법에 대해 알아보겠다 요런식으로 만들고싶다고 해보자 가장 먼저 드는 생각은 1,3번 그리고 2,4번에 따로 스타일을 주는게 좋지 않을가 싶다 뭐 그렇게 해도 되지만 nth-of-type이란걸 이용하면 더 간단하게 스타일을 작성할수 있다!! 그럼 어떻게 쓰는건지 한번 봐보자 왼쪽 오른쪽 왼쪽 오른쪽 먼저 이렇게 코드를 작성해 줬고 지금 화면은 이렇게 생겼다 그럼 2,4번만 오른쪽으로 보낼수 있도록 스타일 부분을 작성해 보겠다 .wrap div:nth-of-type(2n) { transform: translateX(100px); } 이걸 스타일 부분에 추가해주면 이러한 모습이 된다 지금 2n이 들어가 있..