3일차 html과 css (html , css , 속성 , 식별자 )

 

• css란 ? 
• 문법의 종류
• 외/내부 스타일 시트
• css 작성 방법 및 선택자 
• 블록과 인라인이란?
• 선택자의 우선순위 
• 클래스와 선택자의 종류

css란 ? 

Cascading style sheets의 줄임말: 스타일을 위에서부터 흘러가는대로 작성한 문서 라는 뜻이다. 

 

우리의 html 문서가 스타일이 적용되는과정 바이트 코드 변환을 해서 태그 , 객체로 변환을 하고 노드라는 형태로 만든다.

css 스타일 시트를 읽은 이후 css 노드와 html노트를 가지고 렌더링 노드를 생성해서 브라우저 렌더링을 시작한다.

영역을 관리하는 것 : html , 영역의 어떤 부분에 스타일을 적용할 것인지 결졍: css 노드 

 

문법의 종류 

 

- 선택자 #: id 선택자

- 선택자 .: class 선택자

- 선택자 element : 엘리먼트 전체를 선택 

 

작성 방법 : 선택자 + {} 객체 

객체{

    속성: 값; < 기본문법 

}

0. css의 주석: /* 내용 */

1.내부의 스타일 시트

내부의 스타일 시트

2.외부의 스타일 시트 

외부의 스타일 시트

 

 

css 작성 방법

선택자 

 

tag , class , id

 

1.1 tag 
<style>

       선택자 이름{

            스타일의 내용

          

          속성 : 값;

}

 

a{

   display : block;

   color : red;

}

</style>

 

2.2 class 

-클래스 표기법은 점을 앞에 붙여서 작성해야 한다. ( 맨앞에는 숫자가 작성되면 안된다.)

-다수의 태그에 원하는 클래스를 줄 수 있다.(태그의 그룹 이름)

 

<style>

     display : block;

</style>

 

3.3 id

하나의 태그에 원하는 아이디를 줘야한다 . (태그의 고유의 값)

- url의 형태에 따라 최상단에 노출되게 만들수 있다. (#id 명)

- 하나의 고유의 값 자바스크립트를 사용할때 이름을 변수처럼 사용할수 있다. (이건 이후에)

 아이디는 고유의 값으로 요소의 아이디명을 브라우저의 요청 url을 작성할때 맨 뒤에 # 아이디명을 작성하게 되면 스크롤이 요소의 위치로 이동하게 만들어준다. 이것은 브라우저의 기능으로서 작동( 같은 화면에서 이동을 할 떄)

<style>

     #content {

         display : block;

}

</style>

 

블록과 인라인 

-너비와 높이를 지정할때 블록은 크기를 지정할 수 있지만, 인라인은 너비와 높이를 지정할 수 없고 본인의 내용의 크기 만큼만 너비와 높이를 가질 수 있다. 

- 하지만 , 인라인 요소에 너비와 높이를 주고싶은 경우가 있는데, inline-block속성을 display의 값으로 정의 해주면 된다. 

 

선택자의 우선순위 

- 태그 선택자 < 클래스 선택자 < id선택자 

- 스타일을 작성할때 가장 밑에 작성한 스타일이 우선적으로 적용된다.

-인라인 속성으로 스타일을 적용하게 되면 가장 우선순위가 높다. 그리고 가독성이 많이 떨어진다. 

- !important 값 뒤에 정의하게 되면 우선순위에서 우리가 가장 높게 설정할 수 있다. 

 

클래스와 선택자의 종류

 

자식 선택자란? 

선택자의 자식의 요소의 스타일을 정의한다.

 

이미지의 사이즈를 정의할 떄

- 이미지에는 각각의 비율

- 이미지의 비율은 무시하고 너비와 높이를 주면 안된다.

- 이미지의 너비 혹은 높이만 지정을하고 비율을 유지시키자.

 

다중클래스란?

-클래스 정의할때 클래스의 옆에 문자열을 한칸 띄어서 작성한다.

 

형제 선택자란?

- 선택자의 클래스를 다중으로 가지고 있을경우 스타일 적용

 

css의 애니메이션 

-애니메이션 속성을 정의하고 단위의 프레임을 정의해서 프레임대로 움직이는 인터렉션의 효과를 주고싶을떄

선형보간법 동의 @keyframe이라는 구문으로 애니메이션을 선언을 해놓고 쉽게 말해서 작성을 미리 해두고 

재사용을 해서 사용한다.