세상과 연결

CSS Box Model The CSS Box Model 모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서는 디자인과 레이아웃에 대해 "박스 모델"이라는 용어가 사용됩니다. CSS 상자 모델은 본질적으로 모든 HTML 요소를 감싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 상자 모델을 보여줍니다. 다른 부분에 대한 설명 : Content - 텍스트와 이미지가 나타나는 상자의 내용Padding - 내용 주변의 영역을 지 웁니다. 패딩은 투명합니다.Border - 패딩과 내용을 둘러싼 경계Margin - 경계 외부 영역을 지 웁니다. 마진은 투명 Examplediv { width: 300px; border: 25px solid green; padding: 2..

Setting max-width max-width 속성은 요소의 최대 너비를 설정하는 데 사용됩니다. max-width는 px, cm 등의 길이 값이나 포함하는 블록의 퍼센트 (%)로 지정하거나 none으로 설정 될 수 있습니다 (기본값은 최대 너비가 없음을 의미). 위의 문제는 브라우저 창이 요소의 너비 (500 픽셀)보다 작을 때 발생합니다. 그런 다음 브라우저는 페이지에 가로 스크롤 막대를 추가합니다. 이 경우 max-width를 사용하면 브라우저에서 작은 창을보다 잘 처리 할 수 ​​있습니다. 도움말 : 두 개의 div의 차이를 보려면 브라우저 창을 500 픽셀 너비 이하로 드래그하십시오. 참고 : max-width 속성의 값은 width를 재정의합니다. 다음 예제는 높이가 100 픽셀이고 최대 ..

CSS Height and Width Setting height and width height 및 width 속성은 요소의 높이 및 너비를 설정하는 데 사용됩니다. 높이와 너비를 자동으로 설정할 수 있습니다 (기본값 : 브라우저가 높이와 너비를 계산한다는 의미). 또는 px, cm 등의 길이 값 또는 포함 된 블록의 백분율 (%)로 지정합니다. . Examplediv { height: 200px; width: 50%; background-color: powderblue;} Set the height and width of an element This div element has a height of 200px and a width of 50%: This element has a height of 100 ..

CSS Padding CSS 패딩 속성은 내용 주위에 공간을 생성하는 데 사용됩니다. 패딩은 요소 주위의 내용 (테두리 안쪽)을 지 웁니다. CSS를 사용하면 패딩을 완벽하게 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 채우기를 설정하기위한 CSS 속성이 있습니다. 패딩 - 개별면CSS에는 요소의 각면에 대해 채우기를 지정하는 속성이 있습니다. padding-toppadding-rightpadding-bottompadding-left 모든 패딩 속성은 다음 값을 가질 수 있습니다. length - px, pt, cm 등으로 패딩을 지정합니다.% - 포함하는 요소의 폭의 %로 채우기를 지정합니다.inherit - 패딩을 부모 요소에서 상속해야한다고 지정합니다. 다음 예제에..

CSS Margins CSS 여백 속성은 요소 주위에 공간을 생성하는 데 사용됩니다. 여백 속성은 테두리 외부의 여백 크기를 설정합니다. CSS를 사용하면 여백을 완벽하게 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)의 여백을 설정하는 CSS 속성이 있습니다. Margin - Individual Sides CSS에는 요소의 각면에 대한 여백을 지정하는 속성이 있습니다.margin-topmargin-rightmargin-bottommargin-left 모든 margin 속성은 다음 값을 가질 수 있습니다. auto - 브라우저가 여백을 계산합니다.length - 여백을 px, pt, cm 등으로 지정합니다.% - 포함하는 elemen 너비의 여백을 %로 지정합니다.tinherit ..

CSS Border PropertiesCSS 테두리 속성을 사용하면 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다. Border Styleborder-style 속성은 어떤 종류의 테두리를 표시할지 지정합니다. 허용되는 값은 다음과 같습니다.dotted - 점선 테두리를 정의합니다.dashed - 점선 테두리를 정의합니다.solid - 단색 테두리를 정의합니다.double - 이중 경계를 정의합니다.groove - 3D 그루브 경계를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.ridge - 3D 융기 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.inset - 3D 삽입 테두리를 정의합니다. 효과는 테두리 색 값에 따라 다릅니다.outset - 3D 시작 테두리를 정의합니..

CSS를 삽입하는 3 가지 방법 스타일 시트를 삽입하는 세 가지 방법이 있습니다. 1. 외부 스타일 시트(External style sheet) 2. 내부 스타일 시트(Internal style sheet) 3. 인라인 스타일(Inline style) 외부 스타일 시트 외부 스타일 시트를 사용하면 하나의 파일 만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다! 각 페이지는 요소 안에 외부 스타일 시트 파일에 대한 참조를 포함해야합니다. 요소는 섹션 안에 있습니다. 예

CSS 코멘트 주석은 코드를 설명하기 위해 사용되며, 나중에 소스 코드를 편집 할 때 도움이 될 수 있습니다. 주석은 브라우저에서 무시됩니다. CSS 주석은 / *로 시작하고 * /로 끝납니다. 주석은 여러 줄에 걸쳐있을 수도 있습니다. p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */

CSS 구문 CSS 규칙 집합은 선택기와 선언 블록으로 구성됩니다. CSS 선택기 선택기는 스타일을 지정할 HTML 요소를 가리 킵니다. 선언 블록은 세미콜론으로 구분 된 하나 이상의 선언을 포함합니다. 각 선언에는 콜론으로 구분 된 CSS 속성 이름과 값이 포함됩니다. CSS 선언은 항상 세미콜론으로 끝나며 선언 블록은 중괄호로 둘러싸여 있습니다. 다음 예제에서 모든 요소는 가운데 정렬되며 빨간색 텍스트 색상으로 표시됩니다. p { color: red; text-align: center; }

간단한 꿀 팁 알려드려요. 사용에 얼마나 쓰일지는 모르겠네요~~ 레이아웃 없는 이미지 롤오버 테두리 테두리가 늘어나는 롤오버를 쓰는경우 포함된 레이아웃이 들썩걸임. 그런 경우를 없애주는 방법 #ex-one a img, #ex-one a { border: none; overflow: hidden; float: left; } #ex-one a:hover { border: 3px solid black; } #ex-one a:hover img { margin: -3px; }