css / basic

1.css파일을 만들고 @charset "utf-8"; 
2.html에 link href 해서 링크걸기 
이거 한글자라도 틀리면 링크안걸림 *rel*
페이지 검사에서 크기가 다른거 보고 *{ padding: 0; margin: 0;}

3.즉 초기화 요소를 넣어줌 

4.body { font-family: "맑은 고딕"; font-size: 100%; line-height: 1.5; color: #000; }
먼저 지정해줌 

5.<div></div> 요소를 그룹으로 묶어서 배치 
- body나 p말고 요소를 그룹으로 잡아 css넣을때 적용 

6. 포토샵에서 색깔추출 

7.보더값에 가로값 주고 맞추기 

바디에는 패딩 마진 주지않기 
패딩 마진은 바깥을 기준으로 봐야함 

패딩 값을 빼고 width값 주기 

 

 

*보더를 바디 중앙에 위치하는법- margin - 탑을 50주고 좌우는 오토
박스요소를 상위요소에 대해 가로중앙에 배치 공식
=(박스요소)가로크기 설정 (상위요소보다 크기가 작아야함)- margin 값을 좌우를 auto로 준다

 

*padding margin 이거 -써서 위치말고 그냥 적는거 연습
- ex) 위아래는 안주고 좌우만주면 {padding: 0 40px;} 이렇게 0으로 표현/안그럼 전체 다들어감

 

*태그 성격 
1.블럭요소 : width 값 100%, height값이 0 넣은 글자만큼이 높이이고 배경컬러는 투명이다.
대표적으로 div,h,dl,dt,dd,p,ol,ul,li,form

2.인라인요소 : width값이 자기영역만 잡히고 height는 0 
인라인은 블럭과 반대로 width height padding margin이런거 안먹힌다고 생각하면됨 배경컬러는 투명함
대표적으로 strong,em,span(-div처럼 인라인요소 영역만 잡아주는 역할),a,img

        ㄴ이 성격을 블럭요소로 바꾸는 속성도 있음 


3.복합적인 인라인블럭 : <table><td><th><input(>-폼태그에들어가는)<select><textarea>
  테이블은 칸이 가로질러있어 그만큼만 색은 들어가는데 패딩마진도 먹히는 부분이 복합적이라는 말 
폼태그에 인풋으로 아이디치는칸 만큼 색을 줄수있음 

*인라인 요소다 이럼 마진 패딩 넣으면 안된다 이렇게 생각하면서 작업

 

*table{border-collapse:collapse;}로 초기화 값을 잡고 가야함
 
*테이블은 내용만큼만 길이가 나타나니 table옆에 width:100%;를 넣어줌 
=table{width:100%; border-collapse: collapse ; border:1px #fff solid;}

*글자가로정렬 text-align:left,right,center,justify(양쪽정렬 - 글자수마다 남는공간이 다를때 줄을 맞추는)

*글자 굵기지정 font-weight:light, lighter, bold, bolder, normal
        100,200,300,400,500,600,700,800,900 /  normal이 400이고 bold가 600
ㄴ폰트마다 지원하는 갯수가 다름 

 

★class 선택자★ = 정의형 선택자 
css에서 쓸때 .라고쓰는데 이 마침표가 class라는 뜻
ex) .text .text-01 .text_1 
ex) .text {color:#f00;}

태그명이 아니기때문에 어떤태그에 해도 상관없음 
p태그에 한다치면 <p class="text">글자</p>

*스타일과 관련된 내용과 관련된 이름으로 짓기
*선택자명 제한
알파벳으로 시작 
영문과 숫자의 조합/영문으로만 작성해도됨/숫자로 시작불가
공백 허용 안됨
언더바 _ 혹은 하이픈 - 만 가능 
대소문자 구분

*p태그안에있는 글에 class를 넣을려면  span태그를 사용하여 span태그 안에 class를 넣으면된다

*text-decoration 글자 꾸미기
1. 밑줄 underline 2. 윗줄 overline 3. 취소선 line-through 4. 없음 none (하이퍼링크쓸때 밑줄없애는 방법)