'coding/html + css' 카테고리의 글 목록 (9 Page)

[html] 내비게이션(gnb) 만들기 01 - 내비게이션 구조를 짜보자

안녕하세요. 개자이너 씸플레이입니다. 오늘은 내비게이션 구조를 짜 보겠습니다. 1. ① (네브) 태그는 navigation의 앞 세 글자를 따온 태그입니다. 사실 태그 이름이 거의 그런 식이라 영어를 잘 알면 편해요. 저는 잘 몰라오. 망해써오. 삼성전자 홈페이지를 예로 들어 보자면 빨간 박스로 표시된 부분이 내비게이션입니다. 말하자면 카테고리죠. 반드시 써야 해! 까지는 아니지만 태그만 봐도 어떤 내용이 있는지 알 수 있으니 유지보완에 도움이 된답니다. 2. html 자자 하나씩 살펴볼 거니까 걱정 말고 따라와 주세요. ① 위에서 살펴봤듯 내비게이션 태그입니다. 처럼 감싸주는 태그로 사용합니다. 카테고리를 감싸주는 태그로 써주세요. ② & 은 unorderde list. 즉, 순서가 없는 목록을 만들 ..

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

[html] 특수문자 03 - 그레이브, 틸드

안녕하세요. 개자이너 씸플레이입니다. 특수문자의 이름 알아보기 3편입니다. 이렇게 연달아 같은 시리즈를 3편 올리는 게 처음인 것 같은데, 어떠신지 의견이 궁금합니다. 이어서 보기에 편하신지, 너무 자주 반복되는 것 같아 지루하신지 댓글로 의견 남겨주세요~! 1. 그레이브 ( ` ) ① Grave 그레이브는 숫자키 1번 왼쪽에, 탭키 위쪽에 있는 키입니다. 보통 물결 표시와 같이 있는 키입니다. shift를 누르지 않으면 그레이브죠. 작은따옴표처럼 생겼지만 삐침이 좀 더 강한 녀석이죠. `(그레이브) '(작은따옴표) 차이가 느껴지시나요? 2. 틸드 ( ~ ) ① Tilde 틸드는 위에서 봤듯이 그레이브와 같은 곳에 있는 키입니다. 그레이브 키에서 shift를 누르면 사용할 수 있죠. 보통 물결무늬, 물결..

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

[html] 특수문자 02 - 콜론, 세미콜론

안녕하세요. 개자이너 씸플레이입니다. 특수문자 이름 알아보기 2편입니다. 1. 콜론 ( : ) ① Colon 콜론은 L 키 옆에 있는 키를 shift를 누른 상태로 치면 나옵니다. 흔히 땡땡 표시라고 부르기도 하죠. 정확한 명칭은 콜론입니다. : : : : : : 어떤 모양인지 확실히 아시겠죠? ② 사용범위 var coffe = {'latte': 4000, 'ice': 2000, 'hot': 1000}; 자바스크립트에서 객체를 만들 때도 사용합니다. 아니 이게 뭐지?라는 생각이 드신다면 그냥 아 저런데도 쓰이는 군 하고 넘어가 주세요. 오늘은 별로 중요한 부분은 아니니까요! 2. 세미콜론 ( ; ) ① Semicolon 세미콜론은 콜론과 같은 위치에 있는 키로 shift를 누르지 않으면 사용할 수 있습니..

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

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

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

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

[html] 마우스를 올리면 나오는 설명글 title

안녕하세요. 개자이너 씸플레이입니다. 오늘은 마우스를 올렸을 때 특정 문구가 나타나는 방법을 알아보겠습니다. 1. html 여기는 그냥 보이는 글 ① html 코드 짜기 일단 기본 html 구조를 만들어줍니다. 간단하게 만 만들어보겠습니다. div{ background:darkred; width:400px; height:400px; line-height:400px; text-align:center; color:#fff; font-size:20px; margin:0 auto; } ② css 코드 짜기 하지만 오늘은 css는 별로 중요하지 않습니다. 보기 이쁘라고 짠 것이니 한번 봐주고 넘어가 주세요. html은 했는데 css는 너무 어렵다? 그냥 안 하셔도 됩니다. 2. title 속성 넣기 여기는 그냥 ..

coding/html + css · 2020. 12. 31. 09:30

coding/html + css 101