본문 바로가기

분류 전체보기

 (86)
css 사이즈 태그 em, rem, vh, vw, vmin, vmax 완벽 정리 css 작성할 때 종종 em rem까지는 작성할 때도 있긴 한데, 보통은 귀찮아서 반응형일 때는 %에 의존하고 그 외에는 그냥 대부분 px처리 해버리곤 한다.. 하지만 폰트나 블록 영역 크기를 조절할 때 사용하는 요 요소들을 적절히 사용해주면 보다 간단하면서도 깔끔한 코딩이 완성되므로, 숙지할 필요가 있다. 꼭 암기해서 다음 플젝 때는 요 요소들을 활용해 보자! (는 의미에서 작성한 포스팅..) 1. em : 부모 사이즈에서 곱한 사이즈 div {font-size: 14px} p {font-size: 1.2em} 일 경우, p의 사이즈는 14*1.2 = 16.8px 이 된다. 2. rem: 부모가 아닌 최상위 태그에서 곱한 사이즈 em을 사용하다보면 점점 사이즈가 커져버려서 제어가 힘든 상황이 온다. 이..
P태그요소 안에 div 넣지 마세요. HTML 기본기 박살내기 HTML5의 등장으로 태그를 인라인/블록으로 나누는 시대는 지났다. 그러나 HTML를 공부할 때 인라인/블록의 개념을 반드시 알고 지나가야 한다고 생각한다. HTML5 등장 이전에 통용되던 개념은 "인라인 요소 안에 블록을 넣을 수 없다" 였지만, 시맨틱 구조의 출현으로, 사실상 우리는 a앵커 태그 안에 블록 요소를 넣는 행위?를 밥먹듯이 하고 있다. 하지만 아직까지 전통적으로 인라인 레벨 요소로 불리던 것들 button, input, i, 등등의 요소에는 블록 요소를 집어넣어서는 안된다.. 이건 시맨틱 구조로도 납득되지 않는 부분들이다. 이와 더불어 우리가 쉽게 간과하지만 그래서는 안되는 부분이 있다. 바로 P태그다. P태그 안에 블록 요소를 넣으면 안된다. p태그는 블록요소다. 여기서 블록/인라인이 ..
자바스크립트 배열 메서드 sort() 개념 완전 정리 자바스크립트를 다루면서 배열을 빼놓는건 말이 안되기 때문에, 배열과 관련된 메서드를 확실히 숙지해두는 게 좋다. 그 중 sort 메서드는 핵심중의 핵심이니까 제대로 정리해두자. 배열.sort() 보통 위와같은 식으로 작성되며, 괄호 안에 아무런 파라미터도 넣지 않으면 오름차순으로 정렬시키는 기본적인 성질이 있다. 숫자 정렬시 0부터 순서대로, 영문자는 a부터 순서대로 나오는데 숫자는 아스키 코드대로 정렬된다 let num = [1, 4, 10, 222, 5, 31]; num.sort(); console.log(num) // 1, 10, 222, 31, 4, 5 아스키 코드가 아닌 1, 4, 5, 10, 31, 222 순으로 정렬하고 싶다면 sort((a, b) => a - b) 로 작성하는 것이 좋다. ..
모달창 VS 팝업창, 차이가 뭔데? "팝업창 말고 모달창으로 만들어줘~" "이번 모달창은 iframe으로 만들어~" 입사 초기에 모달=팝업 이라고 생각했던 무지한 나에게 이런 요구사항들은 당황스러웠다. html 공부할 때 그저 모달창은 div로 묶어 만든다...는 식으로 들었기 때문에, 정확하게 팝업과의 차이를 모르겠더라. 그래서 그 개념을 정리할 필요성을 느꼈다. **팝업창 우선 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것을 말한다. 창 + 창n 인 것이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다. (브라우저에서 팝업창을 강제로 막아놓을 경우 보이지 않는다) 자바스크립트로 팝업창을 띄울 때, window.onload = function(){ window.open("popup.html", "",..
iframe모달 창(새창)에 draggable 드래그엔드랍 기능 넣기 새로운 창을 띄우는 게 귀찮아서 iframe을 이용해 모달창을 만들었다.  요 iframe 창을 드래그앤드랍 할 수 있게 제이쿼리 플러그인을 사용했다. 제이쿼리 플러그인인 draggable을 넣으려니, iframe에 넣어야할 지 iframe을 싸고 있는 부모요소에 넣어야할지 좀 고민되더라. iframe에 일단 넣어봤더니, 역시나 창 안에 iframe 영역만 이동한다. 요런식으로! 그래서 draggable 기능을 찾아보니 handle이 있더라! handle을 적용하니 handle 부분으로 이동이 가능해짐. html은 대략 이렇게. .popup{position:fixed; top: 50%; left: 50%; } .handle{position: absolute; top: 0; left: 0; z-index..
array와 string 둘다 쓰이는 메서드 slice() slice() 메서드는 array 배열과 string 문자열에서 다 사용되는데, 쓰다보니 조금 헷갈려서 정리한다. slice는 단어뜻 그대로 값을 잘라내는데에 쓰인다. let arr = ['hope', 'jin', 'monster', 'jimin', 'kooki', 'taetae', 'suga'] arr.slice(3); console.log(arr) // 결과는 'jimin', 'kooki', 'taetae', 'suga' slice(n); n번째 인덱스의 값부터 끝의 값까지 불러온다. slice(a, b); 파라미터가 2개 오면, a를 시작으로 b-1까지의 값을 불러온다. slice(-n) 음수가 오게 되면 끝(오른쪽)에서부터 왼쪽 방향으로 n개의 값을 불러온다. string도 마찬가지다. let s..
배경 위에 또다른 배경을 깔고 싶을 때 css 방법 (html 요소 사이에 레이어 추가) 박스마다 각기 다른 배경 이미지를 넣었는데, 이 배경 이미지가 호버될 때마다 명암을 달리 주고 싶어졌다. 다시 이미지를 수정해서 집어넣기도 귀찮았고, 호버되려면 이미지를 추가할 것이 아니라 css 효과를 집어넣어야 하므로. css로 조절할 수 있는 방법을 찾아야 했다. 예시) 요렇게 핑크색 박스(div class="pink") 안에 배경(h1)이라는 텍스트와 파란색 또다른 상자(div class="blue") 콘텐츠가 들어있다. 핑크색 배경 이미지 위로 레이어를 하나 더 깔아서 효과를 주고 싶었다. 빗금친 영역을 추가하기 위해 .pink에 가상연산자를 잡아서 스타일을 줬다. .pink:before{content:""; width: 100%; height: 100%; position: absolute; t..
자식 iframe 새창 열고닫기 + submit 후 리로드 방법 iframe으로 팝업창을 열고 닫는 기능을 만들었다. 우선 부모격인 페이지에 팝업창 열기 pop의 아이디를 가진 div로 감싸주고 요기에 스타일을 준다. iframe은 width:100%; height:100%으로 맞추면 보수할 때 좀더 간편하다. 버튼을 누르면 팝업창이 뜨도록 함수도 짜준다. function openPop(src, w, h){ var popup = document.getElementById('popup'); document.popupframe.src = src; //팝업으로 띄울 자식넘의 주소를 프레임의 src 값으로 넣는다. popup.css({ //갑분 제이쿼리..ㅎ 'width' : w + 'px', 'height' : h + 'px' }).show(); } function clo..
홈페이지 드롭메뉴 전체 배경 들어간 HTML + CSS 짜기 쉽다고 생각하던 HTML이 배신 때리던 날. 드롭메뉴를 짜다가 갑자기 배신당한 기분이 들어 오늘의 코드를 기록으로 남긴다.. 오늘은 메뉴1을 호버하면 전체 소메뉴들이 다 보여지는 코드를 짜봤다. + 뒤에 배경까지 덤. (사실 디자인이 별로라는 소리를 들어서 수정한 건이었다..) 개인적으로 소메뉴가 많으면 메뉴1에 따른 소메뉴만 보여지게끔 짜는게 좋지만(가독성 up), 소메뉴 갯수가 적다면 (7개 이하 정도) 전체 메뉴가 한번에 다 보여지게끔 하는 편이 낫다고 생각한다. 메뉴가 별로 없는데 일일이 호버하면서 찾기 번거롭기도 하고, 디자인이 좀 읎어보임.. 암튼 HTML은.. 메뉴1 소메뉴1-1 소메뉴1-2 소메뉴1-3 소메뉴1-4 메뉴2 소메뉴2-1 소메뉴2-2 소메뉴2-3 소메뉴2-4 메뉴3 소메뉴3-1..
[제이쿼리] 반응형 3depth 메뉴 슬라이드 토글 이벤트 만들기 (전파 방지하는 법) 요즘 반응형 페이지를 만들고 있는데, 자꾸 기초적인 부분에서 버벅거려서 또다시 공부&복습 겸 블로그에 정리하려 한다. 오늘은 3depth 메뉴에 이벤트 효과를 넣었는데 이벤트 전파 때문에 원하는 효과가 제대로 작동하지 않았음. ** 구현하고자 했던 효과는 PC일 때는 2depth까지만 보이고 클릭시 바로 링크로 이동. 모바일에서는 클릭이벤트를 줘서(링크로 이동하지 않고) 3depth까지 하위 메뉴들이 슬라이드 토글되는 효과가 나타남. 최하위 메뉴인 3depth(그림에선 소메뉴)를 눌러야 링크 이동. 문제는 메뉴가 3depth까지 있음. 2depth 메뉴 버튼을 누르면 3depth가 안뜨고 1depth 메뉴 창이 슬라이드 업 됨.. 그리고 PC에선 클릭시 a태그 작동해야하는데 모바일에서는 막아야함.. 2d..

티스토리툴바