CSS
[CSS] CSS의 기초
by hans-j
2022. 10. 3.
Cascading Style Sheet 를 의미하는 CSS는
HTML으로 작성된 정보를 꾸며주는 언어
CSS의 구성 요소 : { 속성 : 속성값; }
선택자 : 디자인을 적용할 HTML의 영역
속성 : 어떤 디자인을 적용할지 정의
속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것
CSS 연동방법
Inline Style Sheet : 태그 안에 직접 원하는 스타일 적용
<h1 style="color: red;"> coding 101 </h1>
Internal Style Sheet : <Style> 태그 안에 넣기
<head> <style> h1 { background-color: yellow;} </style> </head>
External Style Sheet : <link> 태그로 불러오기. 가독성이 높고 유지보수가 수월
<head> <link rel="stylesheet" href="style.css"> </head>
CSS 선택자
Type Selector : 특정태그에 스타일 적용
<style> h2 { color: red; } </style>
Class Selector : 클래스 이름으로 특정위치에 스타일 적용
<style> .coding { color: blue; } </style>
ID selector : ID를 이용해스타일 적용
<style> #coding { color: green; } </style>
Class와 ID의 차이점 : Class는 전체적으로 변경할 시, ID는 한가지를 적용할 시 사용
부모 자식 관계인 생성자에 모두 스타일이 적용되어 있다면 자식 생성자를 더 우선 순위로 둔다.
*'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성했습니다.
