코딩하는라민

[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..

[닷홈], [알드라이브]로 포트폴리오 페이지 무료 호스팅 도메인 등록하기 A to Z 1. 회원가입 후 무료 호스팅 신청 무료 호스팅은 무료이고 기간이 정해져있습니다. 1인당 2계정까지 가입 가능하며, 무료 호스팅을 신청하면 3개월동안 무료로 이용이 가능하고 호스팅 기간이 1개월 이내로 남았을 때부터 연장이 가능합니다. 닷홈 호스팅은 지속적으로 연장해줘야하기 때문에 잊지 말고 연장 신청을 해야합니다. 만약 연장신청을 못했는데 기간이 지난 경우 업로드된 자료들은 삭제될 수 있으니 알림을 설정해놓고 주기적으로 연장해줍시다. 무료 호스팅의 단점은 용량 제한인데, 닷홈 무료 호스팅의 경우에는 200MB 밖에 되지 않기 때문에 필요 없는 파일은 지우고, 이미지 파일 또한 용량을 최소화해야 한다. 2. 호스팅 정보..

Jquery 탭 메뉴 만들기 1. 탭의 기본 구조 - tab1, tab2 는 활성화되기 위한 클래스를 따로 줘야한다. ex) ‘on’, ‘active’, ‘current’ ... - tab 에 a를 주지 않았으면 cursor: pointer; 속성을 부여해준다. - tab의 ‘on’ 클래스에는 활성화되었을 때 색상을 따로 지정. - contents 에도 활성화되기 위한 클래스를 지정해준다. ex) ‘on’, ‘active’, ‘current’ ... - contents 는 tab 이 on 이 아닐 때에는 보이지 않게 하기 위해서 display: none;을 줘야한다. - contents의 ‘on’ 클래스에 display: block; 과 너비, 높이 등등 보여질 부분의 속성을 지정. tab1 tab2 c..

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. 이미지 서서히 나타나게 하기 - 맨 위 이미지 하나만 보이게 하기 메인 이미지 너비를 100%로 맞추고, 부모 박스에 overflow: hidden; - 이미지 2초동안 나타나고 사라지게 만들기(순차적으로 등장) .img_list{ width: 500px; height: 250px; margin: 0 auto; overflow: hidden; } .img_list img{ width: 100%; height: 250px; } $(document).ready(function(){ var count=0; $('.img_list li').eq(count).fadeIn(); setInterval(function(){ $('.img_lis..

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..