# nav
[refactor] 하드코딩 되어있던 모달 & GNB 리팩토링하기
https://github.com/codestates-seb/seb40_main_029/pull/205/commits/f3398b5df61d01801fcc0ffc83fa42e22b586744gnb랑 모달이 하드코딩 되어있었어서 계속 마음에 걸렸다.그래서 뿌셨다

Semantic web, Semantic tag
Semantic web : 기존 웹을 확장하여 컴퓨터가 잘 이해할 수 있는 의미를 기반으로 의미적 상호운용성을 실현, 다양한 정보들을 컴퓨터 스스로 처리, 자동화, 재활용 등을 할 수 있도록
HTML 기본 01
문서 내비게이션 역할을 하는 요소로, 일반적으로 웹 페이지 상단에 위치하여 사용자가 사이트 내에서 필요한 정보를 쉽게 찾을 수 있도록 합니다. ex 웹 사이트의 메뉴 부분 독립적인 콘텐츠 블록을 나타내며, 뉴스 기사, 블로그 게시물 등과 같이 하나의 주제에 대한
[9] 03/24 자바스크립트 수업
머리, 옆구리, 네비게이션, 발바닥, 등 이름만 가지고 어느 역할을 하며, 웹에서 어느 위치에 있는 태그인지 쉽게 파악 가능.시맨틱 태그는 기능은x. div와 동일한 역할.태그에 의미가 있기 때문에, 검색을 할 때 자료를 쉽게 찾게 해주거나 시각장애인에게 도움을 주기도

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

Front-end 국비지원 #040일
HTMLCSS결과HTMLCSSScriptCSS에 javascript로 적용하기 위해 .shrink라는 클래스를 classList를 사용하기 위해 넣어 두었다.스크롤이 내려가면 로고가 바뀌어야 하므로 변수를 지정하고 변할 img 파일 경로를 넣어둔다.조건문을 만들어 sc
[pre-project] stack overflow clone 팝업 모달창 외부 영역 클릭 관련 이슈
메뉴 버튼 클릭시 하단에 작은 메뉴 목록이 나오는 모달창 구현모달창 외부 클릭시 모달창이 닫히도록 구현useRef모달창을 on/off 하는 토글 버튼이 모달창을 없애는 외부 영역에 위치하다보니버튼 클릭시 모달창이 꺼지지 않고 다시 창이 뜨는 에러 현상 발생useRef를

[html&css] nav 태그
사이트에서 주요한 네비게이션 역할을 하는 링크 그룹을 담을 때에 사용한다. Semantic 태그를 사용하는 것이 좋으므로 필요할 때에는 일반적인<div>가 아닌 <nav>를 사용하도록 한다. 스크린 리더를 이용하는 사용자가 네비게이션을 쉽고 빠르게 찾을 수
8. 적 탱크 따라오기(1)(2)
아군의 Tag값 변경Tag에 “Target”을 추가하고, 아군 탱크의 Tag를 “Target”으로 변경우선 적 탱크를 1대만 살려두고 테스트 한다. 나머지 탱크들은 Hirerachy 창에서 없애도록 한다.Enemy.cs에서 필요한 변수, 코드들을 수정한다.총알, 회전,

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

semantic image semantic image semantic image semantic image semantic imagesemantic image semantic imagesemantic image semantic

🧙🏼 HTML 구조를 나타내는 요소
: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함): 본질적으로 아무것도 나타내지 않음 : 인라인 컨테이너 : 인라인 레벨 요소 : 본질적으로 아무것도 나타내지 않음 : 어떤 특성의 값을 서로 공유하는
css 셀렉터 활용하여 코드 양 줄이기
cleal:both 속성이 적용되면 margin속성이 마음대로 적용이되지 않는다. 그럴 땐 float다음 나오는 태그 사이에 div박스를 하나더 만들어 cleal:both 속성을 주고 그 다음 태그에 margin을 주게 되면 원하는 데로 margin을 얻을 수 있다.H
시맨틱 웹/태그
'semantic'이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다.검색 엔진은 시맨틱 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하여 SEO(Search Engine Optimize)에 영향을준다

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