'coding' 카테고리의 글 목록 (34 Page)

[개발자 도구] css 체크박스 활용

안녕하세요. 플입니다. 오늘은 개발자 도구 중 css 체크박스 활용을 해볼게요. 1. css 체크박스 이것을 css 체크박스라고 부르는지는 잘 모르겠으나 제가 가리키는 것은 이 부분입니다. style탭에서 보면 홈페이지에 적용된 css를 쭉 볼 수 있어요. 각각 css 값 앞에 마우스를 올리면 체크박스가 나타납니다. 그 체크박스를 활용해볼게요. 2. 체크박스 활용 본격적으로 어떻게 활용하는지 알아볼게요. 먼저 홈페이지의 원래 상태예요. 적용된 css 중 아무거나 하나를 해제해볼게요. 바뀐 게 보이시나요? 이런 식으로 하나씩 체크를 해제해보면서 어떤 기능을 하는지 알아볼 수 있어요. 어디가 문제인가 하면서 하나씩 체크를 해제했다 체크했다가 하면서 찾을 수 있어요. 그럼 이만. 총총.

coding/개발 팁 · 2020. 5. 20. 07:30

[html] 서브페이지 만들기

안녕하세요. 플입니다. 오늘은 서브페이지 틀을 만드는 기본적인 방법을 알아볼게요. 1. 파일 생성 먼저 서브페이지의 html 파일을 만들어줍니다. 간단하게 오른쪽 클릭을 해서 파일 만들기를 눌러주신 후 sub1.html이라는 이름의 파일을 생성합니다. 이름은 본인이 헷갈리지 않으면 다른 이름으로 해도 상관없어요. 저는 한눈에 알기 쉽게 sub1이라는 이름을 주로 사용한답니다. 2. 서브메뉴 생성 이미 기획단계에서 서브메뉴를 구성하고 메인 페이지를 만들었다면 상관없지만 오늘은 추가 작업이라 메뉴에 서브페이지 링크가 없어요. 그래서 우선 서브 메뉴를 생성해 줄 거예요. 이렇게 기존 메뉴에 더해 추가해줍니다. 링크도 sub1.html로 걸어주는 것을 잊지 말고요. 3. index 복사하기 다음은 서브페이지에 ..

coding/html + css · 2020. 5. 15. 07:30

[jQuery] 햄버거 메뉴 만들기 4 - animate()

안녕하세요. 플입니다. 오늘은 햄버거 메뉴 만들기 마지막 포스팅입니다. 1. fadeIn() 2020/05/12 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 3 - fadeIn() fadeIn()은 이전 포스팅에서 확인해주세요~ 2. 전체 코드 $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) $('.exit').click(function(){ $('.mnb button').fadeIn(); $('.mnb_inner').animate({ marginRight : '-40%' }, 1000 ); }) 먼저 햄버거 만들기 1부터 전체 코드를 ..

coding/JavaScript · 2020. 5. 14. 07:30

[jQuery] 햄버거 메뉴 만들기 3 - fadeIn()

안녕하세요. 플입니다. 오늘은 햄버거 메뉴를 이어서 만들어볼게요. 1. animate() 2020/05/11 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 2 - animate() 이전 포스팅을 먼저 보고 오면 더 쉬우실 거예요. 2. fadeIn() $('.exit').click(function(){ $('.mnb button').fadeIn(); }) 햄버거 메뉴는 아이콘을 눌렀을 때 메뉴가 나오면서 아이콘이 사라지게 만들어야 해요. 그리고 사라진 아이콘은 메뉴가 없어지면 다시 나타나야 해요. 이번 포스팅에서는 fadeIn()을 이용해 아이콘이 다시 나타나게 만들어볼게요. $('.exit').click(function(){ // x 버튼을 클릭하면 $('.mnb button').f..

coding/JavaScript · 2020. 5. 12. 07:30

[jQuery] 햄버거 메뉴 만들기 2 - animate()

안녕하세요. 플입니다. 오늘은 지난 포스팅에 이어서 햄버거 메뉴를 만들어볼게요. 1. fadeOut() 2020/05/06 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 1 - fadeOut() 이전 포스팅을 같이 올려둘게요. 2. animate() $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) 일단 전체 코드를 보여드리고 시작할게요. 지난 포스팅에 있었던 fadeOut()도 보이네요. 반가워라 바로 아래 animate()로 넘어가 볼게요. $('.mnb button').click(function(){ // 아이콘 클릭할 때 $(this..

coding/JavaScript · 2020. 5. 11. 07:30

coding 265