본문 바로가기
반응형

분류 전체보기39

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.
10. HTML 구조 웹 페이지를 작성하려면 기본적으로 선언되어야 하는 것들이 있는데요. 이것을 HTML 문서 기본구조라 하며, 그 구조는 다음과 같습니다. HTML 이번 시간에 배울 내용은 HTML 입니다. 도큐먼트 타입으로 현재 문서가 어떤 버전으로 작성되었는지 미리 표시합니다. 은 태그는 아니며 웹 문서 제일 처음에 표시합니다. 위 예시의 도큐먼트 타입 은 HTML5 버전 이라는 뜻이며, 이전 버전인 HTML 4.01 에서는 더 복잡하게 사용했습니다. 하지만 현재 대부분 HTML5를 사용하고 있기 때문에 웹 사이트를 만들때 제일 상단에 이 표시를 사용하면 됩니다. ~ 웹 문서의 시작()과 끝()을 나타내는 태그입니다. 태그는 문서정보(메타데이터)를 담고 있습니다. - 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데.. 2024. 4. 12.
반응형

티스토리툴바