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

전체 글 보기262

[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.
[CSS] 선택자의 종류 - 2️⃣ 자식 선택자, 자손 선택자, 형제 선택자, 속성 선택자, 가상 선택자 📌 HTML의 구조 알아보기 ⬇⬇⬇ https://coding-yesung.tistory.com/74 [HTML] HTML이란? & HTML 문서 만들기, HTML 스켈레톤 1. HTML(Hyper Text Markup Language) HyperText(웹 페이지에서 다른 페이지로 이동할 수 있는 것)기능을 가진 문서를 만드는 언어 [최초의 웹사이트] http://info.cern.ch/ http://info.cern.ch info.cern.ch 2. HTML 문서 만들 coding-yesung.tistory.com 1. 자식 선택자 부모의 요소 하위의 자식요소에 스타일을 적용 body > p { color: deeppink;} 2. 자손 선택자 조상 요소 하위의 모든 요소에 스타일을 적용 자손은 자식.. 2023. 3. 30.
[CSS] 선택자의 종류 - 1️⃣ 전체 선택자, 요소 선택자, id 선택자, class 선택자, 그룹 선택자 1. 전체 선택자 스타일을 모든 요소에 적용 * 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 * { 속성명1: 속성값1; 속성명2: 속성값2; ...} 📍 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음! 전체 선택자 스타일을 모든 요소에 적용 * 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 2. 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용함 span 요소 strong 요소 ins 요소 mark 요소 3. id 선택자 웹 문서만의 특정 부분 스타일을 적용 # 기호를 사용해서 id 속성을 가.. 2023. 3. 30.
[CSS] CSS란? & HTML에 CSS 적용하는 법 1. CSS(Cascading Style Sheets)란❓ 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 ✔ 참고 MDN https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 2. CSS 문법 HTML 문서 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 3-2. 내부 스타일 HTML 문서의 사이에 요소를.. 2023. 3. 30.
728x90
반응형
LIST

티스토리툴바