Programming Language/HTML&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

[HTML 기초] 03. 링크, 리스트, 테이블 태그 사용법

1. : 링크(link) 태그는 href 속성을 사용하여 웹페이지나 파일, 동영상, 이미지 등의 링크를 걸 수 있습니다. 동영상 플레이어가 실행되도록 하거나 그 페이지로 이동하는 등 여러 방식으로 할 수 있습니다. 링크를 걸 문장 href 속성에 #을 넣으면 해당 id를 가진 요소로 이동할 수 있습니다. 다른 문서의 id라면 docName.html#goid 이런 방식으로 파일이름. html#아이디로 하면 이동할 수 있습니다. target 속성을 사용하여 링크를 열 곳을 지정할 수 있습니다. target= _self | _blank | _parent | _top _self : 기본값으로 현재 페이지에서 링크를 처리합니다. _blank : 새 창 또는 새 탭에서 링크를 처리합니다. _parent, _top ..

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

[HTML 기초] 02. 타이포그래피 태그 사용법 - <h1~h6> <p> <pre> ...

1. : 제목(heading) h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. h태그의 글자의 기본 모양은 굵음입니다. h1에 가까울수록 크기가 커집니다. 문서의 구조와 연관되어 있기 때문에 글씨 크기를 위해 사용하지 않습니다. 글씨 크기는 font-size를 사용하여 변경하면 됩니다. 2. : 문단 중요한 건 꺾이지 않는 마음 중요한 건 꺾이지 않는 마음 p태그와 p태그 사이는 기본적으로 간격이 있습니다. p태그는 열 때부터 닫을 때까지 한 문단으로 보기 때문에 엔터나 탭 키가 들어가 있더라도 한 줄로 나오는 것을 확인할 수 있습니다. 문단 내에서 줄 바꿈을 위해서는 태그를 사용하면 됩니다. 중요한 건 꺾이지 않는 마음 중요한 건 꺾이지 않는 ..

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 : 길이로 줄 높이를 정합니다..

OTIKLO
'Programming Language/HTML&CSS' 카테고리의 글 목록