코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
* 이 사이트의 HTML 강의를 수강하고 적는 강의노트이다.
* 개인공부용이다.
* 쌤 말투 시크해서 넘 좋다.
* 강의 예제 노출이 안되게 조심하자
[1. HTML과 CSS]
1. html 파일에 css연동하기
2. css에 style 넣기
[2. CSS 셀렉터]
1. class 셀렉터
2. id 셀렉터
3. 태그 셀렉터
4. html style
[3. 셀렉터 우선순위]
(3) CSS로 html 꾸미기_CSS 속성 별 우선순위
[1. HTML과 CSS]
1. html 파일에 css연동하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/ch10.css" rel="stylesheet">
</head>
<body>
</body>
</html>이렇게 넣으면 된다.
<head>에 한줄이 더 추가된 걸 볼 수 있다.
...
2. css에 style 넣기
html 에 짱구 이미지를 넣고, 이쁘게 꾸며봤다.
...html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/ch04.css" rel="stylesheet">
</head>
<body>
<img src="image/ch03_profile.jpg" class="profile">
</body>
</html>
이미지 태그 안에, class="profile" 이라는 문구가 추가되었다.
아까 연동시킨 css 파일을 들어가보면은
...css
.profile {
width : 100px;
display: block;
margin-left: auto;
margin-right: auto;
}이렇게 들어가있다.
html 에서 class="profile"로 되어있는 애들은 css 에서 .profile로 쓴다.
아 그리고 이 class를 class 셀렉터라고 부른다.
...
[2. CSS 셀렉터]
class말고도 다른걸 쓸 수 있다.
id도 있고, 전체 태그로도 셀렉터를 설정할 수 있고,
애초에 그냥 css를 사용하지 않고도 쓸 수 있따.
...
1. class 셀렉터
아까 설명했던 class 셀렉터 (brackets 로 보겠음)
html 에서 class="어쩌고"로 되어있는 애들은 css 에서 .어쩌고로 쓴다.
...
2. id 셀렉터
html 에서 id="어쩌고"로 되어있는 애들은 css 에서 #어쩌고로 쓴다.
...
3. 태그 셀렉터
태그 셀렉터들은 해당 태그로 쓴다.
여기서는 p태그 셀렉터이기 때문에 p로 썼다.
...
4. html style
마지막은 그냥 html에서 style="어쩌구" 이렇게 적어준거이다.
[3. 셀렉터 우선순위]
id 셀렉터랑 class 셀렉터 두개 다 썼을 때, 프로그램은 class 셀렉터의 코드를 선택한다.
id 셀렉터가 class 셀렉터보다 우선순위가 낮기 때문이다.
코딩애플 쌤이 진짜 직관적으로 설명해주셨다.
id 셀렉터는 10점
class 셀렉터는 100점
태그 셀렉터는 1점
html style 속성은 1000점
전체적인 속성은 태그 셀렉터로 넣어주고
세세한 부분은 class 셀렉터로 넣어준다음에,
일회성인 부분(한 번만 사용하는 코드) 는 style 속성으로 설정해주면 될 듯??
'컴퓨터 > Front (Html, JS)' 카테고리의 다른 글
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (5) nav bar로 상단 메뉴 만들기, 태그 셀렉터 문법(공백, >) (0) | 2021.11.23 |
|---|---|
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (4) div랑 float (0) | 2021.11.22 |
| [html] 이미지 margin 과 padding 의 차이점 (2) | 2021.11.17 |
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (2) HTML 꾸미기(CSS없이 꾸미기) (0) | 2021.11.16 |
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (1) brackets, HTML 기본 (0) | 2021.11.15 |
댓글