코딩하는라민

[CSS] JS 없이 탭메뉴 만들기 JS 없이 페이지를 만드는 과제를 하다가 알게된 코드! CSS 로도 간단하게 탭메뉴를 구현할 수 있다는 걸 알게되고 바로 적용해보았습니다. 1. HTML Menu01 Menu02 Menu03 안녕하세요 1페이지입니다. 프론트엔드 공부중인 코딩하는 라민입니다. 🐥🐥🐥 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate beatae id eius modi eveniet facere dolorum fugiat esse repellendus sunt qui dolorem laudantium nesciunt ipsum, libero blanditiis error voluptatum maxime. 마지막 페이지..

[CSS] 카드 뒤집히는 효과 만들기 포트폴리오에 사용한 효과중에 하나인 카드 뒤집히는 효과입니다. 앞면에는 타이틀을 적고 뒷면에는 내용을 적어 마우스를 올리면 카드가 회전하면서 뒷면의 내용을 볼 수 있게 해주는 효과입니다. CSS 만으로도 간단하게 표현 가능한 효과. 디자인 요소를 추가해서 타로카드를 뒤집는 것과 같은 연출을 만들어낼 수 있습니다. 1. 마크업 앞면 뒷면 앞면 뒷면 앞면 뒷면 ✅ wrap 안에 박스(card)를 해주고싶은 카드 수 만큼 만든다. ✅ card 안에 card_box 를 만들고 그 안에 카드의 앞면(front)과 뒷면(back)을 만들어준다. 2. CSS *{ font-size: 30px; font-weight: bold; } #wrap{ width: 800px; height..

margin auto 속성으로 정렬하기 웹디자인기능사 공부하다가 margin-left: auto 속성이 나왔다. margin: 0 auto; 만 사용하다가 margin-left: auto 속성을 보고 margin 속성에 대해 궁금해져서 이것저것 만져보면서 가지고 놀아보았다. 1. margin: 0 auto; 기존에 많이 사용하던 margin 0 auto 속성 .box{ width: 400px; height: 400px; border: 1px solid black; margin: 0 auto; } ▶ 요소를 가운데 정렬할 수 있다. ▶ margin: 0 auto; 는 위아래의 마진을 0으로, 좌우 마진을 자동으로 조정해주는 것 ▶ margin: 0 auto; ⇔ margin: 0 auto 0 auto; 2..

[웹디자인기능사 실기] html, css 유효성 검사하기 유효성 검사? ▶ 이렇게 시험지 뒤쪽에 있는 기술적 준수사항에 보면 유호성 검사에 'ERROR' 가 없도록 코딩하여야 한다고 명시되어 있다. 하지만 시험장에서는 인터넷을 사용할 수 없으므로, 이 유효성 검사를 돌려볼 수 없다. 따라서 시험 전에 코드를 연습할 때마다 돌려보고 자주 틀리는 부분을 숙지하고 시험장에 들어가야할 것. ▶ 오류가 없는 파일의 경우 No errors 라고 표시가 뜬다. ▶ 하지만 오류가 있는 경우 error 와 warnming 이라는 문구가 뜬다. ▶ 이런 경우 잘못된 line 수를 알려주므로, 찾아서 수정해준다. html 오류의 유형 1. li 의 부모가 잘못된 경우 ▶ li 를 ul, ou 안에 넣지 않은 경우. ▶ li..

[웹디자인기능사 실기] 부여 가을연꽃축제 ✅ 콘텐츠는 왼쪽정렬 ✅ 세로메뉴 ✅ 슬라이드는 서서히 나타났다 서서히 사라지게 ✅ 탭 메뉴는 없음 ✅ 푸터에 패밀리 사이트 1. 헤더 - 세로 메뉴 1-1. mark-up 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스안내 행사안내 행사일정 소공연장 홍보마당 축제소식 보도자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 ... ✅ 로고 : 포토샵 이미지 or html 텍스트 ✅ ul 안에 ul : ul.gnb li 안에 ul.sub_list li 가 들어있는 구조. ✅ 다 a로 감쌌는지 확인, a태그의 링크는 #이 들어갔는지 확인 ✅ 텍스트 또는 이미지가 a태그 안에 있는지 확인(바깥으로 빠져나가면 안 됨) 1-2. css .wrap{ wi..

CSS Jquery 화면 가운데에 모달창 띄우기 1. 모달창 VS 팝업창 - 모달(Modal) : 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능 - 팝업(Popup) : 현재 화면에 다른 화면을 하나의 창(Browser)으로 보여주는 기능 2. 모달창 만들기 - 1단계 - 모달창을 열 버튼 만들기 (본문 영역에 button) - 모달창 안에 내용과 닫기 버튼 만들기 (modal_box 안의 button) - 모달창 바깥 영역을 어둡게 dim 처리 해주기 (modal_bg) Hello Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quod velit numquam impedit laboriosam fug..

CSS border 여러줄 겹치는 경우 겹침 현상 없애기 1. position과 border로 겹친부분 배경색으로 처리해서 안보이게 만들기 ① position 을 주고 top 마이너스 값으로 위치를 조정하여 완전히 겹쳐 한줄처럼 보이게 만들어준다. ② border-bottom 을 배경색과 동일한 색으로 지정한 후 ③ z-index 로 밑의 div 보다 앞에 보이게 만들어준다. z-index → position 을 준 경우 겹친 요소에 대해 수직 위치를 지정할 수 있다. 숫자가 클 수록 제일 위에 오게 되며, 숫자가 작을수록 숫자가 큰 것보다 아래에 보이기 때문에 가려져서 보이지 않을 수도 있다. 기본값은 auto이며, 속성이 주어지지 않았다면 0으로 취급함. 레이어같은 느낌 hello Laudantium..

2. 이미지 좌우 슬라이딩 .wrap{ width: 500px; height: 250px; margin: 0 auto; position: relative; overflow: hidden; } .img_list{ width: 1500px; height: 250px; position: absolute; top: 0; left: 0; } .img_list li{ float: left; } .img_list img{ width: 500px; height: 250px; } - li 의 ②부모의 너비(ul)가 이미지의 w의 길이만큼, 개수만큼 넓어야한다. ex) li 하나의 너비가 500px 이고, li가 총 3개이면, ul의 너비는 1500px이 되는 것 - li 는 flow: left; 를 해워야 옆으로 흐를 ..

CSS, Jquery 세로 메뉴 만들기(서브 메뉴) 1. hover 이벤트 이용해서 세로 메뉴 만들기 $(this).find(".sub_menu") → 내가 뭘 클릭할지 모르기 때문에 find로 찾아준다. → this : 위에서 언급한 것(.header_menu>li) Home 홈 바로가기 Blog 일상 공부 Contact 네이버 티스토리 #quickmenu{ width: 200px; } #quickmenu>li{ width: 200px; line-height: 30px; text-align: center; background-color: pink; margin-right: 5px; } .sub_menu_list{ display: none; } .sub_menu_list li{ background-col..

css, js 메인메뉴, 서브메뉴 만들기 0. 서브메뉴 만들기 - 메인 메뉴는 보이게, 서브 메뉴는 안 보이게 숨기기(display: none;) - 서브 메뉴는 마우스를 오버했을 경우에만 나타나게 1. 서브 메뉴 전체 떨어지게 만들기 → header_menu_list 박스와 sub 메뉴 박스를 따로 만들어서 style에서 sub 메뉴의 크기 등의 속성을 따로 줌 Home Blog Contact 홈 바로가기 일상 공부 네이버 티스토리 #quickmenu, .sub_menu{ width: 610px; } #quickmenu li, .sub_menu ul{ width: 200px; height: 30px; line-height: 30px; float: left; text-align: center; backg..