# nav

eeuglena

목표 스크롤 위치에 따라 화면 위쪽에 고정되는 내비게이션 바를 만들고 고정된 상태에서만 특정 버튼이 나타나도록 만들어 보자. JS로만 만들기 강의에서 HTML과 CSS 파일을 제공해서 남은 JS 파일만 직접 완성해서 기능을 만들어 보았다. 헤더가 50vh로 설정되어 있어 스크롤이 화면의 50%를 넘어가면 내비게이션과 로고 버튼을 고정시켰다. 화면에 헤더가 나타나는 동안에는 로고가 보이지 않고 내비게이션 바가 제자리에 위치한다. ![](https://velog.velcdn.com/images/eeuglena/p

soosoorim

CSS selector class selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일 적용 가능 id selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일 적용 가능 tag selector는 p { 스타일- } 이렇게 적을 수 있고 모든 태그에 스타일 적용 가능 > 셀렉터의 우선순위 class, id를 동시에 가지는 html에서 스타일이 겹칠 경우 우선순위가 존재한다. 대략 (점수가 높을수록 우선순위) > selector 문법 중 공백 navbar과 li사이의 띄어쓰기 공백은 ~안에 있는 모든자식 이라는 뜻을 가진다. navbar과 li사이의 띄어쓰기 >은 ~안에 있는 직계자식 이라는 뜻을 가진다. > selector 문법 중 콤마 selector에서

parkheeyeun

맥도날드 사이트를 한번 가보면 위에 메뉴바가 있는데 스크롤을 내려도 따라다닌다. 이런것을 한번 만들어 볼 계획 네비게이션 바라고도 하는데 드롭다운도 함께 되게 할 것이다. 먼저 html부터 nav태그로 네비게이션 바를 만들것이다. nav태그는 거의 ul, li태그와 많이 쓰인다. ul태그로 전체 메뉴 리스트를 감싸고 li로 하나의 메뉴 리스트를 감싼다. 그리고 버튼태그로 메뉴이름을 생성하고 dropdown될 리스트를 생성하기 위해서 ul태그를 다시 사용한다. ul, li, a를 이용해서 dropdown list를 만든다. ![](https://velog.velcdn.com/images/parkheeyeun/post/c1c1359c-3765-483e-9f7b-157fb3

koyk0408

https://github.com/codestates-seb/seb40main029/pull/205/commits/f3398b5df61d01801fcc0ffc83fa42e22b586744 gnb랑 모달이 하드코딩 되어있었어서 계속 마음에 걸렸다. 그래서 뿌셨다! 우선 모달 리스트를 따로 만들어 놓았다. 여기저기서 쓰일 데이터다. 이 리스트를 받아서 gnb에서 label을 text로 표현할 것이다. 해당 모달을 오픈하기도 하고, withAuth에 따라 팝업창을 띄우기도 한다. 그리고 모달 아이템에서는 type에 따라 컨트롤할 모달, 툴팁 내용, 아이콘이 달라진다. 모달 리스트 gnb을 나누어서 gnb item을 만들고 onClick event를 props로 받도록 했다. 그리고 logout item은 event가 다르기도 하고 auth에 따라 ui에 보이기도 안보이기도 해야해서 따로 분리해서 만들었는데, 지금 생각해보면 굳이 그러지 않았더도 됐을 것 같네..

sha0209

nav bar를 ul+li 태그로 작성하려 한다. >html 다음과 같이 html을 구성하였다. >css li 태그의 width 값은 필요에 따라 조절하면 된다. hover 속성을 추가하여 마우스 커서를 위로 올릴 때, 색상이 변하는 효과도 추가했다. 위 코드로 했을 때, ul 태그의 범위가 글자만큼으로 한정 되고 나머지는 여백으로 남게 되었다 여백이 남는 부분에서 커서를 올렸을 때 원하는 모습이 아니었다. flex로 코드를 수정했다. ▶ 결과 화면 음.. 왜 글자 색은 안 바뀔까..ㅜㅜ 해결되면 업데이트 해야겠다

yeonn

✅Semantic web / Semantic tag > Semantic web : 기존 웹을 확장하여 컴퓨터가 잘 이해할 수 있는 의미를 기반으로                       의미적 상호운용성을 실현, 다양한 정보들을 컴퓨터 스스로 처리, 자동화,                       재활용 등을 할 수 있도록 하는 것이 목표 > Semantic tag : 시맨틱 태그가 나오기 전 웹 페이지는 구조를 만들기 위해 대부분 코드에    &nb

gamja-kawaii

HTML5 기본구성 결과 : nav 요소 문서 내비게이션 역할을 하는 요소로, 일반적으로 웹 페이지 상단에 위치하여 사용자가 사이트 내에서 필요한 정보를 쉽게 찾을 수 있도록 합니다. ex 웹 사이트의 메뉴 부분 article 요소 독립적인 콘텐츠 블록을 나타내며, 뉴스 기사, 블로그 게시물 등과 같이 하나의 주제에 대한 내용을 담고 있는 구성 요소입니다. ex 해당 메뉴에서 선택된 항목의 내용 section 요소 문서의 구획을 나타내는 요소입니다.

brinymaestro05

시맨틱 태그 semantic : 의미론적인, 의미적인 머리, 옆구리, 네비게이션, 발바닥, 등 이름만 가지고 어느 역할을 하며, 웹에서 어느 위치에 있는 태그인지 쉽게 파악 가능. 시맨틱 태그는 기능은x. div와 동일한 역할. 태그에 의미가 있기 때문에, 검색을 할 때 자료를 쉽게 찾게 해주거나 시각장애인에게 도움을 주기도 함. header 문서 상단에 위치하며 사이트의 로고, 검색창, 프로필 등등이 있음. nav 네비게이션. 운영하는 서비스롤 연결해주는 링크 역할. aside 사이드. 옆구리. 옆쪽에 있는 작은 메뉴를 의미함. section 문서의 구역을 나눌때 사용한다. article 잡지, 기사. 해당 구역 안에서 나타내는 콘텐츠. main 그 페이지에서 가장 메인이 되는 내용을 쓰는 곳. 한 번밖에 못씀. footer 발바닥. 화면 맨 밑에 위치하며 사이트를 요약해놓은 곳. 저작권 정보, 사업자, 연

dev_ing

번역하면 '빵 부스러기' 혹은 '빵가루'라는 의미로 헨젤과 그레텔에서 따온 용어이다. 사이트의 전체 구조를 한눈에 볼 수 있어 사용자가 현 위치에 대한 맥락을 쉽게 알 수 있어 사용되곤 함. 홈(Home)부터 상위 카테고리(2Depth), 하위 카테고리(3Depth), 현 위치 순으로 정보를 보여주며 클릭 시 해당 페이지로 쉽게 이동 가능하여 서비스 내 이탈률을 줄여주기도 함. 사용자가 어떤 경로로 해당 페이지로 들어오게 되었는지 그 경로(내비게이션)를 보여주는 것이 바로 브레드 크럼즈이다.

kse3447

반응형 웹페이지 작업 중 최상단 헤더 부분을 만들어보았다! CSS

nuyhes

반응형 페이지 1-6 >HTML >CSS JavaScript Nav bar 메뉴바 만들기 > 결과 >HTML >CSS >Script >CSS에 javascript로 적용하기 위해 .shrink라는 클래스를 classList를 사용하기 위해 넣어 두었다. > 스크롤이 내려가면 로고가 바뀌어야 하므로 변수를 지정하고 변할 img 파일 경로를 넣어둔다. > 조건문을 만들어 scroll이 pageYOffset 값을 기준으로 클래스를 추가하게 한다. JQuery slide Up

ysys889

Bootstrap에서 네비게이션 바에 fixed-top 설정을 할 시 네비게이션 바와 body가 겹치는 오류가 나타났다. 해결방법은 body에 padding 값을 주면 된다. padding-top을 사용해서 네이게이션의 크기만큼 설정해줘서 겹치지않게 만들어주었다.

jknine929

구현목표 메뉴 버튼 클릭시 하단에 작은 메뉴 목록이 나오는 팝업 모달창 구현 모달창 외부 클릭시 모달창이 닫히도록 구현 그리고 (모달창 외부에 위치한) 메뉴버튼 재클릭시에도 모달창이 닫히도록 구현 초기구현 팝업된 메뉴 모달창을 별도 컴포넌트로 만들어주었고 상위 컴포넌트(nav)에서 해당 모달창에(div 태그에) useRef를 통해 생성한 ref 속성으로 주소값을 부여함(outsidemunuRef) => 이것이 클릭 인사이드인지 아웃사이드인지 구분할 기준이 됨) 리렌더링 될 때마다 반응하기 위해 useEffect 를 이용하여 이벤트리스너를 부여해줌 이 이벤트리스너는 클릭이벤트(mousedown)가 발생할 때마다 clickoutside() 가 호출됨 그런데 이 이벤트는 자동으로 종료되지 않으므로 이벤트가 계속 중복되서 실행되게 됨. 따라서 이 이벤트를 실행한 후 구독을 종료시켜줘야 하므로 cleanup function을 통해서 컴포넌트가 unmount

hyorimm

📌 nav 태그란? 사이트에서 주요한 네비게이션 역할을 하는 링크 그룹을 담을 때에 사용한다. Semantic 태그를 사용하는 것이 좋으므로 필요할 때에는 일반적인`가 아닌 `를 사용하도록 한다. 스크린 리더를 이용하는 사용자가 네비게이션을 쉽고 빠르게 찾을 수 있는 장점도 있다. nav 태그 안에는 `, 태그를 사용하고 ` 태그로 링크를 것이 기본적인 템플릿이다.

moon0seong

적 탱크 따라오기(1) 아군의 Tag값 변경 Tag에 “Target”을 추가하고, 아군 탱크의 Tag를 “Target”으로 변경 우선 적 탱크를 1대만 살려두고 테스트 한다. 나머지 탱크들은 Hirerachy 창에서 없애도록 한다. Enemy.cs에서 필요한 변수, 코드들을 수정한다. 총알, 회전, 위치 등 필요한 변수들을 선언한다. GameOb

sgsg9447

구현 전 생각 왼쪽 상단 nav 클릭시 -> 클래스 추가 및 삭제 -> hide show 구현 방법 container 와 nav 로 구성, container에 배경색을 하얀색으로 해주고, body 배경색을 회색으로 해놓음 container에 show-nav시 회전효과를 줘서 가려진 nav바를 보여줌 #open 클릭이벤트 넣어서 show-nav 클래스 add #close 클릭이벤트 넣어서 show-nav 클래스 remove HTML JS CSS 구현 후 생각 CSS가 다했다.

yrats

semantic semantic image ‏‎ ‎ [![semantic image](https://slid-users-assets-v1-seoul.s3.ap-northeast-2.amazonaws.com/public/capture_images/e7cfd59462e04492bdb7a9f843efd5c5/da1327b2-958b-4b15-b54b-3a1f3a8ab37b.p

oiosu

HTML 구조를 나타내는 요소 1. [div] (https://developer.mozilla.org/ko/docs/Web/HTML/Element/div) : 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 본질적으로 아무것도 나타내지 않음 2. span : 인라인 컨테이너 : 인라인 레벨 요소 : 본질적으로 아무것도 나타내지 않음 : 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용 가능 > 🌵 span (인라인 요소) vs div(블록 요소) (둘이 매우 유사하지만 요소의 차이점 기억하기!) Semantic Web : 요소의 의미를 고려하여 구조를 설계하고 코드를 작성한다. (div, span : non-seman

uhye

패스트캠퍼스 강의를 정리한 내용입니다. "The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명" div, span 요소의 의미 아무 의미가 없는 태그 의미를 찾지 못했을 때 마지막으로 선택하는 태그 사용 빈도가 높을수록 HTML 태그를 의미 적절히 사용하지 않았다고 해석됨 div를 대체할 만한 요소들 span을 대체할 만한 요소들 Sectioning 요소 hx, hgroup, header, footer : 섹셔닝은 아니지만 함께 쓰는 요소 article, aside, nav, section : 섹셔닝 요소 header, footer : 도입부, 헤딩, 헤딩그룹, 목차, 검색, 로고 : 저자, 저작권, 연락처, 관련 문서 의미 범위 : 섹셔닝 루트(body) 또는 섹셔닝 콘텐츠(article, aside, nav, section) 반드시 필요한 요소는 아니지만 이런 의미일 때 di

dev_marco

cleal:both 속성이 적용되면 margin속성이 마음대로 적용이 되지 않는다. 그럴 땐 float다음 나오는 태그 사이에 div박스를 하나더 만들어 cleal:both 속성을 주고 그 다음 태그에 margin을 주게 되면 원하는 데로 margin을 얻을 수 있다. HTML태그에 클래스 두개 이상 넣기 클래스 사이에 띄어쓰기를 한칸 준 뒤 class를 입력한다. 셀렉터 사용법 공백 `` `` `` `` `` `` >.navbar li { display : inline-block; } 공백을 사용해 모든 자식 태그 li를 선택 할 수 있다 >.class li .class a .class p 이런 식으로 연달아 사용이 가능 하다. 꺽쇠사용 > >.container div div>