DeFacto-Standard IT

CSS3로 HTML 태그가 출력되는 위치 지정 - HTML 태그는 웹 페이지에 작성된 순서와 달리 배치 가능 - Display, position, left/right/top/bottom, float, z-index-visibility 블록 박스와 인라인 박스 (HTML 기준) - HTML 태그는 인라인 태그와 블록 태그로 나뉜다. - 인라인 태그는 인라인 박스로 출력 - 블록 태그는 블록 박스로 출력 박스 유형의 결정 : display 프로퍼티 (CSS 기준) display: block 블록 박스 display:inline 인라인 박스 display:inline-block 인라인 블록 박스 항상 새 라인에서 시작, 새 라인으로 넘어감 새 라인에서 시작 불가, 라인 안쪽(inline)에 있음 블록 박스 내..

박스 모델 구성 콘텐츠 : HTML 태그의 텍스트, 이미지가 출력되는 부분 패딩 (padding) : 콘텐츠를 직접 둘러싸고 있는 내부 여백 테두리 (border) : 패딩 외부의 테두리로서, 직선이나 점선 혹은 이미지로 테두리를 그릴 수 있음 여백 (margin) : 박스의 맨 바깥 영역이며 테두리 바깥의 공간으로 인접한 아래, 위 이웃 태그의 박스와의 거리 박스 모델을 구성하는 CSS Property 콘텐츠 패딩 테두리 여백 크기 관련 width height padding-top padding-right padding-bottom padding-left border-top-width border-right-width border-bottom-width border-left-width margin-to..

- RGB에 대한 16진수 코드 '#8A2BE2' div { color : #8A2BE2; } // R, G, B의 각 16진수 코드를 2자리 씩 총 6자리를 표현 - RGB(10진수코드, 10진수코드, 10진수코드)로 표현 'rgb(138, 43, 266)' div { color : rgb(138, 43, 226); } // 각 자리 당 0~255 - CSS3 표준에서 지정한 140개의 색상 이름으로 표현 div { color : blueviolet; } 위 3개는 같은 색상을 나타낸다.

* CSS는 상위에서 적용한 스타일과, 하위에서 적용한 스타일에 대한 태그가 있는 경우 기본적으로 상위에서 적용한 스타일이 적용된다. 만약 하위에서 또다시 스타일을 적용한다면, 오버라이딩 된다. 셀렉터(Selector) - HTML태그의 모양을 꾸밀 스타일 시트를 선택할 수 있다. 1. 태그 타입 셀렉터 h3 { color : brown } : html 내의 모든 에 대해 color : brown을 적용한다. h3, li { color : brown; } : html내의 모든 , 태그에 대해 적용 2. class 셀렉터 '.'으로 시작하는 셀렉터, HTML태그의 'class' 속성으로만 지정 가능 body.main { backrground : aliceblue; } : html내의 태그에만 적용 3. i..

- 셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름, 규칙 - 프로퍼티 : 스타일 속성 이름. 약 200개 정도의 프로퍼티 존재 - 값 : 프로퍼티의 값. 프로퍼티 + 값 = 하나의 스타일 - 주석문 : 스타일 시트 내에 붙이는 설명문. /* ... */ 여러 줄, 아무 위치에나 사용 가능 - 대소문자 구분 없음 HTML 문서에 CSS3 스타일 시트 만들기 - 3가지 1. 태그에 스타일 시트 작성 2. style 속성에 스타일 시트 작성 3. 스타일 시트를 별도 파일로 작성, 태그나 @import로 불러 사용 -> CSS파일을 별도로 작성하는 경우,

HTML 태그의 배경색 설정 body { background-color : mistyrose; } 글자색 설정 h3 { color : purple; } HTML태그의 테두리 설정 hr { border : 5px solid yellowgreen; } HTML태그의 테두리 색 div { border-color : #6B8E23; } 폰트 사이즈 설정 span { color : blue; font-size : 20px; } 텍스트 들여쓰기 text-indent : | .p1 { text-indent : 3em } // 3글자 들여쓰기 텍스트 정렬 text-align : left | right | center | justify (양쪽정렬) .p1 { text-align : justify; } 텍스트 꾸미기 te..

css를 별도의 파일로 관리할 때, 다른 페이지에 css를 참조시키는 방법이다. - @import @import를 쓰는 경우 어떤 것이 먼저 다운로드될지 모르므로 예측하기 힘들며, 병렬 다운로드를 지원하지 않는다. - link link를 쓰는 경우 순서대로 로드가 되며, 병렬 다운로드를 지원한다. 따라서 link를 사용하는 것이 속도나 안정성 면에서 더 뛰어나다.