html 의 역할은?
==>뼈대를 채우는 작업
중요점은?
==>돔 구조 설계 작업
css의 역할은?
==> 살을 붙이는 작업
중요점은?
==>많이 아는것!
css의 동작 구조
html tag가 css를 찾아오는게 아니라
==> css가 지정된 tag로 가서 붙는 형태
장점
==>
1. css만을 미리 작성이 가능하다
2. 한 개만 작성하더라도 여러 tag에 붙일 수 있다.
css의 작성 방식
html은 디자인 패턴이라는게 없었다.
그냥 바로 뼈대 만드는게 only였음
3가지 스타일 존재
1. inner-style(쓰면 개 욕처먹는 느낌)
뭐랄까 c++내에서 const 느낌이랄까 암튼 난 그런 느낌 받았음. 가장 힘이 쎄기도하고 다른 것들이 참조 못하게끔 ㅎㅎ)
사용 하면 안되용...
2. head 파일에 style tag 사용
한가지 파일만 만들거 아니면... 쓰지말장.. 힘들잖아
3. 파일 분할 형식
css 파일 만들고 이후에 link 걸어서 가져오는 형식
이거를 쓰자 이게 개꿀딱임
==> 유지보수 개꿀입니다 & 현업 개발자가 이리 한다니까 뭐 따라야죠..
선택자 중요 3가지
1. tag 선택자
div{
} 이런식으로 쓰면 됩니다
2. class 선택자
html 에서 class="class" 형식으로 쓰고
.class{
}이런식
3. id 선택자
id는 각 html 에서 한번밖에 못쓴다는 사실은 당연히 알고 있고
html 에서 id="id" 형식으로 쓰고
#id{
}이런식으로 씁니다
일단은 이 3가지만 쓰라고 하네용 .. 넹..
선택자들 사이에는 우선순위가 존재합니다!!
tag=> class=> id 순!
이제부터 집중!!!
style 꾸미는거 여러개 나간다!
1. background-color
직접적인 color 써도 됩니다
#000000이런식으로 써도 됨!
00 00 00은 각각 16진수로써
2^4 * 2^4 되가지고 256 가지 색깔 그거임
백그라운드 색 바꾸는 겁니다!
2. color
글씨색 바꾸는 거에용!
3. font-size
글씨 사이즈바꾸는 겁니다!!
% px 둘다 가능입니다!
span 적용 가능!
상속됨!!!!
4. font-weight
진하게 쓰는 겁니다!!!
200 400 600 등등... 단위는 없어용
span 적용 가능!
상속됨!!!!
5. width
가로입니다!!
단위: px %
span 적용 불가능!
6. height
세로입니다!!
단위: px %
span 적용 불가능!
7. margin
밖에다가 공백주는 거임!
left,right,top,bottom 모두 - 써가지고 사용가능합니다!!
span 적용 가능!
8. padding
내부에다가 공백주는 거임! 한마디로 글씨 띄우기!! 액자형식으로다가!!
span 적용 불가능!!
9.text-align
말그대로 정렬시키는 거임!!!
right left center 쓸수 있습니다!!!
당연히 span 은 못씁니다(왜냐면 span은 애당초에 범위가 글자까지 이기에)
상속된다!!
10.border
형식이 독특함
형식: border 0px (solid,dotted) color 이다
11. border-radius
네모 박스를 둥글게 만들어준다!!
반지름으로 깎는거임
width:200px
height:200px일시
border-radius 100px 하면 원이 된다!