본문 바로가기

Programing371

텍스트 정렬 스타일 속성(text-align, text-height) 텍스트 정렬(text-align) 속성값 (지정하지 않으면 왼쪽 정렬이 default) start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 left : 왼쪽에 맞추어 문단 정렬 right : 오른쪽에 맞추어 문단 정렬 center : 가운데에 맞추어 문단 정렬 justify : 양쪽에 맞추어 문단 정렬 match-parent : 부모 요소를 따라 문단 정렬 .container { text-align: center; } 줄 간격 조절 (line-height) 속성값 0px; : 줄 간격을 픽셀로 지정 2.0; : 해당 폰트의 배율. 이 경우 2.0배 200% : 해당 폰트의 배율. 이 경우 200%이므로 2.0배 보통 줄 간격은 글자 크기.. Programing/CSS 2024. 2. 26.
텍스트 색상 스타일 속성(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.

티스토리툴바