CSS10

• 

  CSS(Cascading Style Sheets) CSS(Cascading Style Sheets)는 마크업 언어로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 스타일 언어이다. CSS를 사용하려면 스타일시트를 작성하고 HTML 문서에 연결해야 한다. 스타일은 규칙으로 정의되며, 규칙을 적용할 element를 지정하는 선택기와 선택한 element의 스타일을 정의하는 하나 이상의 선언이 있다. CSS 규칙의 기본 구문은 다음과 같다. selector { property: value; property: value; ... } HTML 문서의 HTML element의 스타일 속성을 사용하여 특정 HTML element에 CSS 스타일을 적용할 수 있다. This text will be blue. 개발자가 직접 디자인하기에는 한계가 있다. 디자인을 의뢰.. CSS 2023. 1. 25.

• 

  font style CSS에서 글꼴 스타일 속성을 사용하여 텍스트의 글꼴 스타일을 제어할 수 있다. 글꼴 스타일 속성은 글꼴을 기울임꼴 또는 사선으로 설정하는 데 사용된다. p { font-style: italic; } 이렇게 하면 태그 내의 모든 텍스트가 기울임꼴이 된다. 글꼴 가중치 속성을 사용하여 텍스트의 굵기를 제어할 수도 있다 또한 태그 내의 모든 텍스트가 20px로 지정할 수 있다. p { font-weight: bold; } p { font-size: 20px; } 글꼴 패밀리 속성은 텍스트에 대한 글꼴 패밀리를 설정하는 데 사용된다. p { font-family: Arial, sans-serif; } 이것은 태그 Arial 글꼴 내의 모든 텍스트를 만들 것이다. 또한 @font-face 규칙을 사용하여 서버에.. CSS 2023. 1. 25.

• 

  상대위치 , 절대위치 CSS에서 위치 속성은 웹 페이지에서 element의 레이아웃과 위치를 제어하는 데 사용된다. 위치 속성은 다음 네 가지 가능한 값 중 하나를 가질 수 있다: static: 기본값이며, 문서의 정상적인 흐름에 따라 element가 배치됨을 의미한다. relative: element는 정상 위치에 상대적으로 배치되며, 위쪽, 오른쪽, 아래쪽 및 왼쪽 특성을 사용하여 위치를 조정할 수 있습다. [Example] element는 20px 오른쪽으로 이동하고 10px 정상 위치에서 아래로 이동한다. p { position: relative; left: 20px; top: 10px; } absolute: element는 가장 가까운 위치에 있는 상위 항목에 상대적으로 배치되지만(고정된 것처럼 뷰포트에 상대적으로 .. CSS 2023. 1. 25.

• 

  z-index CSS에서 z-index 속성은 element의 적층 순서를 제어하는 데 사용된다. 키보드 탭키를 사용할 때 이동순서이기도 하다. 인덱스가 높은 element는 z 인덱스가 낮은 element 앞에 나타난다. z-index 속성은 정적이 아닌 위치 값을 가진 element에만 적용할 수 있다. 즉, 절대, 상대 또는 고정 값의 element는 z-인덱스를 가질 수 있다. 예를 들어, 한 페이지에 두 개의 element가 있고 한 element가 다른 element 앞에 나타나도록 하려면 z-index 속성을 사용하여 쌓기 순서를 제어할 수 있다. [Example] #element1 { position: absolute; z-index: 1; } #element2 { position: absolute; z.. CSS 2023. 1. 25.

• 

  width와 height , 마진과 패딩 width와 height CSS에서 width와 height 속성은 element의 크기를 제어하는 데 사용된다. width는 element의 너비를 설정하는 데 사용됩니다. 값은 픽셀(px), 백분율(%) 또는 기타 단위로 지정할 수 있다. p { width: 500px; } element의 폭이 상위 컨테이너의 80%로 설정된다. p { width: 80%; } 높이는 element의 높이를 설정하는 데 사용됩니다. 값은 픽셀(px), 백분율(%) 또는 기타 단위로 지정할 수 있다. p { height: 200px; } element의 높이가 상위 컨테이너의 50%로 설정된다. p { height: 50%; } 너비 및 높이 특성에는 패딩, 테두리 또는 여백이 포함되지 않는다. element의 전체 .. CSS 2023. 1. 25.

• 

  div 스타일 HTML의 element는 다른 element를 함께 그룹화하고 스타일을 적용하는 데 사용할 수 있는 컨테이너 element이다. CSS에서 element 선택기를 사용하여 element를 선택하고 스타일을 적용할 수 있다. 예를 들어, ID가 "컨테이너"인 element가 있고 배경색을 파란색으로 지정하고 너비를 500픽셀로 지정한다고 가정해 보면 다음 CSS를 사용할 수 있다: #container { background-color: blue; width: 500px; } 클래스 셀렉터를 사용하여 동일한 클래스를 가진 여러 div에 스타일을 적용할 수도 있다. .box { background-color: blue; width: 500px; } "box" 클래스가 있는 모든 div에 스타일이 적용된다 e.. CSS 2023. 1. 25.

• 

  display inline-block CSS에서 표시 속성은 element의 레이아웃과 웹 페이지에 표시되는 방법을 제어하는 데 사용된다. 디스플레이 속성에는 여러 값이 있을 수 있으며, 그 중 하나는 inline-block이다. 표시 속성이 inline-block으로 설정되면 element는 인라인 element처럼 동작하지만(즉, 필요한 만큼의 너비만 차지하고 이후에는 새 줄을 만들지 않음) 너비와 높이가 설정될 수 있다. 예를 들어 클래스 "컨테이너"를 가진 element가 있고 이를 인라인 블록 element로 표시하려고 한다고 가정하면 다음 CSS를 사용할 수 있다. .container { display: inline-block; } .box { width: 30px; height: 30px; background-color: blu.. CSS 2023. 1. 25.

• 

  css 외곽선 css out-line type CSS에서 외곽선 속성은 경계 속성과 유사하게 element 주위에 경계를 추가하는 데 사용된다. 그러나 아웃라인 특성은 페이지의 공간을 차지하지 않으며 다른 element의 레이아웃에 영향을 미치지 않는다는 점에서 보더 특성과 다르다. 아웃라인 속성은 보더 속성과 동일한 방식으로 element에 보더를 추가하는 데 사용할 수 있다. p { outline: 1px solid black; } 이렇게 하면 모든 element 주위에 1픽셀 너비의 검은색 solid 테두리가 추가된다. 또한 윤곽선 색상, 윤곽선 스타일 및 윤곽선 너비 특성을 개별적으로 지정할 수 있다. p { outline-color: red; outline-style: dotted; outline-width:.. CSS 2023. 1. 25.

• 

  table css border CSS에서 경계 속성은 element와 셀 주위에 경계를 추가하는 데 사용될 수 있다. 테이블에 테두리를 추가하려면 element의 테두리 속성을 사용할 수 있다. Header 1 Header 2 Data 1 Data 2 table { border: 1px solid black; } 이렇게 하면 전체 테이블 주위에 1픽셀 너비의 검은색 solid 테두리가 추가된다. 또한 테두리 축소 속성을 사용하여 테이블의 셀 주위에 테두리가 표시되는 방식을 제어할 수 있다. table { border: 1px solid black; border-collapse: collapse; } 이렇게 하면 셀 사이의 경계가 접히고 전체 테이블 주위에 단일 경계가 만들어진다. 테이블의 특정 셀 또는 행에 테두리를 추가하려면 또는 .. CSS 2023. 1. 25.

• 

  css float CSS에서 float속성은 웹 페이지에서 element의 위치를 제어하는 데 사용된다. 예를 들어, 탐색 항목 목록을 포함하는 클래스 "nav"를 가진 element가 있고 페이지 오른쪽으로 이동하려고 한다고 가정하면 다음 CSS를 사용할 수 있다: Home About Contact [Example] .nav { float: right; } 그러면 "nav" div가 페이지 오른쪽으로 이동하고 탐색 항목이 오른쪽으로 정렬된다. 여러 element가 서로 옆에 나타나도록 컨테이너 내에 여러 element를 띄울 수도 있다. Home About .nav { float: left; } .logo { float: right; } 이렇게 하면 nav div가 왼쪽으로 이동하고 로고 div가 오른쪽으로 이동하여 컨.. CSS 2023. 1. 25.