coding 265
[html] 내비게이션(gnb) 만들기 02 - 페이지 주소 팁
안녕하세요. 개자이너 씸플레이입니다. 저번 포스팅에 이어서 주소를 적는 팁을 짧게 소개해드릴게요. 1. 링크 위치 확인 ① 위치 확인 저번 포스팅에서 링크 주소는 넘어갔었는데요, 자리를 한 번 확인하고 넘어가 봅시다. 태그에 넣어주시는 것 알고 계시죠? href=""에서 따옴표 안쪽에 주소를 넣어주시면 됩니다. 2. 서브 페이지 이름 ① 서브 페이지 이름 정하기 사실 주소라는 건 서브 페이지 html 파일의 이름이거든요. 이름은 홈페이지를 만드는 사람이 정하는 건데 알아보기 쉽게 적는 것이 팁이라면 팁입니다. ② sub101.html 서브페이지의 이름을 sub라는 이름과 숫자를 조합해서 만들었습니다. 나중에 어디 서브에 몇 번째 하위 페이지라는 것을 한눈에 알아볼 수 있겠죠. 101이면 서브 1의 하위 ..
![[html] 내비게이션(gnb) 만들기 02 - 페이지 주소 팁](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F4UZUY%2FbtqXrCIldek%2FAAAAAAAAAAAAAAAAAAAAAGekqvKMeSPXFFE2K1EuTpHU8ktXL4yVGGJ6DrdeqPeY%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3Dw6MFw71ABjfuHLxDul96aVV4f2w%253D)
[html] 내비게이션(gnb) 만들기 01 - 내비게이션 구조를 짜보자
안녕하세요. 개자이너 씸플레이입니다. 오늘은 내비게이션 구조를 짜 보겠습니다. 1. ① (네브) 태그는 navigation의 앞 세 글자를 따온 태그입니다. 사실 태그 이름이 거의 그런 식이라 영어를 잘 알면 편해요. 저는 잘 몰라오. 망해써오. 삼성전자 홈페이지를 예로 들어 보자면 빨간 박스로 표시된 부분이 내비게이션입니다. 말하자면 카테고리죠. 반드시 써야 해! 까지는 아니지만 태그만 봐도 어떤 내용이 있는지 알 수 있으니 유지보완에 도움이 된답니다. 2. html 자자 하나씩 살펴볼 거니까 걱정 말고 따라와 주세요. ① 위에서 살펴봤듯 내비게이션 태그입니다. 처럼 감싸주는 태그로 사용합니다. 카테고리를 감싸주는 태그로 써주세요. ② & 은 unorderde list. 즉, 순서가 없는 목록을 만들 ..
![[html] 내비게이션(gnb) 만들기 01 - 내비게이션 구조를 짜보자](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbOQ7G5%2FbtqWx6EjX43%2FAAAAAAAAAAAAAAAAAAAAAGlW-HPXckE5uK0R09D7FpAfqiTIDqX5mfnvmN0ydhLf%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3DaQs%252BzRoC%252BxEq4S%252FwR%252FbQCfEOMU8%253D)
[html] 특수문자 03 - 그레이브, 틸드
안녕하세요. 개자이너 씸플레이입니다. 특수문자의 이름 알아보기 3편입니다. 이렇게 연달아 같은 시리즈를 3편 올리는 게 처음인 것 같은데, 어떠신지 의견이 궁금합니다. 이어서 보기에 편하신지, 너무 자주 반복되는 것 같아 지루하신지 댓글로 의견 남겨주세요~! 1. 그레이브 ( ` ) ① Grave 그레이브는 숫자키 1번 왼쪽에, 탭키 위쪽에 있는 키입니다. 보통 물결 표시와 같이 있는 키입니다. shift를 누르지 않으면 그레이브죠. 작은따옴표처럼 생겼지만 삐침이 좀 더 강한 녀석이죠. `(그레이브) '(작은따옴표) 차이가 느껴지시나요? 2. 틸드 ( ~ ) ① Tilde 틸드는 위에서 봤듯이 그레이브와 같은 곳에 있는 키입니다. 그레이브 키에서 shift를 누르면 사용할 수 있죠. 보통 물결무늬, 물결..
![[html] 특수문자 03 - 그레이브, 틸드](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fc6v4xX%2FbtqVCbLMVh9%2FAAAAAAAAAAAAAAAAAAAAAOzufOFNQWdemD5KHs8_86XMiFtE2nCnpRlhkl8CoVTa%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3Di2C6iBOv9D38c9eXTtpcXw4N8WU%253D)
[html] 특수문자 02 - 콜론, 세미콜론
안녕하세요. 개자이너 씸플레이입니다. 특수문자 이름 알아보기 2편입니다. 1. 콜론 ( : ) ① Colon 콜론은 L 키 옆에 있는 키를 shift를 누른 상태로 치면 나옵니다. 흔히 땡땡 표시라고 부르기도 하죠. 정확한 명칭은 콜론입니다. : : : : : : 어떤 모양인지 확실히 아시겠죠? ② 사용범위 var coffe = {'latte': 4000, 'ice': 2000, 'hot': 1000}; 자바스크립트에서 객체를 만들 때도 사용합니다. 아니 이게 뭐지?라는 생각이 드신다면 그냥 아 저런데도 쓰이는 군 하고 넘어가 주세요. 오늘은 별로 중요한 부분은 아니니까요! 2. 세미콜론 ( ; ) ① Semicolon 세미콜론은 콜론과 같은 위치에 있는 키로 shift를 누르지 않으면 사용할 수 있습니..
![[html] 특수문자 02 - 콜론, 세미콜론](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcUf52g%2FbtqVqFtChIK%2FAAAAAAAAAAAAAAAAAAAAAA579WY6HCqCSGnFSaQsCONhogCJ9KDYoJAzy9wMZ8bl%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3DA1SKX18yjbDQ5jRSCvm2fnuBKtM%253D)
[html] 특수문자 01 - 슬래쉬, 버티컬 바, 백슬래쉬
안녕하세요. 개자이너 씸플레이입니다. 오늘은 특수문자의 이름 알아보기 1편입니다. 정확한 명칭을 알고 있으면 소통에도 도움이 되고, 필요한 것을 검색할 때에도 유용합니다. 1. 슬래쉬 ( / ) ① Slash 슬래쉬는 오른쪽 위에서 왼쪽 아래로 대각선으로 그어진 직선입니다. 보통 물음표 아래에 있습니다. ///////////// 이렇게 생긴 모양입니다. (마 이것이 슬래쉬다) https:// 여기 맨 뒤에 들어가는 것이 슬래쉬입니다. 2. 버티컬 바 ( | ) ① Vertical bar 버티컬 바는 세로 직선입니다. 버티컬이 수직이라는 뜻이니 꽤나 직관적인 이름이죠. 키보드에 따라 가운데가 잘린 모양도 있을 수 있습니다. 직선과 가운데가 잘린 직선 모두 세로 직선으로 나옵니다. ||||||||||||||..
![[html] 특수문자 01 - 슬래쉬, 버티컬 바, 백슬래쉬](https://i1.daumcdn.net/thumb/C100x100/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FblmIGU%2FbtqVsygnxsg%2FAAAAAAAAAAAAAAAAAAAAAIsU7E00wk0fmYkzHin8RpSDfVyA76GKK4nGn6FS1qkm%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1761922799%26allow_ip%3D%26allow_referer%3D%26signature%3D%252FE3e7BtEZ6cHDvTsRwsoKOIloe0%253D)