CSS [생활코딩]

CSS 등장 이전과 이후

 

2만개의 태그의 폰트를 바꿔야 한다고 생각하면

HTML만으로 웹개발 하기에는 끔찍하다.

 

 

style이라는 태그는 html의 문법으로 해석이 되지만 태그 내의 문장은 css의 문법에 맞게 처리.

즉, CSS를 통해서 중복을 해결할 수 있다.

 

 

 

CSS문법

 

 

class를 사용 

 

id를 사용

 

id값이 class보다 더 우선 순위가 높은 소유권을 가진다.

 

 

 

박스 모델

h1태그는 한줄을 다 사용하지만 a태그는 한줄을 통으로 사용하지 않는다.

한줄을 다 사용하는 것을 block level element

한줄을 다 사용하지 않는것을 inline element

==>display라는 속성을 사용해서 inline과 block성질을 변경 할 수 있다.                                  none을 주면 사라진다.

 

span은 inline.  div은 block

 

 

 

선택자에서 태그를 , 로 구별하여 중복을 줄일 수 있다.

 

 

 

 

 

 

앞의 border의 중복도 아래의 한줄로 중복을 줄일 수 있다.

 

 

 

 

 

이렇게 태두리와 컨텐츠 사이에 간격을 padding으로 줄 수 있다. 겨울에 입는 그 패딩을 떠올리면 기억 하기 쉽다 🤣 🤣

 

이렇게 margin을 사용해서 간격을 조절 할 수 있다.

 

block element의 경우 width를 사용하여 태그의 가로 크기 조절 가능 

 

그리드

 gird를 사용하여 row 방향으로 정렬 하게 할 수 있다.

1fr은 남은 자리 차지라는 뜻.

2fr 1fr로 주면 2:1 비율로 자리를 차지 한다.

 

 

 

 

 

 

 

 

반응형 디자인

화면의 크기에 따라 웹 페이지의 요소들의 모양을 최적화 하는게 반응형 디자인이다.

media태그를 사용.

화면의 크기가 최소 800px이면 아래의 div가 작동

 

 

 

 

 

 

 

CSS 코드의 재사용

각 페이지 별로 css코드를 재사용하려면 하나씩 적기엔 너무 많은 중복과 무리가 간다.

그래서 css파일을 생성한다 . 

Link를 사용 해서 css파일을 각 페이지 별로 정보를 넘김.

 

 

 

 

 

cashing 덕분에 또한 더 재사용성이 늘어난다