쫑's바른생활

아래와 같이 백그라운드 네비게이션을 만들자 1. #header 에 백그라운드네비 생성 2. 넓이, 높이값, 색상 등 부여 3. position 으로 위치값 부여 : header 하위이므로 header에 relative. 4. z-index로 층부여(서브메뉴 보이도록) 5. 제이쿼리 부여 전 display:none; html ABOUT 소개 오시는길 공지사항 이벤트 MENU 커피 음료 푸드 상품 RESERVE 홀케이크 단체주문 케이터링 굿즈 STORE 온라인 오프라인 css /*header*/ #header{ height: 100px; position: relative; } #header .logo{ float: left; margin-top: 10px; } #header .nav{ float: right..

반응형=미디어쿼리 =@media 란? 디스플레이의 종류(태블릿, 모바일)에 따라 웹 화면의 크기가 자동으로 최적화되는 것 즉, PC에서 보는 웹페이지 ≠ 태블릿에서 보는 웹페이지 ≠ 모바일에서 보는 웹페이지 웹페이지 스타일을 변형시키는 것. 따라서 css에 작성한다. @media(설정조건) {작동방법} 단, 반응형을 줄때에는 유의해야할 점이 있다. 이미지크기는 변형이 되지 않는다. = 반응형 크기마다 그에맞는 이미지로 변경해야 한다. @media(max-width:1280px){} /*일반적인 pc 사이즈*/ @media(max-width:768px){} /*큰 태블릿 사이즈*/ @media(max-width:480px){} /*모바일 사이즈*/ 다음과 같은 PC 웹페이지가 있다고 할 때, 태블릿 사이즈..

네비게이션이란? 웹페이지 메뉴 = 네비게이션 아래와 같이 네비게이션 바를 만들예정. 메인메뉴 만들기는 아래 게시글을 참고하여 1차적으로 만든다. "메인메뉴 만들기" 메인메뉴에 들어가는 서브메뉴를 만들어보자. 메인메뉴 아래 -로 리스트를 만들어주면 된다. 메인메뉴의 서브메뉴이기때문에 메인메뉴 하위로 들어가는 것. 서브메뉴 묶음에 css를 주기 쉽도록 class="submenu"라 칭하자. ABOUT 소개 오시는길 공지사항 이벤트 MENU 커피 음료 푸드 상품 RESERVE 홀케이크 단체주문 케이터링 굿즈 STORE 온라인 오프라인 서브메뉴에 position을 입힌다.(추후 상세설명 예정) .nav>ul>li 의 하위메뉴이므로, 기준점은 .nav의 li 에 주고, 움직일 수 있는 절대값은 .submenu 에..

해당 게시글은 clearfix, 블록/인라인요소, a태그, hover, 이미지삽입방법 등에 대해 이해한 뒤 작업하시기 바랍니다. 외부스타일 파일 생성 html 초기설정값(외부스타일 링크포함) 작성 css 초기설정값(reset) 작성 html_body_id선택자(부모) 작성 : wrap, header, banner, contents, footer 등 css_id선택자에게 정렬, background color, width, height 부여 : 블록위치 미리 인지하기 html_class(자식) 넣어주기 : header먼저 css_header class(자식) 꾸미기 : background color, width, height, float, clearfix(부모에게) html_class(손자) 넣어주기 : h..

html 에서 말하는 블록/인라인 요소는 html이 웹페이지로 보여질 때 어떻게 display 되느냐를 나타내는 요소이다. 넓이와 높이를 지정할 수 있음. 하나의 line을 모두 차지함 = 수직으로 층이 쌓임 = 여백(magin, padding)이 존재 볼록요소 안에 블록과 인라인 요소 모두를 포함할 수 있다. 종류: 제목태그(h1~h6), 목록태그(ul,ol,li), div 태그 등 (예시) 블록요소1 블록요소2 블록요소3 일명 텍스트 요소 콘텐츠 크기만큼만 크기를 가진다 하나의 line을 차지하지 않는다 = 수평으로 쌓임 여백이 자동설정 되어있음. 종류: a 태그, img, em 태그 등 (예시) 인라인요소1 인라인요소2 인라인요소3 끝!