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

[css] 가로 세로 크기 정하기

안녕하세요. 플입니다. 오늘은 요소의 크기를 정해보겠습니다. 1. width p{ width:91px; } 가로사이즈는 width를 이용해 정해줍니다. 가장 많이 사용하는 단위는 px로 현재 숫자만 나와있는 사이즈가 px입니다. p태그는 지금 가로사이즈가 91px이네요. 만약 모바일 등 브라우저 사이즈 변동에 따라 크기를 변화시키고 싶다면 px이 아니라 %로 사이즈를 설정해주세요. 2. height p{ height:94px; } 높이는 height를 이용해 정해줍니다. 이 p태그의 높이는 94px이네요. 가로 사이즈를 정해주는 것과 마찬가지로 px이나 %를 단위로 사용합니다. 그럼 이만. 총총.

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

[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

[jQuery] 클릭하면 사라지는 더보기 버튼

안녕하세요. 플입니다. 오늘은 더보기 버튼을 클릭하면 사라지게 해 보겠습니다. 1. .click() 메서드 활용 먼저 클릭하면 사라지게 만들 것이니까 click() 메서드를 사용합니다. $(".sub2 .btn").click(function(){ }); ""(따옴표) 안에 있는 것은 더보기 버튼의 클래스명입니다. 클릭을 했을 때 일어날 동작을 적어주어야 하니까 click() 메서드 괄호 안에 함수를 만들어줍니다. 함수는 function(){ }을 적어서 중괄호 안에 원하는 동작을 적어줍니다. 쉽게 말해 click을 했을 때 일어나는 일을 적을 주머니라고 생각해주세요. 2. .fadeOut() 메서드 활용 더보기 버튼이 없어졌습니다. 숨기는 것은 fadeOut() 메서드를 이용해 할 수 있습니다. $("...

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

[반응형] 엘리사브 리디자인

안녕하세요. 플입니다. 엘리사브 홈페이지를 리디자인 해봤습니다. 1. 디자인 사진은 원래의 엘리사브 홈페이지에서 가져와 사용했어요. 윅스로 작업한 만큼 동작에 조금 더 중점을 두어서 디자인 해봤습니다. 배경은 깔끔하게 단색으로 처리해 사진이 잘 보이게 했어요. 여러 효과를 사용해봤는데 작업하면서 재밌었습니다. 제이쿼리가 어려워서 쉽게 도전하지 못하는 효과들을 편하게 사용해볼 수 있어서 좋았어요. 2. 주소 https://ssimplay.wixsite.com/site1 Home | site1 GIRL OF NOW FOREVER The new luminous and dazzling variation on the original ssimplay.wixsite.com 효과들을 보려면 직접 사이트에 접속해서 보는..

coding/개발 팁 · 2019. 12. 7. 07:30

coding 265