뇌운동일지

상위요소 하위요소 { 스타일 정의 } /* 어딘가 밑에 있는 : 자식 손자 모두 해당 */ section ul li ul /* ul 두개 다 되는 것-> 상위요소의 모든 하위요소*/ A요소, B요소 { 스타일 정의 } 부모요소 > 자식요소 { 스타일 정의 } /* 바로 밑에 있는 : 손자는 해당안됨 */ section> /*손자는 해당되지 않고, 자식만 해당*/ 요소+요소 { } h1 + p { } /* hi와 p가 같이 있을 때, p에만 해당 : hi다음에 오는 첫번째 p에만 해당 */ p hi p 요소 ~ 요소 { } hi ~ p { } /* 모든 형제 : hi다음에 오는 모든 p*/ -----------------------------------------------------------------..

margin 어떤 요소의 바깥쪽 width, height, border 필수요소 border를 기준으로 안쪽을 padding, 바깥쪽을 margin div 태그를 쓰면 중첩을 시킬 수 있다 padding 내용물과의 간격조절, 테두리 안쪽의 여백 element - 디자인이 올바른 위치에 있는지 source - javascript오류를 잡을 때 쓴다 CSS를 안쓰면 html 태그를 이용하는 것이 좋다 화면을 분할하는 내용 width:300px; box-sizing:content-box; /* 콘텐츠 영역이 300 */ box-sizing:border-box; /* 박스 전체 테두리의 가로가 300 */ contents padding border margin position : relative; /*요소가 겹..

#RRGGBB rgb(255, 0, 0) rgba(255, 0, 0, 투명도) border를 기준으로 안쪽은 padding, 바깥쪽은 margin 블록레벨 : 혼자 한줄을 차지 인라인레벨 : 줄을 차지하지 않음. 화면에 표시되는 콘텐츠만큼만 차지 image는 인라인 요소이므로 아무런 속성을 주지 않으면, 옆으로 나열됨. 세로로 놓고 싶으면 display:block;

HTML주석 CSS주석 /* */ 스타일시트는 헤더블럭 안에 넣는다. -> 내부 스타일 시트 파일로 만들어서 사용 -> 외부 스타일 시트 : 디자인의 일관성을 위해 같은 스타일을 여러 웹문서에 사용 내부 스타일 시트는 해당 웹문서에만 적용되는 스타일 외부 스타일 시트는 공통적으로 적용 : 해당 width를 거의 다 차지할 때 사용 : 내용물을 포함하는 영역 똑같은 태그라도 서로 다른 디자인을 적용하고 싶을 때 클래스명 부여 class="A B C" // A, B, C 세 가지를 복수로 적용 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다 모질라 : 모든 브라우저의 전신 @ : 어노테이션 font:특성