letsgoddud

안녕하세요! 오늘은 CSS에서 변수 var()를 사용해 보도록 하겠습니다. CSS에 변수 var()를 사용하는 이유? CSS에서 변수 var()를 지정하면 각각의 선택자에 공통된 CSS를 주고싶을 때 선택자 하나하나 별도로 속성과 값을 지정해주지 않고, 미리 지정해 둔 변수를 넣어 한번에 선택자를 관리할 수 있어 편리합니다. 1. HTML setting html에 4개의 버튼을 만들고 class명을 지정해 주었습니다. 2. 변수 지정 CSS에 변수 지정 방법 1. :root 선택자 만들기 :root 안에 변수를 넣어줍니다. 수정에 용이하도록 최상단에 배치합니다. 2. --변수명 변수 이름을 지정할 때는 ' --변수명 ' 형태로 지정합니다. 변수명은 최대한 직관적으로 알아보기 쉽게 정해줍니다. 2. 각 선..

안녕하세요! 오늘은 jquery를 사용하여 별점 주기 프로그램을 만들어보겠습니다. 결과물 결과물 설명 : 왼쪽의 별점을 클릭하면 별점의 갯수에 따라 오른쪽의 텍스트 및 아이콘이 변화하는 효과를 주기 위해 addClass, removeClass 이벤트를 주었으며, index() 함수로 별점 카운팅 갯수를 변수 안에 넣어 if, else if 조건문으로 script 안에 html을 추가하여 아이콘 img가 나타나도록 하였습니다. jquery CDN을 head 태그 안에 미리 링크해놨으며, 별 아이콘은 폰트어썸의 i태그를 가져왔습니다. 폰트어썸 CDN과 구글 웹폰트 CDN을 임포트 했으며, 콘텐츠를 정중앙 배치 시켰습니다. 콘텐츠를 담고있는 .star..

안녕하세요! 오늘은 간단한 로그인 UI 화면을 만들어보겠습니다. 결과물 결과물 설명 : form 요소를 사용하여 간단한 로그인 UI 화면을 만들어보았습니다. 특히 CSS3에서 새롭게 추가된 ::placeholder 가상클래스를 사용하여 placeholder에 focus 시 opacity를 주어 편리한 UI 디자인 작업을 진행했습니다. form 태그 안에 input, label, button태그 등을 넣었습니다. 전체적으로 콘텐츠를 가운데 정렬하고 기본 color를 #222를 주었습니다. 콘텐츠를 담고있는 form 태그에 width, border, box-shadow 등을 넣어 UI 디자인을 작업했으며, span 태그에는 display : bloc..

안녕하세요! 오늘은 fontawesome과 before 가상선택자로 체크박스 디자인을 해보겠습니다. 결과물 결과물 설명 : input type 체크박스 속성에 fontawesome과 before 가상 선택자로 디자인 작업을 하고, 클릭 시 좀 더 인터렉티브한 효과를 주기 위해 active 가상선택자를 이용하였습니다. form 요소 안에 input과 label 태그를 넣었습니다. 체크박스 뿐만 아니라 label의 텍스트를 클릭해도 체크박스가 선택이 되도록 input id와 label for 이름을 동일하게 주어 페어링 시켰습니다. 웹폰트와 fontawsome 4.7 CDN을 import했습니다. 속성 선택자를 사용하여 체크박스를 displa..

안녕하세요! 오늘은 css만으로 tab버튼 slide형태 만드는 것을 해보겠습니다. 결과물 결과물 설명 : 온라인 쇼핑몰 웹사이트에서 흔히 볼 수 있는 슬라이드 형태의 tab메뉴 입니다. input, label 속성과 인접선택자로 탭 메뉴를 구현하였고, 옆으로 넘어가는 슬라이드 형태가 아닌 opacity를 조절하여 fade효과를 주었습니다. 또한 상단의 badge는 transition-delay를 주어 제품의 주목성이 더 높아지게 만들었습니다. 상단의 badge는 슬라이드 형태를 완성한 후 나중에 html과 css를 추가하였습니다. 전체적으로 기본적인 폰트 속성을 정하고, 콘텐츠의 위치를 정중앙에 배치했습니다. .tab inner => 콘텐츠의 전체적인 크기를 지정하고..

안녕하세요! 오늘은 좀 생소한 data속성을 사용하여 보다 더 깔끔한 html 구조로 다음 사이트 네비게이션을 만들어 보겠습니다! 결과물 결과물 설명 : 다음 웹사이트의 gnb를 리디자인 한 네비게이션 컨텐츠 박스로, hover 시 폰트 색상이 변화하면서 before, after 가상 선택자를 사용하여 글자가 위로 올라가는 듯한 효과를 주어 좀 더 액티브하게 만들어봤습니다. "카페", "메일" 등을 텍스트로 기재하는 것이 아니라 a 태그 안의 data 속성에 넣었습니다. data 속성 사용법 html css a:before { content : attr(data-사용자 정의 이름); } body의 background에 원하는 색상을 넣어주고, display : flex..

안녕하세요! 오늘도 css만으로 구현하는 인터렉티브한 네비게이션을 만들어 보겠습니다! 결과물 결과물 설명 : 기존에는 평범한 네비게이션이지만 hover하면 커서를 한 메뉴 외 목록들의 opacity를 줄여주어 좀 더 클릭하는 대상에 주목성을 줌과 동시에 옆에 화살표 icon을 fontawesome으로 구현하여 쉽고 간단하지만 인터렉티브한 네비게이션을 만들어 볼 수 있습니다. 구글 웹폰트와 fontawesome 4.7 CDN 링크 연결을 했으며, body에 background-color는 원하는 색을 넣었습니다. a태그에 display : block으로 세로배치를 하고, font-size, margin , color를 자유롭게 준 뒤 a태그에 자연스러운 hover를 주기..

안녕하세요! 오늘은 CSS 애니메이션으로 로딩이미지 구현하는 방법을 알려드리겠습니다! 결과물 기본 셋팅 css 구조입니다. display : flex; justify-content : center; align-items : center; height : 100vh; => 콘텐츠를 브라우저 정중앙에 배치하도록 합니다. span을 inline-block으로 가로배치를 한 뒤 width, height값 등을 지정하여 화면에 원 3개를 띄어줍니다. 각각의 span을 nth-child() 가상클래스로 background-color와 animation-delay를 전부 다르게 줍니다. @keyframes 애니메이션이름 { 0%{ 시작값 } 50%{ 중간값 } 100%{ 마지막값 ..