강의정리들

박스 형태를 가진 태그 안에 또 다른 박스를 넣었을 경우 박스 위쪽이 겹쳐 두 태그의 마진이 겹치는 현상이 발생한다. =  margin collapse 현상내부 박스의 마진을 정상적으로 주기 위해서는부모 박스에 padding 을 살짝 주면 해결

selector > 태그명 {}: 셀렉터 태그 안에 있는 직계 자식 태그에 스타일 주기navbar > p{스타일 }// navbar 바로 직계 p 태그에만 스타일 적용selector 태그명 {}: 셀렉터 안에 있는 모든 자식에게 스타일 주기  navbar p{스타일 }// navbar 내부의 모든 p 태그에 스타일 적용 input 태그 내에서 특정 타입의 속성만 변경하고 싶을 때input[type=text] { style~~~;} n번째 등장하는 요소만 스타일링 할 때.a th:nth-childe(3) {}// 세번째 행만 스타일링 하는 코드even, odd 로 홀짝에만 둘 수 도 있고3n+0 등으로 3의 배수 요소에만 스타일 줄 수도 있음

float float : left;  = 요소를 붕 띄워서 왼쪽에 정렬한다.float 를 사용하면 붕 띄워있기 때문에 div 등을 추가하면 겹쳐서 보이지 않는 문제가 발생한다이를 해결하기 위해서는 float 를 가진 태그 뒤에 오는 태그에 clear : both 를 추가해 문제해결.middle { float : left;}.bottom { claer : both;}inline-blockdisplay : block : 한 행을 전부 차지div 박스, p 태그 등은 block 특성을 가지고 있음 display : inline-block : 내 크기만큼 차지띄어쓰기만 있어도 공백이 생겨서 불편함 vertical-align : top; bottom ...인라인블록 에서 글자를 쓸때 필요함..인라인블록 시 베이스..

네모박스를 넣는 태그 div  div 박스 디자인 스타일margin : 박스와 브라우저 창 사이의 여백 padding : 박스 안쪽 여백 설정border : 태두리두께, 종류, 색border-radius : 태두리 둥글게 중앙 정렬margin-left  : auto;   margin-right : auto;div 태그는 display = block; 속성을 가지고 있음

글자 스타일링 글자 크기 font-size : 픽셀값;% 로 설정할 시 부모태그에 비례글꼴, 폰트 font-family : ' 폰트이름 ' ;폰트 색color : 색;자간 크기letter-spacing : 픽셀;글자 정렬text-align : 위치;글자 굵기font-weight : 100~900

HTML 태그 내에서 CSS 스타일 적용하는 법 lorem  외부에 만든 css 파일 연동하는 법 Class selector이름으로 설정 / 클래스 점 찍고 작성해야 함 ㅇㅇ ====css 파일==================.스타일이름 { css 속성; css 속성;}Tag Selector태그 명으로 작성모든 태그에 적용됨태그명{ 스타일;}id Selector태그의 아이디에 스타일 적용하는 법# 붙이고 작성해야 함보통 아이디는 자바스크립트에서 사용하므로 거의 사용하지 않는다.#아이디명 { 스타일} 셀렉터의 우선순위 태그 내부의 style아이디 셀렉터 # 클래스 셀렉터 .태그 셀렉터