FRONT-END

background-size

값 cover는 뒷 요소 가로,세로 중 더 넓은 부분에 맞춰서 이미지가 들어가게되고

값 contain은 뒷 요소 가로 세로 중 더 짧은부분에 맞춰서 이미지크기가 조정된다.

background-attachment

기본값은 scroll

fixed로 입력시 뷰포트에 이미지가 고정된다 이미지가 스크롤되어 올라간다

position

기본값 static 값

relative 자신을 기준 자신을 기준으로 옮긴것 이므로 이동전 위치에는 자신이 있고 옮긴 위치에는 허상이다.

값 absolute 부모를 기준 (relative한 부모) 공중에 붕 뜬다. 그러면서 아래있던 것들이 밑으로 깔리게되고 서로간의 상호가 무너짐 부모에게 relative를 주고 자식에게 absolute와 이동값들을 주면 부모를 기준으로 이동하게되며 부모에 static의 기본값을 주고 부모의 부모에게 relative를 주면 부모의 부모가 다시 기준이된다. 결국에는 부모가 되지 않을 값에는 static 부모가 되어 기준이 될 부모에겐 relative를 준다. 부모가 결국없을시(모두 static) 뷰포트 기준으로 움직임

값 fixed 뷰 포트를 기준 fixed시 스크롤이 있어 내려도 그자리에 계속 나타나게 됨

인라인요소에 position을 fixed, absolute 주게되면 자동으로 inline에서 block으로 display가 변경되고 가로세로 길이도 지정가능하게됨

요소 쌓임순서

1. position의값이 relative, absolute, fixed등 값이 있을때 위에 쌓임

2. 1번 조건에 다 해당 할시 z-index의 값이 높을수록 위에 쌓임

3. 1,2번 같을시 html 구조상 마지막에 작성한 요소가 위에 쌓임

width, height :
기본값 auto

div :
기본값 auto
블록요소로 부모크기만큼 자동으로 늘어남

max-width,max-height :
가로/세로 너비 최대 제한
min-width,min-height :
가로/세로 너비 최소 제한

em: 1em = html 기본 사이즈 16px 글자와 같은(font-size)는 상속되어 부모에서 설정 시 자식도 물려받아 em의 단위로 바뀐다.

rem: html에서 설정한 font-size에 따라 1em=font-size로 바뀐다.
vw, vh: 뷰포트의 비율에 따라 사용 50vw, 50vh 절반만큼 사용

box-sizing

사용용도 : padding이나 border등 추가할시 기존 width와 height에서 커지는것을 계산하여 크기를 맞춰줌

기본설정은 content-box

자동계산은 border-box 는 width와 height를 border까지 영역을 포함하여 계산

overflow 넘침을 당하는 부모에게 적용시킨다.

기본값 visible 넘치던 말던 보여줘라

hidden 넘치는걸 잘라라

scroll 가로,세로모두 스크롤을만들어 보여줘라

auto 넘치는 부분만 스크롤을 만들어라

font 폰트
line-height :위아래 줄 간격
숫자만 입력시 기본폰트X숫자가 간격
px로 입력시 숫자px가 간격
결론은 line-height의 수치가 줄 간의 간격사이에 해당 크기만큼의 폰트크기의 투명글이 들어간다는것
폰트크기에 따라 line-height를 비율로 변환하게 하는것이 좋으므로 px가아닌 배수로지정하는것이 관리면에서 편함

font-family: 글꼴1,글꼴2, 글꼴계열(필수)
띄어쓰기 글꼴은 ""큰따옴표로묶기 또는 전부다 큰따옴표로 묶어도 상관없음

인라인과 블록

인라인은 글자로써 줄바꿈 시 하나의 글자로써 띄어쓰기가 생긴다. 자신의 컨텐츠만큼 크기가 줄어든다.

인라인은 글자요소라서 가로세로 사이즈를 지정할수없다. 인라인은 위아래여백은 추가할수없다. 인라인은 블록요소를 자식으로 불가능하다.

블록은 부모크기만큼 자식이 늘어나려고함

a태그 새탭열기 targer="_blank" 시 현재탭이아닌 새탭이 열린다.

input은 placeholder=" "를 사용하여 입력할 값의 힌트를 value=" "를 사용하여 미리 값을 입력해두는 기능 사용가능

input을 label태그로 묶어 명칭을 넣어줄시 명칭클릭시에도 체크박스가 작동됨

table요소는 table-tr-td로 tr은 행 td는 열 td에서는 colspan=" " 를 통해 열의 크기를 늘림

JS스크립트 사용관련

<태그 title="설명"> 마우스 올릴 시 설명출력

<태그 data-이름="값"> 전체영역에서 사용할수있는 값저장

head에서 main.js 선언이 되었으나 body에 문구가 js실행되지 않을시 head에 선언된 main.js를 defer src로 선언해준다. defer란 html문서가 모두 해석된후 js를 해석하겠다는것.

CSS연결방식(import)

@import url("./~")

다른css를 메인css로 가져온다 메인 css가 모두 수행되고 나서 연결한 다른 css가 실행되므로 지연의 장단점이있다.

태그선택자 . class선택자{ }

span과 orange일때 { }선택적용

span . class

자식선택자(바로아래자식)

부모 > 바로 아래 자식의 class선택자 { }

li > .class

하위선택(최상위 부모)

부모 . 자식의 class선택자 { }

div . class

인접형제선택자 .class선택자 + 태그 { }

클래스와 태그 인접 아래 다음 하나 선택

.class + li

일반형제 선택자

.class선택자 ~ 태그 { }

클래스와 태그 인접 아래부터 모두 선택

자식태그와 자식클래스를 함께 쓸땐 붙여써야하고 부모태그와 자식클래스를 같이쓸땐 띄어써야함

─────────────────────────────────────────────────────

가상클래스 CSS에서 어떤 동작을 할때 하는 hover

hover는 마우스를 올릴시 작동하는 것 .box:hover { }

active는 마우스로 클릭을 유지하는동안 작동하는것 .box:active { }

focus는 사용자한테 데이터를 입력받는 요소들인 input, button 같은것들에 그대로 적용

input:focus { } focus는 입력받는요소에만 작동하지만 div나 span 같은 요소들에도 적용할수있다. tabindex속성을 통해 focus 요소를 만들수있다. tabindex 값을 -1로 주어 최우선 순위를 지정해주는것이다. <div class="box" tabindex="-1">

transition : 1s hover나 변화작동시 초단위로 천천히 변화, 지연

─────────────────────────────────────────────────────

가상 클래스 선택자

.fruit span : first-child{ }

<div class="fruit">

<span>1 //first-child

<span>2

.fruit span : last-child{ }

<div class="fruit">

<span>1

<span>2 //last-child

.fruit *:nth-child(2)

//fruit클래스의 2번째 요소

.fruit *:nth-child(n)

//fruit클래스의 n번째 요소

n은 0부터1씩증가로 결국 숫자전체

.fruit *:not(span) //span을 제외한 전부*

─────────────────────────────────────────────────────

가상요소선택자
추가할 내용에는 내용이없어도 content:""가 있어야한다.

.클래스 :: before
{content:"내용"}
클래스를 가진 태그 내부의 요소 앞에 내용삽입

.클래스 :: after
{content:"내용"}
클래스를 가진 태그 내부의 요소 뒤에 내용삽입

{content: ""}
width나 height는 content가 글자이므로 인라인이다. 그래서 display:block으로 블록처리해주어야 나타난다}

─────────────────────────────────────────────────────

속성선택자

[속성="값"] { 속성 : 값 }

─────────────────────────────────────────────────────

CSS 강제상속 자식 css속성 값에 부모의 값을 물려받기위해 inherit을 쓴다.

─────────────────────────────────────────────────────

선택자 우선순위
점수매기기
1. 속성값 뒤에 !important; 무한점
2. 인라인(style="") 1000점
3. id(#) 100점
4. class(.) 가상클래스 hover,focus,active포함 10점
5. 태그 (::before 같은 요소선택자포함) 1점
6 전체(*) 0점 , 상속 0점

VSCODE의 주요확장기능 설치

1. 줄맞춤기능 beautify 확장자 다운로드후 바로가기 설정으로 beautify selection 설정

2. 앞뒤태그자동화 auto rename tag 설치

3. 실행탭생성 live server 설치

CSS 사용 선언 

<link rel="stylesheet" href="./main.css">

JAVAscript 사용 선언

<script src="./main.js"></script>

파일경로의 주변경로와 절대경로

./ 주변경로 (생략가능)

../ 상위폴더경로 (밖으로 한번더 나가세요)

http 절대경로

/ 루트(최상위)경로

파일명을 index로 할시 브라우저는 index를 우선실행한다.

크로스사이트를 위해 브라우저 마다 각기 다른 CSS-Base를 리셋하고 초기화하기위해 reset-css 구문을 head에 선언한다.