css (12) 썸네일형 리스트형 가상 요소 ::before, ::after CSS의 가상 요소 중 ::before와 ::after는 지정한 요소의 앞이나 뒤에 텍스트나 이미지 등을 삽입할 수도 있고, 스타일을 추가할 수도 있습니다. HTML 태그 마크업(markup)은 웹 문서의 내용을 작성할 때 사용하는데, 예를 들어 버튼 앞에 붙이는 아이콘은 굳이 마크업을 사용할 필요는 없죠. 단순히 눈에 보이는(visiblie) 효과를 위해서 사용하니까요. 그래서 이런 요소들은 마크업 대신 ::before 가상 요소를 사용해서 삽입하는 경우가 많습니다. ::before나 ::after 요소를 사용할 때는 다음과 같은 형식을 사용합니다. 이 때 content 속성은 내용의 앞이나 뒤에 추가할 내용을 가리키는데, 따로 추가할 내용이 없다면 content:""; 처럼 빈 문자열을 사용합니다. .. 링크해서 사용하는 아이콘, Font Awesome 예전에는 웹 문서에 아이콘을 사용할 때 gif 파일을 따로 만들어서 사용해야 했습니다. 디자인을 직접 할 수 없다면 무료 아이콘 이미지를 구해서 사용하기도 했고요. 최근에는 직접 아이콘을 만들지 않고 웹에 올라와 있는 아이콘을 링크해서 사용할 수 있습니다. 특히 이 아이콘들은 이미지 파일이 아니라 아이콘을 위한 특수 웹 폰트 형식이나 SVG 파일 형식의 아이콘입니다. 웹 폰트 형식이나 SVG 파일은 텍스트 형식이기 때문에 글자 크기나 색상을 조절하는 것처럼 아이콘을 사용할 수 있어서 아주 편리하죠. 요즘에 가장 많이 사용하는 아이콘 서비스는 Font Awesome 입니다. 여기에서는 폰트어썸이라고 부르겠습니다. 폰트어썸은 무료 버전과 유료 버전이 있는데 무료 버전만으로도 여러 가지 아이콘을 사용할 수.. 이전 1 2 다음
