ucong97

ex ) nth-child div:nth-child(n){ .... } - n번째 div ex ) first-child div:first-child{ .... } - nth-child(1) 과 같음 ex ) nth-last-child div:nth-last-child(n){ .... } - 뒤에서 n번째 div ex ) last-child div:last-child(n){ .... } - nth-last-child(1)과 같음

HTML - 닫힘태그없음 - 자식을 둘수 없는 태그 CSS - 고유의 너비,높이를 가짐 - 너비나 높이 하나를 지정하면 비율에 맞게 조정됨 - inline-block

- 여백 ( box 바깥에서 작용하는 여백 ) margin-방향 : 길이; 방향 : top , right , bottom , left margin:길이; 길이 1개 입력시 : top,right,bottom,left 입력값 모두에게 적용 길이 2개 입력시 : top, bottom/right,left 입력값 순서대로 적용 길이 4개 입력시 : top.right.bottom,left 입력값 시계방향으로 적용 * margin 이용해 block요소 가운데 정렬 방법 margin: 0 auto;

- 여백 ex) CSS( box 안에서 작용하는 여백 ) padding-방향 : 길이; 방향 : top , right , bottom , left padding:길이; 길이 1개 입력시 : top,right,bottom,left 입력값 모두에게 적용 길이 2개 입력시 : top, bottom/right,left 입력값 순서대로 적용 길이 4개 입력시 : top.right.bottom,left 입력값 시계방향으로 적용 만약 아래코드일 경우 총 너비의 값 width:200px; border:10px solid red; padding-top : 50px; padding-right: 50px; padding-left : 50px; padding-bottom : 50px; - 결과 : 200 + 10 + 10 +..

ex) ucong text-decoration:underline; // 밑줄 생성 결과: ucong ex) ucong text-decoration:none; //밑줄 제거 결과: ucong

- &nbsp 사용하기 잘못된 예) { 유 콩 } 결과 : 유 콩 정답) { 유&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp콩 } 결과: 유 콩

- 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과 ex) CSS div:hover{ background-color:gold; } - div안에 있는 내용에 마우스가 올려졌을때 background-color가 gold로 바뀐다.

letter-spacing: 자간조절; - 기본 : 0px boarder: 펜크기 펜모양 펜색; - solid : 선 - dotted : 점 text-align:정렬; - center : 중앙 - right : 오른쪽 - left : 왼쪽

- 자식 요소에서 특별히 속성을 지정하지 않은 경우, 부모의 속성 받아오는 것 ex) HTML 사이트 ex) CSS div{ font-size:2rem; } a{ font-size:inherit; } 자식속성 a에 font-size:inherit; 을 입력하면 자식의 font-size도 2rem이 된다. inherit 속성인것 inherit 속성이 아닌것 - color ( a태그는 제외 ) - display - font size - font-weight - text-align - border

- HTML 코딩의 생산성을 향상시켜주는 도구 a[href="#"][target="_blank"]{내용} 내용 a[href="#"][target="_blank"]{내용$}*3 내용1 내용2 내용3 부모관계 형제관계 div > section div + section 주석처리