Html css 정리 / 드롭다운 태그

2017년 웹사이트 네비게이션 트렌드 7 | 지금 써보러 갑니다
세로메뉴
CSS Navigation Bar
가로
CSS Navigation Bar



태그정리
https://cafe.naver.com/doitstudyroom/5351

https://m.blog.naver.com/dahamee/220496086149

https://m.blog.naver.com/chloey35/220806572887

CSS Button Hover Effects Preview
CSS3를 활용한 롤오버(호버) 효과 라이브러리, HOVER.CSS
css 롤오버 이미지 메뉴
메가메뉴 드롭다운 풀다운 오버효과모음

이미지 넣은 nav gnb
메가드롭다운 메뉴
순수 css 드롭다운 메뉴
메가드롭다운 메뉴
인라인태그

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>
인라인 태그 vs 블럭 태그
- 존재하는 모든 태그는 위의 두 분류중 하나에 속한다.
- (렌더링) 화면 출력 성질이 다르다. -> 출력하는 규칙이 서로 다르다.

인라인 태그, Inline Tag

- 자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는 태그
- 구성 요소 역할을 한다.(출력 내용 역할)
- 내용물의 크기가 태그의 영역이 된다.

대표적인 inline 태그

<span>, Span
- 사용자 정의 영역을 표현
- 정해진 역할이 없음
- 인라인 태그+CSS, Javascript

기타 인라인 태그 종류

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>

블럭 태그, Block Tag

- 자신의 내용과 앞뒤 태그의 내용을 다른 라인에 출력하는 태그
- 자신의 내용만으로 한 라인을 독점해서 출력하는 태그(*)
- 영역(구조)을 만들때 사용 > 컨테이너 역할 > 레이아웃 구성(틀 만들기)
- 내용물의 크기와 상관없이 너비는 항상 100%, 높이는 내용물의 크기에 맞춰 변화

대표적인 block 태그

<div>, Division 
 - 사용자 정의 영역을 표현 
 - 정해진 역할이 없음 
 - 블럭태그 +CSS, Javascript

기타 블럭 태그 종류

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>

태그 중첩 규칙

1. 블럭 태그는 자식으로 또다른 블럭 태그 or 인라인 태그를 가질 수 있다.

2. 인라인태그는 자식으로 또다른 인라인태그만 올 수 있다.(블럭태그는 올 수 없다.)

3. 예외] 블럭 태그 중 <p>태그는 자식으로 인라인 태그만 가질 수 있다.

공부방법
1. 공부는 엉덩이로 한다. 의자에 깊숙하게 바른 자세로 오랜시간동안 집중해서 공부한다.
1.1 주변을 깔끔하게 정리한다.
1.2 집중을 방해하는 저해요소는 주변에서 최대한 이격시킨다.

2. 공부는 손과 머리로 한다. 계획->실천->결과 분석->피드백 사이클을 반복하며,
각 단계별 페이퍼 또는 전자문서로 깔끔하게 정리해 언제든 짧은 회상을 통해
발현과 응용 및 지식의 전수에 활용한다.
2.1 암기와 이해(암기한 내용을 충분히 이해)
2.2 회상(예습과 복습으로 오랫동안 기억)
2.3 발현과 응용(지식을 표출 활용)
2.4 지식의 타인 전수(학습 결과를 타인에 전달)

3. 학습 성취도를 스스로 느낄 수 있도록 성취도를 시각화해 성취감과 보람을
느낄 수 있는 환경 구축.

Css2차 메뉴 만들기

https://youtu.be/dNWfYAwLEMk