오전반_1~6일차 | 정리

1일차

색상 값에 대한 사이트 :  colorpicker

강의 자료 사이트 : Cafe.daum.net/gomaci

 

2일차

Css, 내부 스타일 입력 방식, 외부 입력 방식

선택자{속성 : 속성값; 속성 : 속성값;}

Font 관련 스타일 선언

Font-variant : “normal, small-caps” :

Small - caps 크기가 작은 대문자

Font-weight : normal = 400, bold= 700 //숫자는 인식 못하는 경우가 있다.

Font - size : “숫자em(상위 element 크기에 배수), 숫자pt” : 글자 크기 유전 되지 않음

Color : #16진법, 키워드 방식

background-attachment  : "scroll, fixed"  화면이 스크롤 될 때 이동여부

백그라운드 포지션 사용을 하려면 이미지의 반복 여부를 no-repeat으로 설정 되어있어야함

 

3일차

a:active{text-decoration: underline;}

a:visited{color:blueviolet;}

 

clear : float 배치를 무시하고 새롭게 배치하는 속성

clear :both; 한줄 가득 자리를 차지

clear:left;

claer:right;

position : fixed; relative; absolute;

태그 인라인 - img , a , span , strong

블록 - div , p , ul  , li , h1~h6

display : inline-block 인라인이면 블럭 블럭이면 인라인으로 만들어줌

 

4일차

시맨틱태그 nav는 header에만 사용할 것

ㄴ 태그만 보고도 문서를 쉽게 이해할 수있도록 의미를 가지는 태그

header

사이트 전체의 머리부분

head와 차이점

head태그는 문서에서 단 한번만 사용할 수 있고 header는 여러번 사용 가능

header는 body 안에 사용가능

hgroup 내그는 제목과 부제목을 묶어주는 역할

header은 페이지를 구성하기 위한 구분단위, 내용에 따른 페이지 구성분류단위

hgroup는 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당

nav

네비게이션 표현을 위한 태그

본문위치에 영향을 받지 않지만 사이트 상단에 있는 주메뉴만 적용하고 서브 페이지의 주메뉴까지만 사용

바디안 어디든 사용가능(헤더, 퓨터, 어사이드 포함)

article 웹페이지상에서 실제 내용을 의미

아티클 태그를 사용한 웹컨텐츠는 다른 곳에 배포하거나 재사용 가능

검색엔진의 검색로봇에서는 아티클 태그가 사용된 컨텐츠를 배포할 수 있는 컨텐츠로 인식

section

웹컨텐츠들을 그룹으로 묶어주는 역할을 담당

섹션으로 묶은 컨텐츠는 재배포 불가

단 섹션으로 묶은 후 그 안에서 아티클은 사용가능

섹션으로 묶은 후 그 안에서 섹션 사용 가능

aside

웹컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분을 aside로 표현

->입력하는 위치가 콘텐츠 내부에 입력을 하지만 본문과 별개의 내용을 넣은 태그 부분

footer

웹사이트의 저작권 정보나 저작권 표기와 같은 내용이 들어가는 부분

영상은 html5 로 사용해야함 xhtml로 하면 플레어가 나타남

video src, controls(소리조절), aytoplay(자동재생) loop(반복)

preload(다운로드) - auto:다운로드 , none : 컨트롤조작전까지 다운금지 ,

Matadata : 메타데이터를 가져오며 사용자가 컨트롤 조작하면 실제 비디오 부분을 다운.

6일차

파일명.html 파일명.html

js 자바스크립트의 기본 확장자

node.js -> 자바스크립트의 서버에서 실행하는 것처럼

리액트

뷰js

랭귤러

 

jquery == 자바스크립트

2007 jquery == 자바스크립트

jquery 이제 사용안한다? no

spa -> 리액트 뷰js 랭귤러

작업시간 / 인원 / 환경

jquery

php asp -> java

 

1개월 html / 반응형

2~3개월 자바스크립트 기본, 제이쿼리

4개월 노드.js

5개월 리액트

6개월 프로젝트

 

웹접두사

웹브라우저 별로 접두사를 제공합니다. 웹브라우저별로 다르게 표현이 될 수 있어서

하나의 속성을 선언하기 위해서 여러번 동일하게 선언을 지정합니다.

파이어 폭스 -moz-

크롬 , 사파리 -webkit-

오페라 -o-

익스플로러 -ms-

.box{

-webkit-box-shadow : 10px 10px 5px 5px red;

}

box-shadow"[dx][dy][bulr][spread][set]

;지정된 요소의 그림자를 설정함

 

dx : 그림자의 가로방향 위치

dy : 그림자의 세로방향 위치

bulr : 흐려짐 정도

spread : 번짐 정도

set : 그림자의 형태

*outset : 요소 바깥쪽으로 그림자가 떨어짐 (기본값)

*inset : 요소 안쪽으로 그림자가 떨어짐

 

color : rgba(r,g,b,opacity)

          hska(0, 0%, 100%, 0.5)

               (색상, 채도, 명도, 투명도)

 

반응형 위주 작업 회사 rwdb

 

opacity 투명도 0 ~1

display : none;

visibility : 화면에 보이거나 숨기거나 함

visibility:hidden; 화면에서 숨김

visibility:visible; 화면에서 보여줌

overflow : 지정된 영역 밖으로 나간 요소를 보이거나 숨기는 속성

scroll;hidden;visible;

 

text-shadow : [dx][dy][blur][color]

;텍스트에 그림자를 지정

dx : 본체와 그림자의 가로방향 거리 +면 오른쪽 -면 왼쪽

dy : 본체와 그림자의 세로방향 거리 +면 아래쪽 =면 위쪽

bulr : 블러

color : 그림자의 색상

 

transform : 요소의 형태를 변경함

translate([dx],[dy]) : 지정한 크기 만큼 이동시킴

scale([ds]) : 지정한 배율만큼 확대함

rotate([deg]) : 지정한 각도만큼 회전시킴

skew([degx],[degy]) : 지정한 경사로 기울림

--> 애니메이션 할 때 사용