0. 선택자(selector)와 효과(deleration)
<style>이라는 태그를 어디에 지정할 지 설명하기 위해 '(대상) {}'를 사용하는데 이를 선택자라고 한다. -> ex. a {color:black;}
선택자에 지정될 효과를 효과(deleration)라 한다.
1. 세미콜론(=구분자)
여러개의 효과를 나열할 때 구분해주는 역할.
2. 전체 글자색 변경하기
<style> a { color:red; } </style>
=> <a>태그가 들어간 모든 폰트 색상을 red로 설정
cf. <font> 태그는 모든 글자색을 하나하나 일일이 지정해줘야 하는데 위 방식으로 하면 한번에 다 지정할 수 있다.
3. 부분/특정 영역 글자색 지정하기
<body>
<a href="1.html" style="color:orange;"> HTML </a>
</body>
4. 복수의 특정 영역 글자색 지정하기
1) 글자색을 지정할 부분에 임의의 이름의 class 속성으로 묶어준다. => class="saw"
2) <style> 태그에 class로 지정한 영역을 선택자로 하여 색깔을 지정한다 ✔ 단, 이때 이름 앞에 .을 반드시 붙여야 한다. => .saw { color:pink; }
5. 폰트사이즈 지정하기
<style> a { font-size:45px; } </style>
6. 텍스트 정렬하기
<style> a { font-size : 45px; text-align:center; } </style>
7. border : 테두리 만들어주는 명령어
1) border-width : 테두리 간격
2) border-color : 테두리 색상
3) border-style : 테두리 선 모양
4) padding : 테두리 내부 여백
5) margin : (2개 이상의 테두리가 있을 때) 테두리와 테두리 사이의 여백
border-width: 5px;
border-color: red;
border-style:solid;
padding:20px;
왼쪽 margin:0; 오른쪽 margin:20px;
8. 적용되는 순서
1) 가까이에 있는 순으로 적용된다.
2) id > class > 태그 선택자 순으로 강력. id도 있고 class도 있고 태그도 있을 경우 (순서와 관계없이) 강한 순으로 적용된다.
9. 줄여쓰기
1) 같은 내용은 ,로 구분만 하고 한번만 써서 공통적용시킬 수 있다.
2) border에서 width, color, style을 생략하고 값을 일렬로 나열해도 적용된다.
아래 3개의 결과는 동일하게 나타난다.
결과
10. 구분선 긋기 : border-bottom: 1px solid gray;
https://academy.elice.io/courses/19968/lectures/162229
생활코딩! HTML + CSS + 자바스크립트 | 엘리스
난생 처음으로 프로그래밍을 시작하는 분들이라면 생활코딩 강의로 시작하세요!
academy.elice.io
'[커리어] 에디터의 자기계발 > [도전] 비전공자 코딩 학습기록' 카테고리의 다른 글
| [CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #6. 박스모델 (0) | 2022.04.12 |
|---|---|
| [CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #5. 단위, 색상, 백그라운드 (0) | 2022.04.11 |
| [CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #4. 가상 선택자 구체성, 상속 (0) | 2022.04.06 |
| [CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #3. 가상 선택자 (0) | 2022.04.02 |
| [CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #2. 선택자 (0) | 2022.03.29 |
댓글