css

Programming Language/HTML&CSS

[CSS 기초] 07. CSS 색 (Color)

◈ CSS 색 CSS를 사용하면 외곽선, 글자 색, 배경색 등 여러 곳에 색을 넣어 사용하게 되는데, CSS에서 색을 표현하는 방법은 크게 세 가지가 있습니다. 1) 색상 이름 2) RGB 값 3) 16진수 색상값 추가로 CSS3부터 HSL/HSLA 값으로 색을 정할 수 있고, 투명도를 지정하는 opacity라는 속성을 사용할 수 있습니다. 1. 색상 이름 모든 브라우저에서 지원되는 색상 목록은 이렇습니다. HTML 삽입 미리보기할 수 없는 소스 이처럼 미리 정의된 색상의 이름으로 표현할 수 있습니다. 색상 이름은 대소문자를 구별하지 않습니다. color: 색상명 | background: 색상명 | ... background: red background: green background: blue 2. R..

Programming Language/HTML&CSS

[CSS 기초] 06. CSS 테이블 꾸미기 (Table)

ththth tdtdtd tdtdtd tdtdtd 1. border : 테두리 만들기 table { border: 1px solid #fff; } table에 border를 적용하면 표의 외곽선을 설정할 수 있습니다. table { border: 1px solid #fff; } th { border: 1px solid #fff; } table { border: 1px solid #fff; } th { border: 1px solid #fff; } td { border: 1px solid #fff; } th, td에 border를 적용하면 셀의 외곽선을 설정할 수 있습니다. ※ tr 태그에는 border가 적용되지 않습니다. border: border-width | border-style | border-..

Programming Language/HTML&CSS

[CSS 기초] 05. CSS 리스트 꾸미기 (List)

아메리카노 카페라떼 아이스티 유자차 아메리카노 카페라떼 아이스티 유자차 1. 목록 가운데 정렬 : text-align, margin .c1 { text-align: center; background: #555; } .c2 { width: 300px; margin-left: auto; margin-right: auto; background: #555; } .c3 { display: table; margin-left: auto; margin-right: auto; background: #555; } 목록 안의 내용만 가운데 정렬 : text-align: center 목록 요소 자체를 가운데 정렬 : width를 지정해 주어야 margin 속성이 좌우 간격을 설정해져서 가운데 정렬 된 것처럼 보이게 됩니다. ..

Programming Language/HTML&CSS

[CSS 기초] 04. CSS 문단 꾸미기

1. line-height : 줄 높이 설정 1. 이 문단은 line-height: normal 입니다. 문단 꾸미기 내용 중에서... 2. 이 문단은 line-height: 25p 입니다. 문단 꾸미기 내용 중에서... 3. 이 문단은 line-height: 2 입니다. 문단 꾸미기 내용 중에서... 4. 이 문단은 line-height: 300% 입니다. 문단 꾸미기 내용 중에서... 5. 이 문단은 line-height: 60% 입니다. 문단 꾸미기 내용 중에서... line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값으로 보통 1.2입니다. length : 길이로 줄 높이를 정합니다..

Programming Language/HTML&CSS

[CSS 기초] 03. CSS 글자 꾸미기 (font)

1. color : 글자 색 설정 color: color | initial | inherit color : 색을 지정합니다. 색상코드(#) 혹은 정의된 색(white, black 등) 등을 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 2. font-family : 글꼴 설정 font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정합니다..

Programming Language/HTML&CSS

[CSS 기초] 02. CSS 선택자(Selector)

1. CSS 선택자(Selector)란? CSS는 스타일을 지정하기 위해 HTML의 요소를 선택해 각각 디자인을 줄 수 있습니다. 특정 요소를 선택하기 위해 다양한 선택자를 사용하게 됩니다. CSS 속성값을 적용하기 위해 선택해야 할 HTML 요소를 알려주는 요소 및 기타 용어의 패턴이 바로 선택자입니다. 선택자의 주제(subject)는 선택자에 의해 선택 된 요소들입니다. 선택자의 규칙 선택자 목록은 각각 존재할 수 있고, 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다. h1 { color: red; } p { color: red; } h1, p { color: red; } 잘못된 선택자 규칙이 있으면 그 선택자만 무시합니다. 2. CSS 선택자의 종류 1) 전체 선택자(Universal Sel..

OTIKLO
'css' 태그의 글 목록