[html] 태블릿 사이즈 설정하기

안녕하세요. 플입니다. 오늘은 html에서 태블릿 사이즈를 설정해보겠습니다. 1. css 불러오기 우선 태블릿 사이즈를 코딩해준 css를 불러옵니다. 일반 css를 불러오는 것과 동일하게 link를 이용해 불러옵니다. rel값은 stylesheet를 입력해주세요. type은 text/css입니다. href는 폴더 경로를 입력해주세요. 저는 css폴더 안에 있어서 css/파일명입니다. 2. media css를 불러온 link 안에 media를 입력해주세요. 값은 only all and (max-width:1297px)을 입력해줍니다. 여기서 max-width값은 브라우저를 줄여보면서 설정해주세요. max-width값이 설정된 기준 아래에서 불러온 css가 적용됩니다. 3. 확인 F12 혹은 오른쪽 클릭 후..

coding/html + css · 2019. 12. 13. 07:30

[jQuery] this를 이용해 버튼 색 바꾸기

안녕하세요. 플입니다. 오늘은 this를 이용해 클릭한 버튼의 색상을 바꿔보겠습니다. 1. 기본 색상 설정 $(".w_btn li button").css({ background:"#fff2d8" , color:"#065471" }); 먼저 기본 색상을 미리 설정해줍니다. 기본 색상 설정은 css로 설정함으로 css() 메서드를 이용해 배경색과 글자색을 정해줍니다. jQuery에서는 값을 ""(따옴표) 안에 넣어주시고, 각각 구분은 ,(쉼표)를 이용합니다. 2. 클릭한 버튼 색상 변경 $(".w_btn li:eq("+$(this).index()+") button").css({ background:"#065471" , color:"#ffc045" }); 클릭한 해당 버튼의 색을 변경하기 위해서는 this를 ..

coding/JavaScript · 2019. 12. 12. 07:30

[javaScript] 경고창

안녕하세요. 플입니다. 오늘은 홈페이지에 경고창을 띄워보겠습니다. 1. alert alert(11); 경고창은 alert를 이용해 만들 수 있어요. alert( ); 괄호 안에 넣고 싶은 문구를 넣어주시면 됩니다. 2. 문자 alert("회원만 접근 가능한 페이지 입니다."); 자주 사용하는 경고창 문구는 회원만 이용할 수 있는 페이지 접근 제한 정도가 있겠죠? 혹시 1번에서 쓴 코드와 차이점을 찾으셨나요? 눈치채신대로 ""(따옴표)가 추가되었습니다. 이렇게 숫자가 아닌 문자는 따옴표를 꼭 적어주셔야합니다. 만약 따옴표를 적지 않는다면 자바스크립트가 전혀 동작하지 않습니다. 자바스크립트는 전체 내용중 하나라도 틀리면 모두 동작하지 않으니 주의해주세요! alert( );의 주의점은 문자일 때 꼭! 따옴표!..

coding/JavaScript · 2019. 12. 4. 07:30

[html] <colgroup>을 이용해 테이블 비율 고정 하기

안녕하세요. 플입니다. 오늘은 테이블 칸의 비율을 고정해보겠습니다. 1. 기본 우선 비율을 고정하지 않았을 때 모습입니다. 비율을 정해두지 않는다고 테이블 태그가 큰 문제가 있는 것은 아니지만 나중에 내용이 길어질 때마다 비율이 틀어지는 것을 방지할 수 있습니다. 2. colgroup 을 이용해 칸의 비율을 정해줍니다. 은 태그 안쪽에 태그 시작 전에 넣어줍니다. 다른 태그처럼 태그를 넣어준 뒤 안쪽에 을 이용해 칸의 비율을 정해줍니다. 을 칸 개수만큼 만들어 준 뒤 입력값을 width:10%처럼 가로 비율을 정해주면 됩니다. 다 합쳐서 100이 되는 게 계산하기 좋기는 하지만, 상황에 따라 조금씩 조절해주셔도 됩니다. 그럼 이만. 총총.

coding/html + css · 2019. 12. 3. 07:30

[css] tr태그 여백 주기

안녕하세요. 플입니다. 오늘은 태그에 여백을 줘보겠습니다. 1. 칸 간격 주기 table{ border-collapse: separate; } 확인을 위해 테두리 색을 임시로 넣어주었습니다. border-collapse를 이용해 칸마다 간격을 줍니다. 값은 separate를 넣어줍니다. sepatate는 '분리된, 따로 떨어진'이라는 뜻으로 칸이 따로따로 분리되어 보입니다 table{ border-collapse: collapse; } 다른 값인 collapse와 비교해보면 어떻게 다른지 확실히 와 닿으시죠? 2. 여백 주기 table{ border-spacing: 0 40px; } 칸마다 간격을 주었으면 테두리에 여백을 줍니다. border-spacing을 이용합니다. 값은 위아래로 여백을 주고 싶으면..

coding/html + css · 2019. 12. 2. 07:30