letsgoddud

안녕하세요! 오늘은 저번에 배워본 DOM 요소에 노드 추가하는 방법으로 참가자 신청 명단 프로그램을 만들고, 노드 순서 변경 및 삭제하는 방법을 배워보겠습니다. 1. 참가자 신청 명단 프로그램 만들기 참가자 신청 명단 프로그램 만들기 순서 1. [신청] 버튼에 이벤트 함수 지정하기 2. 이벤트 함수 정의하기 3. 화면에 나타내기 0단계 HTML, CSS 기본세팅 HTML 삽입 미리보기할 수 없는 소스 1단계 [신청] 버튼에 이벤트 함수 지정하기 신청 button 태그에 click 이벤트가 발생했을 때 실행할 newRegister() 함수를 지정합니다. * return false는 입력 내용을 서버로 전송하는 기능을 사용하지 않겠다는 뜻입니다. 2단계 이벤트 함수 정의하기 function newRegist..

안녕하세요! 오늘은 DOM으로 스타일 수정하는 방법과 DOM에 요소 추가하는 방법을 배워보겠습니다. 1. 웹 요소의 스타일 가져와서 수정하기 자바스크립트를 사용하여 스타일 속성 값을 가져오거나 원하는 값으로 수정할 수 있습니다. 그 중에서도 화면에 표시하고 감추는 방법을 풀어보겠습니다. [완성본 미리보기] 웹 요소를 화면에 표시하기 / 감추기 1. [상세 설명 보기] 버튼 만들기 2. [상세 설명 닫기] 버튼 만들기 0단계 HTML, CSS 기본 세팅 1단계 [상세 설명 보기] 버튼 만들기 #view는 [상세 설명 보기] 링크 부분이고, #detail은 상품 상세 정보 입니다. 상품 상세 정보는 처음부터 화면에 가려져 있는 display = none 상태 입니다. view.addEventListener(..

안녕하세요! 오늘은 접두어 webkit를 사용하여 그라디언트 텍스트를 만들어보겠습니다. IE에서 지원하지 않는 속성이니 참고해주세요! 1. HTML, CSS setting h1 태그에 맘에 드는 문장의 텍스트를 넣어주었습니다. 또한, CSS에 원하는 폰트를 import하고 지정해주었으며, body를 가운데 배치해주었습니다. 2. 텍스트에 그라디언트 주기 이제 이 상태에서 텍스트에 그라디언트를 주도록 하겠습니다. background에 linear-gradient 색상을 지정해 준다면 이렇게 나타납니다. 저희는 배경이 아닌 텍스트에 그라디언트를 주기를 원하죠! 텍스트에만 그라디언트를 주기 위해서는 접두어 webkit가 필요로 합니다. 3. 접두사 webkit 속성 주기 -webkit-background-cl..

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

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

안녕하세요! 오늘은 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%{ 마지막값 ..

안녕하세요! 오늘은 웹페이지에서 메뉴를 만들 때 자주 사용하는 아코디언 기능을 쉽게 구현하는 법을 알려드리려고 합니다! 앞서 아코디언 기능이 뭔지 잘 모르겠다는 분들도 있을텐데요, 예시로 베스킨라벤스의 메뉴 탭을 캡쳐해서 가져와봤습니다. 이렇게 메인메뉴에 마우스를 갖다대면 자동으로 숨겨져있던 서브메뉴가 촤르륵 펼쳐지는 것을 말합니다. 펼쳐지는 모양이 아코디언 같아서 아코디언 메뉴라고 불립니다. 이제부터 가로형 또는 세로형으로 아코디언 메뉴를 구현하는 방법을 알려드리겠습니다! 1. 세로형 GNB ul > li > ul > li 순으로 html 구조를 짭니다. li에 a링크를 넣어 마우스로 클릭 가능하도록 활성화 되도록 합니다. display:block을 사용하여 l..