본문 바로가기
728x90
반응형
SMALL

Web96

[CSS] 배경 설정하기 - 컬러 배경 설정, 이미지 배경 설정, 배경 반복, 배경 위치 설정, 배경 스크롤 고정, 배경 이미지 크기 설정, 배경 속성 한꺼번에 적용 1. background-color HTML 요소의 배경으로 나타날 배경 색상 설정 CSS 배경1 배경 적용하기 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque molestias quaerat, veritatis iure ab officiis maiores nesciunt nobis sapiente doloribus quos, quam, libero repudiandae facilis voluptatem neque sit maxime? 2. background-image HTML 요소의 배경으로 나타날 배경 이미지를 설정 배경 이미지는 기본 설정으로 반복되어 나타남 background-image: url(파일경로) 3.. 2023. 3. 30.
[CSS] TEXT설정 - 6️⃣ 폰트/글꼴 설정, 웹폰트 적용, 구글 폰트 적용하기 1. font-size 텍스트 크기를 설정 설정 단위 : px, %, em, rem ✔ em 단위 1em : 16px(PC), 12px(MOBILE) 2. font-family 텍스트의 글꼴을 설정 3. font-weight 텍스트의 굵기를 설정 기본 굵기: 400 (범위 100 ~ 900) ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라이언트에 글꼴을 다운로드 시켜 사용 웹 폰트를 사용 📌 구글 폰트 head 태그 안에 사용 https://fonts.google.com/ 📌 눈누 style 태그 안에 사용 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc css 텍스트 국제연합의 모든 사람들은 그 헌장에서 기본적 인권, 인간의 존엄과.. 2023. 3. 30.
[CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow 1. white-space 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line) 2. text-overflow 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성(clip, ellipsis) 3. overflow 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성 css 텍스트5 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adip.. 2023. 3. 30.
[CSS] TEXT설정 - 4️⃣ 글자 그림자 설정하기 1. text-shadow 텍스트에 그림자효과를 설정 선택자 { text-shadow: 가로길이 세로길이 번짐정도 색상; } css 텍스트4 css text-shadow 속성1 css text-shadow 속성2 css text-shadow 속성3 css text-shadow 속성4 css text-shadow 속성5 📄 HTML 파일 2023. 3. 30.
[CSS] TEXT 설정 - 3️⃣ 텍스트 효과 지우기, 텍스트 밑줄/텍스트 윗줄/ 텍스트 취소선, 작은 대문자 1. text-decoration 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용 none : 텍스트 효과 없애기 underline: 텍스트 밑줄 line-through: 텍스트 취소선 overline: 텍스트 윗줄 2. text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정 lowercase: 텍스트 소문자 설정 uppercase: 텍스트 대문자 설정 capitalize: 앞글자를 대문자로 설정 3. font-variant 소문자를 작은 대문자로 변경(small-caps) HTML 귀도 반 로섬(네덜란드어: Guido van Rossum, 1956년 1월 31일 ~)은 네덜란드 출신의 소프트웨어 엔지니어이다. 프로그래밍 언어인 파이썬을 개발한 것으로 유명하다. 2005년부터 201.. 2023. 3. 30.
[CSS] TEXT 설정 - 2️⃣ 글자 수평 정렬, 단락 들여쓰기, 줄 높이 1. text-align 텍스트 수평 방향 정렬을 설정(left, right, center, justify) 2. text-indent 단락의 첫 줄의 들여쓰기를 설정 3. text-height 줄 높이를 정하는 속성 예) 글자 크기가 40px일 때 line-height: 1.5 ➡ 줄 높이는 40px의 1.5배인 60px ➡ 글자 크기는 40px 이므로 글자 위와 아래에 각각 10px의 여백이 생김 ➡ 만약 줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침 css 텍스트2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ad, provident esse voluptas, nihil obcaecati, explicabo deseru.. 2023. 3. 30.
[CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격 1. color 텍스트의 색상을 설정 기본값은 검정 📌 CSS 색상 알아보기⬇⬇⬇ https://coding-yesung.tistory.com/89 [CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 1. 색상 이름으로 표현 red, yellow, blue, salmon... 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) ------- ------- ------- RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ---------- ALPHA 3. 16진수 색상값으로 표현 #0000FF -> coding-yesung.tistory.com 2. letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 예) 안녕하.. 2023. 3. 30.
[CSS] CSS의 컬러 - 색상이름, RGB 색상값, 16진수 색상값 1. 색상 이름으로 표현 red, yellow, blue, salmon... 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) ------- ------- ------- RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ---------- ALPHA 3. 16진수 색상값으로 표현 #0000FF -> 파랑 00 00 FF -> 00F 로도 표현 가능함 R G B 📌 CSS 색상값 MDN ⬇⬇⬇ https://developer.mozilla.org/ko/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN CSS 자료형은 색을 나타냅니다. 는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는.. 2023. 3. 30.
728x90
반응형
LIST