2021-07-06 Part(1)_ch(5~7)

인라인과 블록

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

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

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

 

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점