21.06.30
body /body 안 h1~6 디자인 적용하는 법 :
1. <head> 안에 <style> 적용
{}안 문장은 css문법 ; 잊지말고 꼭 붙이기
ex) <head>
<meta charset="utf-8">
<style>
h1 {
color: red; }
</style>
</head>
2. h1 태그안에 바로 스타일 속성 추가
ex) <h1 style="background-color:
pink ;">Hello World</h1>
※ html문서와 css 같이 작성시 에러와 코딩 작성에 불편함 유발 주의필요 따로 작성해 연동하는게 가장 좋음
css와 html문서 연동하는법 : <link rel="stylesheet" type="text/css" href="style.css"> 링크태그 head에 추가하기
※css에서 주석은 /* */ 
<header> 와 <footer>, <h1> <p>는 형제 태그 <header> 와 <footer>는 <h1> <p>태그의 부모 태그부모보다 자식이 가지고 있는 유전자가 더 신속하기때문에 header css 말고 h1 css가 적용됨
여기서 a도 header 자식태그인데 왜 파란색인가?
-왜냐면 a태그는 태생적으로 파란색 유전자를 가지고있기때문
이처럼 상속이 안되는 경우도 있음
css에 부모명시하면 좀 더 자세한 색상 사용가능
같은 색상 사용시 위 사진과같이 쉼표로 같이 사용도 가능함
-
선택자
태그(type)선택자, id선택자, class선택자,어트리부트 선택자
태그는 말그대로 태그로 입력
id, class는 이름 부여 id는 css에 #아이디이름 class는 .클래스이름 으로 지정할수있다.
이같은 속성은 다 같은 태그인데 다다른 디자인을 적용할때 사용하면 좋음
태그안 type명으로도 지정 가능함
class와 id의 차이점
id는 하나 class는 여러개 추가 가능함 이름은 하나지만 별명(클래스)은 여러개일수있다 라고 생각하면 쉬움
id에 속성값 여러개 입력시 오류로 취급함
또한 클래스 속성은 다른 태그에서도 사용가능 하지만 id는 문서안에 하나만 있어야함 -
우선순위
동일 선택자에 동일 태그 작성시 나중에 작성된 css의 우선순위가 더 높음
순서 상관없이 class의 우선순위가 높음
그리고 id와 class를 비교하면 id의 우선순위가 높음
그리고 아이디와 스타일속성을 비교하면 스타일의 우선순위가 더 높다
정리하면 style > id > class > tag
-
폰트
색, 사이즈, 스타일, 크기, 굵기 지정가능font-family : 글꼴을 설정하는 속성, 글꼴을 여러 개 설정할 때는 쉼표로 구분
ex) font-family: Georgia, "Times New Roman", serif;
로 설정했을 때 제일 먼저 Georgia 글꼴을 찾아 해당 글꼴이 있다면 사용
없다면 Times New Roman 글꼴을 사용 serif사용text-decoration : 밑줄같은거 사용시 사용
-
리스트 스타일
리스트 사용시 ●메뉴 와같이 앞에 동그라미 없애거나 변경시 사용
ex) list-style : none;
-
백그라운드 스타일
가로 세로 크기지정, 색, 이미지 첨부가능
백그라운드 이미지 추가시 반복기능 있어 없애고 싶으면 repeat 사용
위치 조정은 positionhtml img태그는 크기 지정시 비율 깨지고 사진 원본이 출력
그러나 백그라운드는 크기만큼 이미지가 짤려 나오거나 반복출력됨그리고 css에는 alt태그가 없어 시각장애인분들이 사용할수없음
로고나 이미지에 설명이 필요한 경우 img태그 사용아직까지는 할만 한거 같은데 일단 속성들 하나하나 잘 외우기 앱이 알아서 단어를 알려주긴 해도 내가 숙지 못하면 못쓸거같음 획실히 외우고 계속 손에 익을때까지 쳐보기
