CSS - 설명 및 기초

CSS(castcading style sheets)

 - web 브라우저(HTML)을 꾸며주는 마크업 언어

  *CSS 효과는 HTML를 꾸미기 기능을 부여할 때, 정해진 우선순위에 따라 효과를 넣는다.

 - <style> </style>를 활용함

  *a는 HTML에 있는 모든 a 태그를 선택함(selector(선택자))

  *{color:red;}는 선택된 태그들에 대해 주어지는 효과(declaration(선언))

  *color는 property(속성)

  *red는 value(값)

​

​

 - 태그에 직접 css 표기

  예시)

     <a href=“2.html” style=“color:red”>CSS</a>

 - 하나에 선택자에서 여러개의 효과를 넣을 때, ; 으로 구분한다.

​

폰트 꾸미기

 - 폰트 색깔 변경

  *폰트 색깔 변경 속성은 color 이고 값은 영어로 색깔을 넣으면 된다.

 - 폰트 크기 변경

  *폰트 사이즈 변경하는 속성은 font - size으로 한다.

  *표현방법은 20px, 1rem등이 있다.

  * h1태그는 html 주어진 속성으로 h1의 글자 크기가 h2 글자 크기보다 작아야 하지만, <style>태그로 글자 사이즈 변경이 가능.

 - 폰트 굵기 변경

  *폰트 굵기를 변경하는 속성은 font - weight으로 사용한다.

  *얇게 값은 lighter, 굵게 값은 bold.

 - 폰트 스타일 바꾸기​

  *폰트 스타일 변경 속성은 font-family이다.

  *구글링을 하면 더 많은 폰트 종류를 확인 할 수 있다.

  *폰트 스타일은 https://developer.mozilla.org/ko/docs/Web/CSS/font-family 사이트 참고

   http://software.naver.com/software/fontList.nhn?categoryId=I0000000#brandId=

 

폰트

폰트브랜드 > 폰트 전체보기 폰트 전체보기 개인폰트 기업/단체폰트 네이버 DX코리아 훈디자인 타이포디자인 폰트릭스 인기순 | 평점순 | 다운로드순 | 업데이트순 Windows Mac 나눔스퀘어 나눔스퀘어 제목을 더 제목답게 만들어주는 폰트 인기 | 평점 4.7 | 프리 윈도우용 나눔바른고딕 나눔바른고딕 네이버의 나눔바른고딕 폰트 인기 | 평점 4.5 | 프리 윈도우용 타이포_쌍문동 B 타이포_쌍문동 B 제목용, 복고 폰트 인기 | 평점 4.8 | 프리 윈도우용 DX영화자막Medium DX영화자막Medium 기울기를 준 손글씨 자막용...

software.naver.com

 

font-family

 - CSS font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을  지정할 수 있게 해줍니다.

(developer.mozilla.org)

브라우저 Text 위치 변경

  *text 위치 변경 속성은 text - align

  *값은 left(왼쪽) right(오른쪽) center(가운데) justify(양쪽정렬)