First/
DEFINITION
html - HyperText Markup Language
- html은 기본적으로 다 옆으로 붙음 하지만 그 사이에 공간이 있느냐 없느냐의 차이
- contants
- 화면에 놓는거
- start with '<' and end up with '>'
- <내용></내용> = element / ex) h1, div, ul, li, a, image, input
- the words come behind element = attribute / ex) src, href
- 특정 element에 속성값이 존재한다 ex) img scr="경로" a href="#"
- 모든 엘리먼드에 들어갈 수 있는 속성값 <div class/id=""></div>; <span class/id=""></span>
CSS - Cascading Style Sheets
- html의 외관을 꾸며주는 역할
- visual
- html로 놓은걸 정리 정돈 하는거
JavaScript
- 움직이기
Two Display Value
Block-level Elements
- always start on a new line
- always takes up the full width available (left&right)
- has a top and a bottom margin
- It can produce a bigger structure than inline elements
- 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다.
Inline Elements
- doesn't start on a new line.
- only takes up as much width as necessary
그룹화 요소
<span>
- inline element
- easily styled by CSS & JavaScript using the class or id attribute
- 크기조절이 안됨
<div>
- block-level element
- division or a section in an HTML document
- When tag makes like: <div=block>, it produces the result of one line
div 의 특성 - 글이 옆으로 나열된다
Id
- 문서 안에 있는 단 하나의 요소에 스타일을 적용하는 경우 사용 / use '#' in CSS
- give a id to the group element such as span or id
class - 복수의 요소에 스타일을 적용하는 경우 사용 / use '.' in CSS
<body> - 내용 표출
<head> - 내용 설정
~ : hover - 마우스 위에 올렸을때 나타나는 효과
"gnb" - Global Navigation Bar
사이트 최상위 전체 공통네비게이션.
메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바
{float: left;} - 강제로 옆으로 끌고옴
{display: inline-block;} - same as float: left;
Reference:
'Lecture' 카테고리의 다른 글
| 2021.3.10 (Tue) - Assignment (0) | 2021.03.11 |
|---|---|
| 2021.3.11(Thu) - GROUP CSS FIXED VER. (0) | 2021.03.11 |
| 2021.3.11(Thu) - Def (0) | 2021.03.11 |
| 2021.3.10 (Wed) -def (0) | 2021.03.10 |
| 2021.3.9 (Tue) - Def (0) | 2021.03.09 |
