# nav

25개의 포스트

[refactor] 하드코딩 되어있던 모달 & GNB 리팩토링하기

https://github.com/codestates-seb/seb40_main_029/pull/205/commits/f3398b5df61d01801fcc0ffc83fa42e22b586744gnb랑 모달이 하드코딩 되어있었어서 계속 마음에 걸렸다.그래서 뿌셨다

6일 전
·
0개의 댓글
·
post-thumbnail

CSS - navigation bar(ul,li tag)

nav바 ul+li 태그로 만들어보기

2023년 5월 18일
·
0개의 댓글
·
post-thumbnail

Semantic web, Semantic tag

Semantic web : 기존 웹을 확장하여 컴퓨터가 잘 이해할 수 있는 의미를 기반으로                      의미적 상호운용성을 실현, 다양한 정보들을 컴퓨터 스스로 처리, 자동화,                       재활용 등을 할 수 있도록

2023년 4월 11일
·
0개의 댓글
·
post-thumbnail

HTML 기본 01

문서 내비게이션 역할을 하는 요소로, 일반적으로 웹 페이지 상단에 위치하여 사용자가 사이트 내에서 필요한 정보를 쉽게 찾을 수 있도록 합니다. ex 웹 사이트의 메뉴 부분 독립적인 콘텐츠 블록을 나타내며, 뉴스 기사, 블로그 게시물 등과 같이 하나의 주제에 대한

2023년 3월 25일
·
0개의 댓글
·

[9] 03/24 자바스크립트 수업

머리, 옆구리, 네비게이션, 발바닥, 등 이름만 가지고 어느 역할을 하며, 웹에서 어느 위치에 있는 태그인지 쉽게 파악 가능.시맨틱 태그는 기능은x. div와 동일한 역할.태그에 의미가 있기 때문에, 검색을 할 때 자료를 쉽게 찾게 해주거나 시각장애인에게 도움을 주기도

2023년 3월 24일
·
0개의 댓글
·
post-thumbnail

브레드 크럼즈(Breadcrumbs)

번역하면 '빵 부스러기' 혹은 '빵가루'라는 의미로 헨젤과 그레텔에서 따온 용어이다.사이트의 전체 구조를 한눈에 볼 수 있어 사용자가 현 위치에 대한 맥락을 쉽게 알 수 있어 사용되곤 함. 홈(Home)부터 상위 카테고리(2Depth), 하위 카테고리(3Depth),

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

CSS 반응형 헤더

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

2022년 12월 14일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #040일

HTMLCSS결과HTMLCSSScriptCSS에 javascript로 적용하기 위해 .shrink라는 클래스를 classList를 사용하기 위해 넣어 두었다.스크롤이 내려가면 로고가 바뀌어야 하므로 변수를 지정하고 변할 img 파일 경로를 넣어둔다.조건문을 만들어 sc

2022년 12월 11일
·
0개의 댓글
·

Bootstrap에서 네비게이션 바 fixed-top 설정 오류

bootstrap navbar fixed-top setting

2022년 12월 8일
·
0개의 댓글
·

[pre-project] stack overflow clone 팝업 모달창 외부 영역 클릭 관련 이슈

메뉴 버튼 클릭시 하단에 작은 메뉴 목록이 나오는 모달창 구현모달창 외부 클릭시 모달창이 닫히도록 구현useRef모달창을 on/off 하는 토글 버튼이 모달창을 없애는 외부 영역에 위치하다보니버튼 클릭시 모달창이 꺼지지 않고 다시 창이 뜨는 에러 현상 발생useRef를

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

[html&css] nav 태그

사이트에서 주요한 네비게이션 역할을 하는 링크 그룹을 담을 때에 사용한다. Semantic 태그를 사용하는 것이 좋으므로 필요할 때에는 일반적인<div>가 아닌 <nav>를 사용하도록 한다. 스크린 리더를 이용하는 사용자가 네비게이션을 쉽고 빠르게 찾을 수

2022년 8월 8일
·
0개의 댓글
·
post-thumbnail

8. 적 탱크 따라오기(1)(2)

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

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

JS Mini projects - Rotating Navigation Animation

왼쪽 상단 nav 클릭시 -> 클래스 추가 및 삭제 -> hide showcontainer 와 nav 로 구성,container에 배경색을 하얀색으로 해주고, body 배경색을 회색으로 해놓음 container에 show-nav시 회전효과를 줘서 가려진 nav바를 보여

2022년 6월 20일
·
0개의 댓글
·
post-thumbnail

semantic image‏‎ ‎semantic image‏‏‎ ‎semantic image‏‏‎ ‎semantic image‏‏‎ ‎semantic imagesemantic image‏‏‎ ‎semantic imagesemantic image‏‏‎ ‎semantic

2022년 4월 25일
·
0개의 댓글
·
post-thumbnail

🧙🏼 HTML 구조를 나타내는 요소

: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함): 본질적으로 아무것도 나타내지 않음 : 인라인 컨테이너 : 인라인 레벨 요소 : 본질적으로 아무것도 나타내지 않음 : 어떤 특성의 값을 서로 공유하는

2022년 3월 31일
·
0개의 댓글
·

HTML 의미론

HTML 문서의 작성 의도를 사용자에게 정확하고 다채롭게 전달하기 위해 HTML 의미론 알아두기

2022년 3월 18일
·
0개의 댓글
·

css 셀렉터 활용하여 코드 양 줄이기

cleal:both 속성이 적용되면 margin속성이 마음대로 적용이되지 않는다. 그럴 땐 float다음 나오는 태그 사이에 div박스를 하나더 만들어 cleal:both 속성을 주고 그 다음 태그에 margin을 주게 되면 원하는 데로 margin을 얻을 수 있다.H

2022년 2월 21일
·
0개의 댓글
·

시맨틱 웹/태그

'semantic'이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다.검색 엔진은 시맨틱 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하여 SEO(Search Engine Optimize)에 영향을준다

2022년 2월 5일
·
0개의 댓글
·
post-thumbnail

[HTML, CSS] 다양한 네비게이션 설계하기

[HTML, CSS] 다양한 네비게이션 설계하기

2021년 9월 14일
·
0개의 댓글
·
post-thumbnail

웹사이트 만들기 #01

출처 : 드림코딩 by 엘리flexboxFlex 컨테이너(부모 요소) 내부에 Flex 아이템(자식요소) 넣기display: flex; 부모요소에 display: flex;를 작성한 상태에서 추가 속성을 넣으면요소의 정렬 상태를 다양하게 변경할 수있다. 수평정렬flex-

2021년 9월 4일
·
0개의 댓글
·