front-end 국비과정 7일차 학습일지 html(자주 사용되는 태그) css(선택자와 가상 클래스,요소 선택자)

html에 핵심적으로 사용되는 요소들

div태그:
1 의미를 가지지 않는 블록 요소이다
2주로 레이아웃을 잡을때 사용한다

h1~h6태그:
1제목을 의미하는 블록 요소이다
2 숫자가 작아질수록 중요도가 높아진다  
3h태그는 숫자를 순차적으로 작성해야 한다 

p태그:
1문장을 의미하는 블록 요소이다 
2주로 문단에 단락을 만들때 사용된다.

img태그:
1이미지를 삽입하는 인라인 요소이다
2 alt(대체 택스트)와 src (이미지 경로)를 필수로 작성해 줘야 한다.

ul태그
1순서가 없는 목록을 의미하는 블록 요소이다
2li태그와 함깨 사용되는데 이때 li태그는 목록을 구성하는 item에 하고 블록 요소처럼 동작한다.

ol태그
1순서가 있는 목록을 의미하는 블록 요소이다
2li태그와 함깨 사용되는데 이때 li태그는 목록을 구성하는 item에 하고 블록 요소처럼 동작한다.

a태그 
1페이지 이동에 사용되는 하이퍼링크를 설정하는 인라인 요소이다
2속성값으로 href= "페이지 주소"를 작성한다
3 속성 값으로 target을 사용할 수 있는데 기본값은 _self이다 이때 속성 값은 _self와 _blank가 있다 
3-1_self= 현제 tab에서 href에 해당하는 페이지를 open한다 
3-2_blank= 다른 tab에서 href에 해당하는 페이지를 open한다

span태그
1의미를 가지지 않는 인라인 요소이다
2주로 문장에 특정 text에 css를 적용할 때 해당 text을 래핑 할 때 사용된다

br 태그 
1줄바꿈을 해주는 인라인 요소이다

input
1사용자가 데이터를 입력하는 영역을 제공하는 inline-block요소이다
2 type이라는 속성을 통해 어떤 데이터를 입력받을지 설정한다 때문에 속성 값이 중요한데 속성 값은 개발 블로그에 카테고리 html table과 form에 대한 내용을 참조한다.
3 value라는 속성을 이용해 사용자가 데이터를 입력하기 전에 기본값으로 어떠한 내용을 명시해 놓을 수 있다.
4 placeholder라는 속성을 이용해 사용자가 어떤 내용을 입력해야 할지 힌트를 제공할 수 있다.
5 disabled라는 속성을 이용해 해당 input 태그를 비활성화시킬 수 있다.
6 테두리는 border가 아닌 outline을 사용하기 때문에 개발자가 테두리를 css로 제어하고 싶을 때 outline을 none으로 바꾼 후 border를 설정해 줘야 한다

label태그 : 
1input태그와 연동하여 input 태그의 제목을 설정하는 인라인 요소이다.
2 input 태그와 연동할 때 label에 for과 input에 아이디를 연결해서 사용할 수 있지만 label을 부모 요소로 input을 자식 요소로 만들어 사용하면 별도의 for과 id를 명시하지 않아도 연동된다

table태그: tr, td ,th, caption태그를 이용해 표를 만들어주는 태그이다
caption태그: 표에 제목을 설정한다.
th태그: tr태그와같이 열(가로줄)을 만들면서 해당 열을 구성하는 cell을 두껍게 표시한다 주로 표에서 제목을 나타내는 줄에 사용된다
tr태그: 표에서 열(가로줄)을 만들어준다
td태그: 표에서 행(세로줄)을 만들어준다

html에 전역 속성

전역속성이란? 
어떤 태그에서든 사용할 수 있는 속성을 의미한다

title:뷰포트에서 해당태그에 마우스를 올려놨을 때 title에 내용이 표시된다 
style: 해당태그에 css를 사용할 수 있게 설정하는 속성이다 
class: 
1요소에 이름을 부여한다 중복하여 사용 할 수 있다 
2 html에서 class(.)로 부여된 이름을 이용하여 css로 해당 태그를 제어한다 
id: 
1요소에 이름을 부여한다 but 고유하기 때문에 중복하여 사용하면 안 된다.
2 html에서 id(#)로 부여된 이름을 이용하여 css로 해당 태그를 제어한다.

CSS

선택자란? css를 적용할 대상을 지정한다 
속성이란?  css의 종류를 의미한다
속성 값이란? 해당 속성에서 사용 가능한 값을 의미한다
사용법 : 선택자{속성:속성값;}

1 속성과 속성 값은 하나의 세트이다
2 하나의 선택자에 속성과 속성 값은 여러 개 작성 가능하다

기본선택자 모음
1태그 선택자 : 특정 태그를 선택자로 명시하여 css를 적용할 대상으로 만든다
2 전체 선택자(*): 모든 요소를 선택한다.
3id 선택자(#className): html에 특정 요소에 id가 명시되어있다면 해당 요소의 id이름을 참조하여 선택한다
4 class선택자(. className): html에 특정 요소에 class가 명시되어있다면 해당 요소의 class이름을 참조하여 선택한다

복합 선택자  : 선택자 2 이상을 조합해서 요소를 설정하는 선택 자이다 
1
일치 선택자: 선택자 2개를 동시에 만족하는 요소를 선택한다
사용법: 선택자 두개를 붙여서 사용한다 
ex) div.box1 
위 코드처럼 태그선택자와 class선택자 두 개를 동시에 만족하는 요소를 선택한다

2
자식 선택자: 특정요소의 자식 요소를 선택한다 
사용법 : >를 기준으로 앞에 명시한 선택자가 부모 요소이고 뒤에 명시한 선택자가 자식 요소이다
ex) ul> li
3
후손 선택자 : 자식 요소를 포함한 자식의 자식(후손) 요소를 선택한다 
사용법: 띄어쓰기를 이용해 선택자를 나눈다 처음에 명시한 선택자가 가장 상위 요소에 해당하고  마지막에 명시한 선택자가 가장 하위 요소에 해당한다
ex) div ul li.box1
4
인접 형제 선택자 : 형제요소중 다음 형제 요소 하나를 선택한다
사용법: +를 이용해 선택자를 나눈다 +기준 첫 부분(1번 선택자)을 기준으로 다음 형제 요소인 끝부분(2번 선택자)을 선택한다
ex)

  <style>
   li.box1+li.box2{
  color: green;
}
  </style>
<ul>
  <li class="box1">1</li>
  <li class="box2">2</li>
  <li class="box3">3</li>
</ul>

일반 형제 선택자: 형제요소중 다음 형제 요소 전부를 선택한다
사용법 : ~ 를 이용해 선택자를 나눈다 ~기준 첫 부분(1번 선택자)을 기준으로 다음 형제 요소인 끝부분(2번 선택자)을 포함한 다음 형제 요소 전부를 선택한다
 ex)

<style>
   li.box1~i.box2{
  color: green;
}
  </style>
<ul>
  <li class="box1">1</li>
  <li class="box2">2</li>
  <li class="box3">3</li>
</ul>

속성선택자: 해당 요소의 속성을 이용해 css를 설정한다 class를 부여하지 않아도 해당 요소의 css를 설정할 수 있다는 장점이 있다.
사용법: [속성 = 속성값] ex <input type = "text">  [type="text"]{color:red;]

가상 클레스 선택자 

1 hover: 마우스 커서가 해당 요소에 올라가 있는 동안 hover안에 css내용을 적용한다.
사용법:hover를 사용하고싶은 요소:hover

2 active: 해당 요소에 마우스 클릭을 유지하는 동안 active안에 css내용을 적용한다
사용법:active를 사용하고싶은 요소:active

3 focus: 해당 요소가 focus 되어 있는 동안 foucus안에 css내용을 적용한다 focus는 대화형 콘텐츠에 적용할 수 있다. ex) input, select, button 등등
사용법:focus를 사용하고싶은 요소:focus

4 first-child: 자신을 포함한 형제 요소 중 첫 번째 요소를 선택한다
사용법: first-child를 사용하고싶은 요소:first-child

5 last-child: 자신을 포함한 형제요소중 마지막 요소를 선택한다
사용법 : last-child를 사용하고싶은 요소:last-child

6 nth-child() : 형제 요소 중 () 안에 명시한 숫자에 배치된 형제 요소를 선택한다 () 안에 n을 넣어줄 수 있는데 0부터 시작한다 n이라는 값을 통해 2n=짝수 요소 2n+1 = 홀수 요소를 선택할 수 있다.
사용법 : nth-child를 사용하고싶은 요소:nth-child(숫자 or n)  

7 not() : () 안에 명시된 요소를 제외한 모든 형재 요소를 선택한다
사용법: not을 사용하고싶은 요소:not(요소 이름)

-child속성은  :을기준으로 붙어있기 때문에 일치 선택자로 해석할 수 있다 때문에 조건이 맞지 않으면 css가 적용되지 않는 점을 숙지하자


가상 요소 선택자 

1 before:: =  before을 사용한 요소내부의 시작 부분에 내용을 삽입한다 이때 content라는 속성을 이용해 내용을 삽입하고 css로 styling 할 수 있다
사용법 before을 사용할 요소:: content:"삽입할 내용" ;

2 after::  = after을 사용한 요소내부의 끝부분에 내용을 삽입한다 이때 content라는 속성을 이용해 내용을 삽입하고 css로 styling 할 수 있다 
사용법 after를 사용할 요소:: content:"삽입할 내용" ;

내용 삽입이 없이 css로 styling하는 경우라도 content는 명시해줘야 한다 그렇지 않으면 동작하지 않기 때문에 styling도 불가능하기 때문이다

상속
글자 관련 css속성은 하위요소에 상속된다.

css적용에 우선순위
1!important 
 점수 : ∞(무한대) 

2 인라인 선언 방식 : html에 태그 안에 직접 style을 선언하여 css를 적용하는 방식
점수 : 1000점
ex) <div style="color:  red;"> hellow </div>

3#(id선택자)
 점수 :100점

4.(클래스 선택자)
점수 : 10점

5div등등(태그 선택자)
점수 : 1점

6*(전체 선택자)
점수 : 0점
7상속 
: 점수 없음

우선순위를 결정하는 순위
1 점수가 높은 선언이 우선 적용된다.
2 점수가 같은경우 가장 마지막에 명시된 선언이 적용된다.
3! important가 적용된 선언은 어떤 것보다 가장 우선적으로 적용된다.