CSS 알아보기

CSS

- 웹페이지를 꾸며주는 언어

- 정보와 디자인의 엄격한 분리

- HTML의 본질: 정보(전자 출판을 위한 언어, 정보를 생산하고 보관하는 것)

 

 

선택자

선택자는 CSS의 주어.

어떤 태그를 디자인 하기 위해서는 디자인하려는 태그를

1. 선택하고 (선택자)

2. 선택한 대상에게 효과를 줘야 합니다 (선언)

 

 

 

선택자의 종류 (id)

많은 리스트 중에 하나만 수정하고 싶을 때 <li id="select">CSS<li>를 html에 입력한다. CSS에선 #select로 받아준다.

 

부모 자식 선택자

1. ul li {}

ul 아래있는 li에 모든 css 적용

 

2. ol>li {}

ol의 자손들에게 적용, but 위의 사진은 ol이 2개 있기 때문에 아래 3번을 통해 해결

 

3. #lecture>li {}

 

가상 클래스 선택자

id 선택자, 태그 선택자도 아니다.

id = 한개를 선택하는 것도 아니고 / 태그 = 전체를 투박하게 선택하는 것도 아니다.

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover(맴돌다) - 마우스를 롤오버 했을 때 
• :active - 마우스를 클릭했을 때 

 

a:focus

input:focus

는 클릭하거나 탭키를 눌렀을 때 색상이 변하는 것이다.

 

자주 사용하는 효과

1. font size

px: 사용자의 조정에 따른 폰트 크기 변동 X

rem: 사용자의 조정에 따른 폰트 크기 변동 O

*시각적인 배려를 위해서라도, 사용자에게 권리를 주는 개념으로 rem이 좋다.

 

2. Color

color name

         <style>
            h1{
hex:               color:rgb(256, 256, 256);
rgb:                background-color: #ed8989;
            }
        </style>

 

3. text-align

text-align: justify;

양쪽을 균등하게 분배해주는 것

 

4. Font

font-family: verdana; - 어떤 폰트 넣고 싶은 지 선택할 수 있다.

고정폭이 필요할 때 monospace;

 

타이포그래피: 웹폰트

구글에서 가져온 폰트를 웹상으로 넣는 방법

만약 임베드가 없다면? Web font Generator를 검색해서 임베드를 찾으면 된다.

 

 

상속

 

캐스케이딩 스타일 시트(CSS)

 user 사용자의 웹페이지 디자인 결정권이 요구.

조화의 대가 - 우선순위가 필요하다. : 웹브라우저 < 사용자 < 저자

 

 

레이아웃 들어가기

inline

block level