본문 바로가기

Programing/CSS37

텍스트 색상 스타일 속성(color) 글자색 (color) color: 색상값을 표현하는 방법 16진수 (hex) # 기호 뒤에 6자리 숫자로 표현 #ffff00 rgb, rgba rgba는 red, green, blue 값 뒤에 alpha 불투명도를 나타내는 값을 표현. a 값으로는 0~1 표현 가능. 1이 완전 불투명 0.9, 0.8 등으로 표현 가능 h1 { color: rgba(0, 0, 255, 0.5); } 색상 이름으로 지정 (red, green 등) https://www.w3big.com/ko/tags/html-colorname.html#gsc.tab=0 참고 HTML 색상 보여주는 사이트 https://htmlcolorcodes.com/ HTML Color Codes Easily find HTML color codes for.. Programing/CSS 2024. 2. 26.
글꼴 관련 스타일(font-famliy, font-size 등) 글꼴 지정 (font-famaily) body { font-family: "맑은 고딕", 돋움, 굴림 } /* 맑은(v)고딕 처럼 공백이 있는 경우 두 개로 인식할 수 있기 때문에 "" 큰 따옴표로 묶는다. */ /* body 전체에 맑은 고딕을 적용하고 그 폰트가 없으면 돋움, 돋움도 없으면 굴림으로 적용하라. */ 글꼴 크기 (font-size) font-size: | | | 절대 크기 : 브라우저에서 지정한 글자 크기 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정 크기 : 브라우저와 상관없이 글자 크기를 직접 지정 백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%) 표시 키워드를 사용한 글자 크기 xx-small < x-small < small < medium < .. Programing/CSS 2024. 2. 26.
케스케이딩 스타일 시트 의미 Cascading의 의미는 우선순위가 계단식으로 적용된다는 뜻. 웹 브라우저 출력 화면의 우선 순위 1. 사용자 스타일 > 2. 제작사 스타일 > 3. 브라우저 기본 스타일 같은 스타일 내에서 스타일 성격에 따른 우선순위 !important 인라인 스타일 : 태그 안에 직접 style 속성을 지정 id 스타일 : #id 속성 클래스 스타일 : .class 속성 타입 스타일 : 하나의 태그 자체를 같은 스타일 성격 내에서의 우선순위 문서 위에서 아래로, 먼저 작성된 것부터 우선순위 참고 : 웹 표준의 정석 (고경희 저) Programing/CSS 2024. 2. 26.
CSS의 기본 선택자 전체 선택자 : * 웹 문서의 전체의 스타일을 초기화할 때 자주 사용한다. (주로 마진과 패딩을 없애거나 할 때) 타입 선택자 (type selector) 태그와 같이 특정 태그로 쓰여진 모든 요소에 일괄적으로 적용할 때 사용하는 선택자이다. ※ 타입 선택자(type selector)와 태그 선택자(tag selector), 요소 선택자(element selector)는 일반적으로 같은 의미다. 하지만 W3C 공식 문서에서는 type selector라는 명칭을 사용하니 참고. p { font-style: italic; } 클래스 선택자 (class selector) 특정 클래스에만 CSS를 적용할 때 사용한다. .classname { font-size: 10px; } 참고로 하나의 태그에 두 개 이 상의.. Programing/CSS 2024. 2. 26.
CSS (Cascading Style Sheets)의 의미 HTML이 문서의 골격을 만든다면 CSS는 문서의 디자인적 요소를 담당한다. CSS를 사용하면 HTML의 내용이나 구조를 건드리지 않고 디자인을 일괄적으로 수정할 수 있어 용이하다. CSS를 사용하면 PC환경 뿐만 아니라 모바일 기기 등에도 최적화화여 반응형 웹 디자인을을 할 수 있다. 준비하기 크롬 Web Developer 확장 기능 설치하기 (chrome.google.com/webstore) Web Developer 검색 후 설치 기능 테스트 (CSS 꺼보기) 스타일의 기본 형식 선택자 { 속성1: 속성값1; 속성2: 속성값2; } 예시 (P 태그로 쓰인 모든 글을 가운데 정렬하고 파란색으로 바꾸기) p { text-align: center; color: blue; } ※ 한 줄로 쭉 나열해도 되지만.. Programing/CSS 2024. 2. 26.