반응형 CSS12 6. Display display 속성 HTML 요소마다 기본적으로 갖고 있는 display 속성 값을 어떻게 표시할지를 결정합니다. display: block 이면 Block 레벨 영역이며, display: inline 일 경우 Inline 레벨 영역 입니다. display 속성은 주로 4가지가 있습니다. display 속성 값 none 요소를 보이지 않게 설정합니다. 영역도 차지하지 않습니다. block 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. width, height 속성을 지정 할 수 있습니다. inline 컨텐츠만큼 영역을 차지합니다. block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. inline-block.. 2024. 4. 18. 5. Box Model Box Model 모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하게 됩니다. 그리고 이러한 공간을 CSS에서는 박스 모델(Box Model)로 정의하고 있습니다. HTML 요소의 박스 모델은 Content, Padding, Border, Margin으로 구성되어 있습니다. 웹 브라우저 > 개발자도구 > Computed 탭에서 박스모델을 확인하시면 편리합니다. Content 텍스트나 이미지가 들어있는 HTML 요소의 실직적인 내용입니다. width와 height를 사용하여 가로 세로 너비를 지정할 수 있습니다. 인라인 요소는 콘텐츠 만큼의 영역을 가지므로 width, height 가 적용되지 않습니다. 적용하고 싶다면 display: inline-block으로 영역을 변경해주어야 합니다. Paddi.. 2024. 4. 16. 4. 배경 배경 스타일 속성 background-color HTML 요소의 배경 색을 지정합니다. .backcolor { /* 키워드 값 */ background-color: red; /* 16진수 값 */ background-color: #bbff00; /* RGB 값 */ background-color: rgb(255, 255, 128); } background-image HTML 요소에 배경 이미지를 한 개 또는 여러 개를 지정할 수 있습니다. .backimage { background-image: url(https://source.unsplash.com/random); } background-repeat 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수.. 2024. 4. 15. 3. 폰트 글꼴 관련 속성 font-family - 글꼴 종류를 지정합니다. 기본값은 웹브라우저 기본 글꼴이며 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 사용할 수 있습니다. 적용은 웹 폰트 사이트에 방문하여 또는 @import 문을 사용하여 웹 폰트를 적용합니다. font-size - 글자 크기를 지정합니다. font-style - 글자를 주로 이탤릭체를 설정하기 위해 사용합니다. font-weight - 글자 굵기를 지정합니다. font-variant - 소문자를 작은 대문자로 바꾸는 속성 CSS 글꼴 속성1 글꼴 속성2 글꼴 속성3 /* CSS */ @import url('https://fonts.googleapis.com/css2?family=Moirai+One&display=swap'); * {.. 2024. 4. 15. 2. 선택자 HTML 요소를 선택해서 꾸미려면, HTML 요소를 선택하는 방법을 알아야하는데 그 방법을 선택자(Selector)라고 합니다. 전체 선택자 모든 요소를 선택합니다. 전체 선택자는 브라우저 기본 스타일을 초기화 하려고 할 때 자주 사용합니다. 사용문법 - * /* 모든 요소를 선택함. */ * { margin: 0; padding: 0; } 타입 선택자 특정 태그 이름을 가진 모든 요소를 선택합니다. 사용문법 - tag명 /* 태그명이 h1인 요소를 모두 선택함. */ h1 { color: blue; } 클래스 선택자 주어진 class명을 가진 모든 요소를 선택합니다. 웹 문서에서 복수의 태그에 사용이 가능합니다. 문법 - .class명 /* class에 title을 갖고 있는 모든 요소를 선택함. */.. 2024. 4. 14. 1. CSS란? Cascading Style Sheets의 약자로 HTML 문서를 예쁘게 꾸미는 역할을 합니다. HTML에도 스타일을 적용할 수 있지만 HTML과의 분리를 위해선 CSS 파일에 사용합니다. CSS 구조 선택자 or Selector - 꾸미고 싶은 HTML 요소를 선택합니다. 예) h1 속성명 - 꾸미고 싶은 속성명을 입력합니다. 예) color 속성값 - 어떻게 꾸밀지 속성값을 입력하면 됩니다. 예) blue CSS 적용 방법 인라인 스타일 - Inline Style Sheet 내부 스타일 - Internal Style Sheet 외부 스타일 - External Style Sheet 인라인 스타일 - Inline Style Sheet 스타일을 정의하고 싶은 HTML 요소에 스타일을 적용합니다. HTML .. 2024. 4. 13. 이전 1 2 다음 반응형
