생활코딩 WEB2-CSS 정리

• <style> 태그 안에 css 문법을 넣어서 css를 사용할 수 있다. front 태그를 이용해서 일일이 작성해야 하는 html과 다르게 css는 style 태그 안에 문법을 넣어서 한 번에 처리 가능하기 때문에 효율성이 높다.
• 원하는 속성을 지정하려면 태그 안에 style 속성을 넣어서 지정한다.
• css 속성을 검색할 때- ex)css text size property, css text center property
• 코드 뒤에는 항상 ;(세미콜론)을 붙인다.
• 선택자(css selector)는 다양하기 때문에 찾아서 공부해봐야 한다.
• class(그룹핑하다, 묶는다는 의미) 선택자는 중복된 코드를 넣을 때 사용해서 중복을 없애줌 - class 선택자에 고유한 이름을 붙여주면, 그 이름이 붙어있는 코드에 같은 css를 적용할 수 있다. 하나의 태그에 여러 개의 class 선택자를 붙일 수 있으며, 중복될 경우 밑에 있는 (가장 최근에 생성된) 코드의 결과가 나오게 된다.
• id 선택자를 사용하면 위의 같은 상황을 막을 수 있다. id 값은 중복되면 안 된다..!
• id(# ) 선택자> class(.) 선택자> 태그 선택자 순서로 강하다. 다 똑같은 선택자의 경우 가장 마지막에 작성된 코드의 우선순위가 높다. 포괄적인 것을 이용하여 전체적인 것을 정하고, 예외적인 것을 상위 선택자로 설정하면 더 편하고 효율적인 코드 작성이 가능하다.
• 하나의 태그에는 여러 개의 속성이 들어올 수 있고, 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
• block level element는 화면 전체를 쓰는 태그다.
• inline element는 그 부분만 쓰는 태그다. display 속성을 이용해서 block을 inline처럼 inline을 block처럼도 사용할 수 있다.(디스플레이 설정값일 뿐 언제든지 바꿀 수 있다.)
• padding은 테두리와 콘텐츠 사이 간격이다.
• margin은 테두리와 테두리 사이의 간격이다.
• 주석처리는 /* */를 사용한다.
• 개발자 도구 확인해보면서 하면 좋다.(우클릭-> 옵션-> 검사)
• (참고) can i use-현재 웹브라우저들이 얼마나 그 기술에 대해 채택하고 있는지 통계를 보여주는 사이트다.
• 미디어 쿼리는 다양한 화면에 적응해서 자신의 모습을 스스로 바뀌게 할 수 있는 속성으로, 반응적인 웹을 만들 수 있다.
• 동일한 css를 적용해야 할 때 stylesheet로 따로 빼서 link rel=”stylesheet” href=”style.css(폴더명)”입력하면 더 효율적으로 사용이 가능하다.(중복 방지)