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

Web/CSS19

[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.
[CSS] 하이퍼링크 스타일링 설정하는 법 📌 하이퍼링크 만들기 ⬇⬇⬇ https://coding-yesung.tistory.com/78 [HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기! 1. 하이퍼링크란 ❓ 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지) 하이퍼링크는 웹을 웹 다워보이도록 만들어줌 링크에 사용할 문자 또는 이미지 ✅ 다음 홈페이지로 연결하는 coding-yesung.tistory.com 1. a:link 하이퍼링크가 연결되었을 때 선택 2. a:visited 특정 하이퍼링크를 방문한적이 있을 때 선택 3. a:hover 특정 요소에 마우스를 올렸을 때 선택 4. a:active 특정 요소에 마우스 버튼을 클릭하고 있을 때 선택 파이썬 공식홈페이지 2023. 3. 30.
728x90
반응형
LIST