CSS 기초

아주 기초적인 CSS, 자주 쓰이는 것들, 생각이 번뜩 안날 때 검색해서 찾아보자

Selector

id: #

class: . div.class#id

tag <>

여러 태그에 적용

h2,h5{

font-size:10px;

}

Backgoround

blue #0000ff rgb(0,0,255)

background-image 속성

background-repeat: repeat-x; no-repeat;

background-position: right bottom;

Border

border-style: dotted; dashed; solid; double; 이중선 inset; 들어간3차원 outset; 돌출된 3차원 none; hidden;

border-color: green;

border: 1px dashed blue; 한줄로 표현

Margin, Padding

margin: 1px 1px 1px 1px 위 오 아 왼

1 1 1 위 (오 왼) 아

1 1 (위 아) (오 왼)

padding 배경색 영향 받음

Text

text-align: left; text-decoration: overline; line-through; underline; none;

Font 3가지 타입 serif는 문자의 끝에 작은 선, Sans-serif 는 선이 없음, monospace는 글자폭 동일

font-family: "Times New Roman", Times, serif; 위치에 따라 우선권

font-style: italic;

font-weight: bold;

font-variant:

em 은 문서의 브라우저 디폴트 폰트 사이즈에 대한 비율 값 1em default = 16px

Link

text-decoration:none; margin:5px; display: inline-block; background-color:blue; padding 14px 25px; text-align: center; border: 2px solid pink; border-radius:5px; opacity:1

:hover {text-decoration:underline;}

:link :visited :active

버튼만들어 css 복붙하기

http://www.bestcssbuttongenerator.com

Table

#tableId{

border-collapse: collapse; //1개선으로 병합

}

#tableId td, #tableId th{

border: 1px solid #ddd; text-align: left; padding: 8px;

}

#tableId tr:nth-child(even) {background-color:#eee;}

#tableId tr:hover {background-color:#ddd;}

http://www.tablesgenerator.com/html_tables

List

list-style-type: square; upper-roman; lower-alpha;

Display

block, inline

display:none; display:inline;

visibility:hidden; 영역 그대로 display:none; 영역까지 없앰

Position

static; relative; fixed; absolute;

일반 상대위치 고정 절대위치

position:relative; //상대위치

reft:50px; width:400px;

position:fixed; //브라우저의 상대 위치에 고정

botom:0; right:0; width:400px;

position:absolute; //가장 가깝게 위치한 상대적인 부모태그에서의 절대적인 위치

top:0; right:10px; z-index:-1;

Float 띄우기, clear 해제

float:right; //오른쪽으로 띄우고 다른 block요소 위로 띄움

clear:right; //float:right 으로 떠있는 다른 요소 아래로 줄바꿈해서 내려감

inline

inline-block //float:left 대신 display:inline-block;을 해줘도 브라우저 사이즈에 따라 내려감. clear:left; 써줄 필요 없음

display:inline-block; width:100px;

원래 위 div를 float:left로 띄웠을 경우 아래 div를 clear:left;로 줄바꿈 해줘야 하는데

display:inline-block으로 한 경우 아래 div는 clear를 해줄 필요가 없음

position:absolute; 와 float:right; 의 차이점

position을 쓰면 위치를 자유롭게 지정할 수 있고

float을 쓰면 부모태그 border안쪽에 오른쪽 편에 붙음

margin:auto; width:70% 라고 하면 margin이 자동으로 15%15%로 잡힘

CSS combinator

후손은 스페이스 div p

자식은 > div>p

일반형제는 ~ div~p

바로밑 가까운 형제 + div+p

CSS 가상클래스 pseudo-classes

:link //방문전 :hover :visited :active //클릭한 것

:last-child

CSS 가상태그 pseudo-elements //css3부터 ::으로 :와 구분 하지만 :도 호환됨

p::first-line //p태그 안에 여러줄이 있는 경우 첫 줄만 커짐

p::first-letter

::before 태그의 바로 앞에 내용 추가 ::after 태그의 바로 뒤에 내용 추가

h3::before{ content:url(http://test.png); }

수직형 네비게이션 바

ul{ list-style-type:none; margin:0; padding:0 }

li a { display:block; } //a를 block으로 만들어서 어디를 눌러도 링크가 걸리도록 만듬

li.v a:hover{ background-color:Gold; }

li.v a.active{ }

li.v a.v:hover:not(.active) { }

수평형 네비게이션 바

li { display:inline; }

ul.h{ list-style-type: none; margin:0; padding:0; overflow: hidden; }

li.h{ float:left; border-right: 1px solid #bbb; }

li.h:last-chile{ border-right: none; }

.active{ background-color:blue; }

li.h a.h:hover:not(.active) { background-color: Gold; } //class가 active인것 빼고 hover시 backgroundcolor 변경

/*position:fixed;

top:0;

bottom:0,

width:100%;*/

드롭다운 메뉴

.db { background-color: Fuchsia; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }

.dd { position: relative; display: inline-block; }

.dd-content { display: none; position: absolute; background-color: AliceBlue; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.dd-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; border-bottom:1px solid #bbb; }

.dd-content a:last-child { border-bottom: none; }

.dd-content a:hover { background-color: Gold; }

.dd:hover .dd-content { display: block; }

.dd:hover .db { background-color: Gold; }

</style>

<p>마우스를 버튼위로 올리면, 드롭다운 메뉴가 나타납니다.</p>

</div>

툴팁 tooltip

<style>

.tt { position: relative; display: inline-block; border-bottom: 2px dotted Sienna; background-color: yellow; }

.tt .tt-text { visibility: hidden; width: 200px; background-color: Indigo; color: Yellow;

text-align: center; border-radius: 10px; padding: 10px 5px; position: absolute; z-index: 1;

top: 200%; left: 50%; margin-left: -105px; }

.tt .tt-text::after { content: ""; position: absolute; bottom: 100%; left: 50%;

margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent Indigo transparent; }

.tt:hover .tt-text { visibility: visible; }

</style>

<div>사용자가 커서로 항목을 가리키면 <p class="tt">말풍선 <span class="tt-text">또는 툴팁(tooltip)</span></p>이 나타납니다.

</div>

이미지 반응형 갤러리

<style>

div.img { border: 1px solid #ccc; /*float:left; width:150px;*/ }

div.img:hover { border: 1px solid #777; }

div.img img { width: 100%; height: auto; }

div.desc { padding: 15px; text-align: center; }

* {

box-sizing: border-box;

}

.responsive { padding: 0 6px; float: left; width: 24.99999%; }

@media only screen and (max-width: 700px){ //최대 700까지는 width가 49.999%

.responsive { width: 49.99999%; margin: 6px 0; }

}

@media only screen and (max-width: 400px){ //최대 400까지는 Width가 100%

.responsive { width: 100%; }

}

.clearfix:after { content: ""; clear: both; } //줄바꿈 하나 넣어줘서 float를 clear함

</style>

<img src="http://imgc.allpostersimages.com/images/P-473-488-90/27/2709/JS5ND00Z/posters/vincent-van-gogh-wheatfield-with-crows-c-1890.jpg" alt="Wheatfield with

Crows" width="473" height="269">

</a>

<div class="desc">Wheatfield with Crows, c.1890 <br />

빈센트 반 고흐</div>

</div>

</a>

<div class="desc">Starry Night, c.1889 <br />

빈센트 반 고흐</div>

</div>

<img src="http://imgc.allpostersimages.com/images/P-473-488-90/27/2744/N2BTD00Z/posters/vincent-van-gogh-the-bedroom-at-arles-c-1887.jpg" alt="The Bedroom at

Arles" width="473" height="355">

</a>

<div class="desc">The Bedroom at Arles, c.1887 <br />

빈센트 반 고흐</div>

</div>

<img src="http://imgc.allpostersimages.com/images/P-473-488-90/64/6409/76Z9100Z/posters/vincent-van-gogh-the-mulberry-tree-c-1889.jpg" alt="The Mulberry Tree"

width="473" height="405">

</a>

<div class="desc">The Mulberry Tree, <br /> c. 1889 <br />

빈센트 반 고흐</div>

</div>

불투명도 Opacity

<style>

img.opac { opacity: 0.5; filter: alpha(opacity=50); /* IE8 및 그 이하 버전용 */ }

img.opac:hover { opacity: 1.0; filter: alpha(opacity=100); /* IE8 및 그 이하 버전용 */ }

</style>

<img class="opac" src="https://upload.wikimedia.org/wikipedia/commons/9/94/Starry_Night_Over_the_Rhone.jpg" width="304" height="203"

alt="Starry_Night_Over_the_Rhone.">

이미지 스프라이트 하나의 이미지만 다운로드 받아서 위치별 표시

#facebook { left: 0px; width: 100px; background: url('http://www.caltronics.info/images/unused/social-icons.example.png') 0 -100px; }

CSS 속성 선택자 []

[attribute] {}

[ ] 대 괄호 안에 특정 속성을 넣고, 그 속성을 갖는 태그에 적용할 스타일을 {} 중괄호 안에 지정합니다.

[attribute="value"] {}

특정 속성 및 속성값을 갖는 태그에 스타일을 지정합니다.

[attribute~="value"] {}

속성값에 특정 단어를 포함하는 속성을 갖는 태그에 스타일을 지정합니다. (단, 예를 들면 test trial 처럼 독립된 단어로서 일치할 경우입니다).

[attribute|="value"] {}

속성값이 특정 단어로 시작하는 속성을 갖는 태그에 스타일을 지정합니다. (단, 예를 들면 test- 처럼 - 대쉬 등에 의해 구분된 단어 단위일 경우 입니다).

[attribute^="value"] {}

속성값이 특정 값으로 시작하는 속성을 갖는 태그에 스타일을 지정합니다. (단, 예를 들면 te 처럼 단어 단위가 아니라도 됩니다).

[attribute$="value"] {}

속성값이 특정 값으로 끝나는 속성을 갖는 태그에 스타일을 지정합니다.

[attribute*="value"] {}

속성값이 특정 값을 갖는 태그에 스타일을 지정합니다.

input[type="text"] {}

폼 (<form>) 태그 내에서 하위 태그들의 속성 및 속성값이 일치하는 경우 스타일을 지정합니다.

<style>

a[target=_blank] { background-color: Cyan; }

[class^="first"] { background: yellow; }

input[type=text] { width: 200px; display: block; margin-bottom: 10px; background-color: PapayaWhip; }

input[type=button] { width: 160px; margin: 20px 20px; display: block; background-color: GreenYellow; }

</style>

<a href="http://www.naver.com" target="_blank">새창에서 네이버 띄우기(타겟 속성 값이 _blank 입니다).</a>

<div class="first_test">first 로 시작하는 클래스 값을 갖었습니다.</div>

<div class="second_test">second 로 시작하는 클래스 값을 갖었습니다.</div>

<br />

노란색 칸에 이름을:

이메일 주소:

</form>

폼 form 태그

<style>

input[type=text], select {

width: 100%;

/*입력 칸 (input field) 의 폭을 지정하기 위해, 폭 속성 (width property) 를 사용하였습니다.*/

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

input 태그 중에서 특정 타입에만 스타일을 적용하려면, 아래와 같이 속성 선택자 (attribute selectors) 를 사용할 수 있습니다.

input[type=text] {}

텍스트를 입력받는 input 태그에 스타일을 지정합니다.

input[type=password] {}

비밀번호 (password) 를 입력받는 input 태그에 스타일을 지정합니다.

input[type=number] {}

숫자를 입력받는 input 태그에 스타일을 지정합니다.

박스-크기 속성 (box-sizing property) 에 대해 속성값을 테두리-박스 (border-box) 로 지정하였습니다.

이렇게 하면 박스의 전체 크기는, 패딩과 테두리를 포함한 폭과, 높이를 갖게 됩니다.

(기본적으로 테두리는 패딩을 포함하고, 마진은 제외하므로, box-sizing: border-box; 속성은 없어도 동일한 스타일로 보일 것입니다).

input[type=submit] {

width: 100%;

background-color: orange;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

border-radius: 4px;

cursor: pointer;

}

텍스트 필드 안쪽에 패딩 과 마진을 주었습니다.

배경-색상 속성 (background-color property) 으로 입력 버튼의 배경 색을 지정하였습니다.

그리고 색상 속성 (color property) 으로 글자 색을 지정합니다.

input[type=submit]:hover {

background-color: OrangeRed;

}

input[type=text]:focus {

background-color: lightblue;

border: 3px solid #555;

}

포커스 인풋 (Focused Inputs) 은 텍스트 입력 상자에 커서를 놓았을 때, 어떤 브라우저는 테두리에 청색 외곽선을 자동으로 보여줍니다.

이 기능을 없애려면 outline: none; 속성을 인풋 (input) 태그에 지정하면 됩니다.

반면 :focus 가상-클래스를 지정하여 커서를 놓았을 때 배경색이나 테두리 속성을 바꾸어 주어 사용자에게 어디를 작업하고 있는지를 좀더 명확히 알 수 있게 할 수 있습니다.

div.formtag {

border-radius: 5px;

background-color: #f2f2f2;

padding: 40px;

}

</style>

</select>

</form>

</div>

CSS 카운터

counter-reset : section 생성, 초기화

counter-increment 증가

content: 삽입

counter(section) 값을 태그에 추가

<style>

body {

counter-reset: section;

}

h3.test {

counter-reset: subsection;

}

h3.test::before {

counter-increment: section;

content: "Section " counter(section) ". ";

}

h4::before {

counter-increment: subsection;

content: counter(section) "." counter(subsection) " ";

}

</style>

<p>국가 코드 최상위 도메인(Country Code Top-Level Domain, ccTLD)은 국제적으로 나라 또는 특정 지역 그리고 국제 단체 등을 나타내는 인터넷의 도메인 이름에 배당한 고유

부호를 일컬으며, 최상위 도메인으로 취급한다.</p>

<h3 class="test">웹서비스의 발달</h3>

<h4>안드로이드 폰의 확장</h4>

저작자표시 비영리 변경금지

'Development > WEB' 카테고리의 다른 글

javascript 기초(2/2) (0)	2017.10.30
javascirpt 기초(1/2) (0)	2017.10.30
HTML5 기초 (0)	2017.09.07
MongoDB에서 데이터 가져와서 template 뷰와 바인딩 (0)	2017.03.06
MongoDB 테스트 데이터 생성 스크립트 (0)	2017.03.06

Stock, Data, Dev

CSS 기초

'Development > WEB' 카테고리의 다른 글

티스토리툴바

CSS 기초

'Development > WEB' 카테고리의 다른 글

관련글

티스토리툴바