코딩 이야기

마진속성을 이용한 수평 정렬 인라인 요소 텍스트나 과 같은 인라인 요소를 중앙에 놓으려면 속성을 이용 예) My Text 블록요소 h1,h2,p,table,div등과 같은 블록 요소를 중앙에 놓으려면 왼쪽 마진과 오른쪽 마진을 auto 로 설정하면 된다. 예) My Text width 를 지정하지 않으며 블럭요소가 전체 너비를 다 차지해서 효과가 없슴 무조건 지정할것. 배경색 설정 배경과 관련된 속성 background 한 줄에서 모든 배경 속성을 정의 background-attachment 배경 이미지가 고정되어 있는지 스크롤 되어 있는지 지정 background-color 배경색을 정의 background-image 배경 이미지를 정의 backg..

박스 모델 기본적으로 HTMl 요소를 감싸는 가상적인 박스 웹 브라우저는 각 요소를 박스로 간주하고 화면에 배치 각 박스는 마진, 경계 패딩을 가진다 이것을 이해해야만 깔끔한 디자인을 할 수있다. 컨텐츠 : 박스의 내용물이다.택스트와 이미지가 나타나는 부분이다 패딩 : 컨텐츠 주의위 영역이다. 패딩은 투명하다. 경계 : 패딩과 내용물을 감싸는 경계이다. 경계는 박스의 경계석에 의하여 영향을 받는다. 마진 : 경계 주위의 영역이다. 마진은 투명하다. 경계선 border-style로 설정할 수 있다. 경계선 스타일 none dotted dashed solid double groove ridge inset outset 각 경계선의 상하 좌우를 다르게 변경가능 예)

css 삽입 방법 외부 스타일 시트와 내부 스타일 시트 외부 스타일 시트는 말그대로 스타일시트를 외부에서 갖고온다.예) 태그 css시트의미 외부파일과의 관계 외부파일위치 url 형식 내부 스타일 시트는HTMl안에 CSS 정의 각 요소에 스타일을 직접 적용하는 인라인 방식도 있는데 하나의 요소에만 적용되고 스타일시트의 장점을 읽기 때문에필요한 경우에만 사용하도록 하자.예) h1{ color:red; } p { color:#0026ff; } 하나의 요소에 대하여 외부,내부,인라인 스타일을 서로 다르게 지정할 경우 일반적으로 모든 스타일 시트는 다음과 같은 규칙에 의하여 하나의 가상적인 스타일로 통합된다. 우선순위는 인라인 스타일 시트가 가장높다 즉 인라인 스타일은 헤드섹션에 지정된 스타일과 외부 스타일 보다..

p { backgroind-color: yellow; } 선택자 속성 값 css선언은 항상 ;로 끌날 것 선택자 타입 선택자 html이름의 요소를 사용 h1 { color: green; } 전체선택자 *기호로 표시되며 페이지안 모든 요소를 선택한다. * { color: blue; } 아이디선택자 특정한 요소를 쉽게 선택할 수 있다. #special { color: red; } id가 special인 요소를 선택한다. id가 special인 단락입니다. p의 요소id를 special로 지정 클래스선택자 .을 이용해서 정의된다. 요소를 정의할때 클래스 이름을 부여할 수 있다. .target { color: red; } class가 target인 요소를 선택한다. class가 type1인 헤딩입니다. clas..