본문 바로가기

coding/html + css64

[css] 내비게이션(gnb) 만들기 04 - 마우스 올릴 때만 나오게 하기 안녕하세요. 개자이너 씸플레이입니다. 하위 카테고리가 평소에는 가려져있다가 마우스를 올렸을 때만 나오게 만들어보겠습니다. 1. 감추기 ① 감출 부분 확인 감추고 싶은 부분을 확인해봅니다. 하위 카테고리는 평소에는 보이지 않다가 마우스를 올리면 보이게 만들고 싶습니다. ② display:none; display는 말 그대로 어떻게 보이는지를 결정할 수 있는 css 속성입니다. 속성 값으로 none을 쓰면 없다. 즉, 보이지 않게 됩니다. 여기서 문제는 선택자를 어떻게 잡으면 좋을까 하는 것입니다. css는 선택자만 잘 잡아도 코드를 깔끔하게 작성할 수 있습니다. 좋은 방법을 항상 발견하려고 노력해봅시다. .gnb>li ul{ display:none; } ③ 클래스를 기준 일단 기준점이 있다면 한결 편합니다.. 2021. 2. 23.

[css] 내비게이션(gnb) 만들기 03 - 가로로 정렬하기 안녕하세요. 개자이너 씸플레이입니다. 오늘은 드디어 css를 진행합니다! 1. 기본사항 살펴보기 ① 기본사항 참고사항 : 리스트 데코레이션이나 태그에 적용된 색들은 미리 빼두었습니다. 기본적으로 태그는 블록 태그이기 때문에 글씨가 옆으로 써지지 않고 아래로 써집니다. 원하는 디자인 : 로고 옆으로 카테고리들이 가로로 나열되면 좋겠다. ② 블록 태그 줄 노트를 상상해보세요. 그리고 한 줄이 한 블록이라고 상상해봅시다. 그 한 줄을 혼자서 차지하는 태그가 블록 태그입니다. 카테고리1 라고 적으면 한 줄에 카테고리1이라는 글자만 써야 한다는 의미죠. 2. 내비게이션을 오른쪽으로 ① 원하는 이미지 상상하기 각자 원하는 내비게이션의 이미지가 있을 거예요. 처음은 어렵지 않게 제가 이미지를 보여드리겠습니다. 원하는.. 2021. 2. 19.

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

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

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

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

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

[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 속성 넣기 여기는 그냥 .. 2020. 12. 31.

[css] border로 간단하게 제목을 꾸며보자 안녕하세요. 개자이너 씸플레이입니다. 이미지처럼 제목에 꾸밈을 넣어보겠습니다. 이미지를 넣어서 꾸미기 귀찮을 때 사용하고는 합니다. 1. html 이것은 제목 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 이것은 내용 아무 내용 아무말 와랄랄라 ① html 입력하기 예시니까 적당히 아무 내용이나 넣어주었습니다. 제목은 꼭 태그를 사용해주세요. 2. border-left h3{ border-left:4px solid darkred; } ① 태그에 border-left를 이용해 꾸밈을 넣어준다. left에만 선을 넣어서 테두리가 아니라 제목에 넣는 이미지처럼 보이게 해 줍니다. 4px 정도면 적당하.. 2020. 12. 28.

이전 1 2 3 4 ··· 8 다음