반응형
1. class & id
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <<html> <head> <title>id/class</title> <meta charset="utf-8"> <style> .big-blue-text{ /*class 변경 시 "."*/ font-size : 64px; color: blue; } .centered-text{ text-align: center; } #best-text{ /*id 변경 시 "#"*/ color: orange; } </style> </head> <body> <h1 class="centered-text">heading 1</h1> <h2>heading 2</h2> <p class="big-blue-text centered-text">첫번째 문단</p> <p id="best-text">두번째 문단</p> <p>세번째 문단</p> </body> </html> => class 두 가지 이상 적용 시 사이에 엔터 삽입 => 스타일 선택자에 class 많이 들어가는 경우 갯수에 따라 스타일의 우선순위 달라져서 주의해서 사용해야함(가급적 지양) => 단순한 독립성 , 우선순위 위해서는 -> id값 , inline스타일 => class 이름 : 셀렉터 우선 , 일관적 작성 => & : 부모 참조 선택자 => Class(중복 클래스 가능/여러 클래스 가능/여러 요소 스타일링하고 싶을 때) vs Id(중복 아이디 불가/하나의 아이디만 가능/한 요소만 스타일링 하고 싶을 때) | cs |
2. div
=> 별다른 기능이 없는 block(어떤 'block' 요소든 특별한 설정 없이는 독단적인 줄에 있으려고 하는 성향 존재)
3. css 파일 따로 쓰기 & link 연결
1 2 3 4 | ##순서 .css 파일 생성 -> html 파일에서 style태그 복사 붙여넣기 -> <head> 태그 안에 link 연결 (<link href="폴더/파일명" rel(relationship)="stylesheet") |
4. css 방식
1 2 3 4 5 6 7 8 | A.사용법 a. 외부css사용하여 링크로 연결 b. html 내부에 <style>태그 사용 B. 외부 CSS 사용을 권장 / 여러 파일에 중복 코드 제거에 좋음 C. 외부 CSS 파일을 사용하되 , 태그 자체에 style넣어 css 변경 가능(style 속성) => ex)<h1 style="color:red; font-size: 72px;">css</h1> | cs |
반응형
'Web > HTML & CSS' 카테고리의 다른 글
| 6. CSS 활용 (0) | 2019.03.12 |
|---|---|
| 5. BOX Model -(2) (0) | 2019.03.12 |
| 5. BOX Model -(1) (0) | 2019.03.03 |
| 4. text 스타일링 (0) | 2019.02.27 |
| 1.HTML & CSS 기본 태그 (0) | 2019.02.27 |