'코딩' 태그의 글 목록 (10 Page)

[html] 내비게이션(gnb) 만들기 02 - 페이지 주소 팁

안녕하세요. 개자이너 씸플레이입니다. 저번 포스팅에 이어서 주소를 적는 팁을 짧게 소개해드릴게요. 1. 링크 위치 확인 ① 위치 확인 저번 포스팅에서 링크 주소는 넘어갔었는데요, 자리를 한 번 확인하고 넘어가 봅시다. 태그에 넣어주시는 것 알고 계시죠? href=""에서 따옴표 안쪽에 주소를 넣어주시면 됩니다. 2. 서브 페이지 이름 ① 서브 페이지 이름 정하기 사실 주소라는 건 서브 페이지 html 파일의 이름이거든요. 이름은 홈페이지를 만드는 사람이 정하는 건데 알아보기 쉽게 적는 것이 팁이라면 팁입니다. ② sub101.html 서브페이지의 이름을 sub라는 이름과 숫자를 조합해서 만들었습니다. 나중에 어디 서브에 몇 번째 하위 페이지라는 것을 한눈에 알아볼 수 있겠죠. 101이면 서브 1의 하위 ..

coding/html + css · 2021. 2. 16. 09:30

[html] 특수문자 01 - 슬래쉬, 버티컬 바, 백슬래쉬

안녕하세요. 개자이너 씸플레이입니다. 오늘은 특수문자의 이름 알아보기 1편입니다. 정확한 명칭을 알고 있으면 소통에도 도움이 되고, 필요한 것을 검색할 때에도 유용합니다. 1. 슬래쉬 ( / ) ① Slash 슬래쉬는 오른쪽 위에서 왼쪽 아래로 대각선으로 그어진 직선입니다. 보통 물음표 아래에 있습니다. ///////////// 이렇게 생긴 모양입니다. (마 이것이 슬래쉬다) https:// 여기 맨 뒤에 들어가는 것이 슬래쉬입니다. 2. 버티컬 바 ( | ) ① Vertical bar 버티컬 바는 세로 직선입니다. 버티컬이 수직이라는 뜻이니 꽤나 직관적인 이름이죠. 키보드에 따라 가운데가 잘린 모양도 있을 수 있습니다. 직선과 가운데가 잘린 직선 모두 세로 직선으로 나옵니다. ||||||||||||||..

coding/html + css · 2021. 2. 2. 09:30

[꿀정보] 모바일 화면 PC에서 확인하기

안녕하세요. 개자이너 씸플레이입니다. 반응형 홈페이지를 만들 때 핸드폰으로 일일이 확인하기 힘드셨죠? 그럴 때 유용한 사이트가 있습니다. (원래 다음 트로이를 사용했었는데 갑자기 안 나오길래 급하게 찾아봤습니다.) *물론 핸드폰으로 확인하는 게 가장 좋은 방법이지만 매번 그렇게 할 수는 없잖아요? 1. responsinator http://www.responsinator.com/ Responsinator Responsinator · About · Login www.responsinator.com ① 사이트 접속 먼저 위의 주소로 접속을 해줍니다. 직관적이게 바로 모바일 모양이 나오고 있습니다. 2. 확인할 사이트 주소 입력 ① 주소창 확인 왼쪽 위에 보시면 Enter your site 라는 문구와 함께 ..

tip/디자인 팁 · 2021. 1. 8. 09:30

[jQuery] 모달창 만들기

안녕하세요. 개자이너 씸플레이입니다. 오늘은 모달 창을 만들어 볼 예정입니다. 모달 창이란? 여러분도 한 번쯤은 보신 적이 있으실 겁니다. 버튼이나 이미지를 눌렀을 때 새로운 페이지가 열리지 않고 뒤쪽에 까만 배경이 생기면서 가운데에 어떤 문구나 이미지가 뜨는 걸 보신 적이 있죠? 그게 모달 창입니다. 잘 모르겠다고요? 괜찮습니다. 이 포스팅을 마지막까지 보시면 이런 걸 모달, 모달 창이라고 부르는군 하고 어디 가서 거들먹거릴 수 있게 됩니다. 얕은 지식이니까 심하게 거들먹거리지는 말도록 해요. 1. 구조 모달창 여기에 모달창 내용을 적어줍니다. 이미지여도 좋고 글이어도 좋습니다. ① 모달 창 구조 파악하기 일단 태그는 무시하세요. 클릭하면 모달 창이 나오게 만드려고 넣은 것입니다. 중요한 것은 모달 창..

coding/JavaScript · 2021. 1. 5. 09:30

[codepen] jQuery를 불러와보자

안녕하세요. 개자이너 씸플레이입니다. 오늘은 코드펜에서 제이쿼리를 불러오는 방법을 알아보겠습니다. 이미지처럼 CDN을 불러와보겠습니다. 1. 코드펜 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io ① 코드펜에 접속 위의 링크를 이용해 코드펜에 접속해주세요. ② Pen 메뉴 선택 화면 왼쪽에 메뉴 중 Pen 메뉴를 선택해 새 파일을 만들어줍니다. 2. 세팅 ① 세팅 클릭 화면 위쪽에 있는 S..

coding/editor · 2021. 1. 4. 09:30

코딩 121