css 기초 메모

a {
color:red;
}

여기서 a 는 Selector 선택자라고 칭함.
Declaration 선언함
색깔이라는 Property 속성을 빨강이라는 Value 값으로


css 검색 팁

텍스트 크기를 어떻게 하고 싶을 때.
- css text size property
결과 = font-size: 20px;

텍스트 가운데 정렬하고 싶을 때.
- css text center property
결과 = text-align: center

class 선택자 .
id 선택자 #

css 선언의 중복이 일어났을 때
선택자의 우선 순위
id class 그냥 태그

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

박스모델

이 태그들을 하나의 박스라고 생각하면 편함.

화면 전체를 쓰는 태그들은 블럭태그 block level element
딱 자신의 부피만큼 사용하는 태그는 인라인태그 inline element
기본값일 뿐 display 속성을 통해 언제든 바꿀 수 있다.
값 inline, block

*참고 display 값을 none 으로 두면 화면에서 사라짐.

쉽게 확인하고 싶다면
h1 {
 border:5px solid red;
}
이렇게 테두리 쳐서 확인해볼것.

 border-width:5px;
 border-color:red;
 border-style: solid;
이걸 짧게 쓴거임

검색해서 확인할때
-css box model
 
콘텐트 크기 지정할 때
폭 width
높이 height
덩치 padding
간격 margin


ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

밑줄을 주고싶다.
테두리를 주면 됨. 그리고 아래만 남기면 됨.
- border-bottom: 1px solid gray;

반응형 웹/ 반응형 디자인 Responsive Web
화면의 크게에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것

이게 필요한 순간이 온다면 미디어 쿼리를 공부하기


css파일의 재사용성 높이기

1. style.css 파일을 만들어서 css 때려넣기.
2. html파일에서 head 내부에 css 링크 달아주기.

<link rel="stylesheet" href="style.css">

모든 html 파일에 css가 작성되어 있다면 모든 html 파일에서 특정 css를 추가해달라 했을 때 귀찮음.
또, 모든 파일의 css가 같은지 다른지 확인하기 매우 번거로움