웹/개념 (3) 썸네일형 리스트형 CSS ::before ::after (가상 선택자) 필자는 이 글의 주제인 ::before와 ::after 선택자를 유튜브에서 처음 활용하는 법을 배웠다. 해당 선택자를 사용하여 입체적인 3D 버튼을 만드는 법을 알게됐다. 각설하고, 이번에는 가상 선택자를 사용하는 방법을 빠르게 알아보겠다. 편의를 위해 css는 html파일 내에 작성하겠다. 이번 글의 목표는 가상 선택자를 사용해서 3D 박스를 제작해보겠다. 먼저 box 클래스를 가진 div를 생성한다. 3D button 위 코드를 웹에서 돌려보면 이렇게 보인다. 그러면 이제 가상 선택자를 사용해볼 차례이다. .box::before{ } .box::after{ } 우선 가상 선택자를 사용하려면 content 속성을 무조건 넣어야한다. content 속성은 위 가상 선택자들이 실체를 가질 수 있도록 도와준.. 웹 css - 태그1 1. font-size px : 고정된 값, 모든 장치에서 같은 크기로 보임 em : 부모태그의 영향을 받는 상대적인 값 rem : html태그의 영향을 받는 상대적인 값 p{ font-size='10px'; font-size='10rem'; font-size='10em'; } 2.color 색상을 표현하는 방법으로는 이름, 16진수, rgb값이 있다. p{ color: red; color: rgb(255,255,255); color: #fffff; } 3.background-color p{ background-color: red; background-color: rgb(255,255,255); background-color: #ffffff; } 4.text-shadow text-shadow: x축 y축.. 웹 css - 선택 웹에서 css란 빠질 수 없는 존재이다. 물론 없어도 우리가 필요한 일을 하기위한 기능들은 html에서 모두 얻을 수 있지만, 거의 검은색과 흰색만있는 페이지가 우리 눈에 잘 들어올까? 그래서 css가 생겼다. css는 Cascading Style Sheets의 약자로 기능을 간략히 말하자면 웹의 디자인을 맏고 있다. 오늘은 css에서 꼭 필요한 선택자에 대해 알아보도록 하자. 먼저 css의 구조를 살펴 보자. p {background-color=='red';} -p는 선택자 이다. -중활호 {} 는 p선택자에 대한 명령어를 적는 칸을 만든다. 이를 선언블록이라고 한다. -background-color=='red';는 명령어, 즉 선언이다. -background-color는 속성, 'red'는 속성 값이.. 이전 1 다음
