Jassy world Jassy world

모든 HTML 요소에는 display다른 요소와 수평 공간을 공유 할 수 있는지 여부를 나타내는 기본값 이 있습니다. 일부 요소는 내용의 크기에 관계없이 전체 브라우저를 왼쪽에서 오른쪽으로 채 웁니다. 다른 요소는 내용에 필요한 만큼의 수평 공간 만 차지하며 다른 요소 바로 옆에 있을 수 있습니다. 이 과정에서 우리는 display 속성의 세 가지 값을 다룰수 있다. : inline, block, inline-block. 1. display: inline; - inline 값의 예 : , , 인라인 요소에는 내용을 단단히 감싸는 상자가 있으며 내용을 표시하는 데 필요한 공간 만 차지하며 각 요소 다음에 줄 바꿈이 필요하지 않습니다. - 요소의 높이와 너비는 CSS 문서에서 지정할 수 없습니다. 예를 들어..

위 그림 처럼 서로 다른 두 박스가 자체 공간을 차지하므로 동일한 수평 공간에 나타나지 않도록 하는것이 position 이해의 기본이다. position속성 을 설정하여 요소의 기본 위치를 변경할 수 있다. 이 position속성은 다음 4 가지 값 중 하나를 사용할 수 있습니다. static -기본값 (지정하지 않아도 됨) relative absolute fixed 1. Position: static; 요소의 기본 값. 요소를 나열한 순서대로 배치하며 원하는 곳에 위치시킬 수 없다. = 말 그대로 기본 값 .question { text-align: center; position: static; } 2. Position: Relative 요소의 기본 위치를 수정하는 한 가지 방법은 position속성을 ..

박스모델 (BOX MODEL) Width and height — 내용 영역의 너비와 높이를 지정 Padding — 내용 영역과 테두리 사이의 간격을 지정 Border — 내용 영역과 패딩을 둘러싼 테두리의 두께와 스타일을 지정 Margin — 테두리와 요소의 바깥 쪽 가장자리 사이의 간격을 지정 1. Width and height CSS에서 글자 크기 지정하는 것. width = 폭(너비) height = 높이 p { height: 80px; width: 240px; } 픽셀을 사용하면 요소 상자의 정확한 크기 (너비 및 높이)를 설정할 수 있다. 2. Border 텍스트 테두리 지정 굵기 / 스타일 (점선 등) / 색깔 / 모양(radius) 지정 가능 width— 경계의 두께. 테두리의 두께를 픽셀 ..

1. CSS 글씨체 변경 (font-family) 사용법 : selector {font-family : font name ;} h1 { font-family : Garamond ; } 주의사항 : 사용자가 웹 페이지를 방문 할 때 해당 글꼴이 표시되도록하려면 스타일 시트에 지정된 글꼴이 사용자의 컴퓨터에 설치되어 있어야 한다. 모든 HTML 요소의 기본 서체는 Times New Roman으로, 형식화 된 워드 프로세서를 사용한 적이 있다면이 서체에 익숙 할 것. font-family 속성이 정의되어 있지 않으면 해당 글꼴이 기본적으로 나타남. 나타남. 웹 페이지에 사용되는 서체 수를 2 또는 3개로 제한 하는 것이 좋다. 페이지를 더 빨리로드하는 데 도움이되며 일반적으로 좋은 디자인 결정입니다. 서체 이..

CSS란, 홈페이지를 꾸밀 수 있도록 도와준다. CSS 효과를 지정 할 수 있는 방법 = 1.tag (예 : h1~h6, header 등 모든 기본 tag) CSS에서 해당 tag 불러올 시, tag이름 {css 효과} h1 { color: maroon; } 2. Class name (예 : CSS에서 해당 tag 불러올 시, .class name { css 효과 } .title { color: teal; } 2-1. Class 가 여러개 일 경우 / HTML에 적용하고자 하는 CSS 속성 효과가 여러개일경우 예 : 아래의 두개 CSS 속성을 동시에 h1태그에 적용시키고 싶다 .green { color: green; } .bold { font-weight: bold; } 스페이스로 구분해서 작성 = .c..