아주 기초적인 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
<a>link</a>
버튼만들어 css 복붙하기
http://www.bestcssbuttongenerator.com
Table
<table id="tableId">
#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>test</h3>
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>
<h2>드롭다운 매뉴</h2>
<p>마우스를 버튼위로 올리면, 드롭다운 메뉴가 나타납니다.</p>
<div class="dd">
<button class="db">여행 일정표</button>
<div class="dd-content">
<a href="#">첫째 날</a>
<a href="#">둘째 날</a>
<a href="#">세째 날</a>
<a href="#">마지막 날</a>
</div>
</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>
<h3>말풍선 또는 툴팁</h3>
<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>
<h3 style="text-align:center">빈센트 반 고흐 갤러리</h3>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://imgc.allpostersimages.com/images/P-473-488-90/27/2709/JS5ND00Z/posters/vincent-van-gogh-wheatfield-with-crows-c-1890.jpg">
<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>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://cache2.allpostersimages.com/p/LRG/39/3996/FK7WF00Z/posters/vincent-van-gogh-starry-night-c-1889.jpg">
<img src="http://cache2.allpostersimages.com/p/LRG/39/3996/FK7WF00Z/posters/vincent-van-gogh-starry-night-c-1889.jpg" alt="Starry Night" width="400" height="301">
</a>
<div class="desc">Starry Night, c.1889 <br />
빈센트 반 고흐</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://imgc.allpostersimages.com/images/P-473-488-90/27/2744/N2BTD00Z/posters/vincent-van-gogh-the-bedroom-at-arles-c-1887.jpg">
<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>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://imgc.allpostersimages.com/images/P-473-488-90/64/6409/76Z9100Z/posters/vincent-van-gogh-the-mulberry-tree-c-1889.jpg">
<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>
</div>
<div class="clearfix"></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>
<h1>이미지의 투명도</h1>
<img 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.">
<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>
<br /><br />
<div class="first_test">first 로 시작하는 클래스 값을 갖었습니다.</div>
<div class="second_test">second 로 시작하는 클래스 값을 갖었습니다.</div>
<br />
<form name="input" action="" method="get">
노란색 칸에 이름을:
<input type="text" name="Name" value="type 이 text 입니다." size="20">
이메일 주소:
<input type="text" name="Name" value="파파야 색상입니다." size="20">
<input type="button" value="버 튼">
</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>
<h3>CSS 로 HTML 폼 태그에 스타일 입히기</h3>
<div class="formtag">
<form action="#">
<label for="fname">이름</label>
<input type="text" id="fname" name="이름">
<label for="lname">성</label>
<input type="text" id="lname" name="성">
<label for="country">국적</label>
<select id="country" name="국적">
<option value="대한민국">대한민국</option>
<option value="중국">중국</option>
<option value="일본">일본</option>
</select>
<input type="submit" value="제출하기">
</form>
</div>
CSS 카운터
counter-reset : section 생성, 초기화
counter-increment 증가
content: 삽입
counter(section) 값을 태그에 추가
<h1>CSS 카운터</h1>
<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>
<h3 class="test">인터넷의 태동</h3>
<h4>스텐포드 대학의 연구</h4>
<h4>국가별 도메인의 확정</h4>
<p>국가 코드 최상위 도메인(Country Code Top-Level Domain, ccTLD)은 국제적으로 나라 또는 특정 지역 그리고 국제 단체 등을 나타내는 인터넷의 도메인 이름에 배당한 고유
부호를 일컬으며, 최상위 도메인으로 취급한다.</p>
<h3 class="test">웹서비스의 발달</h3>
<h4>스타일 언어</h4>
<h4>스크립트 언어</h4>
<h3 class="test">모바일로 확대</h3>
<h4>아이폰의 등장</h4>
<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 |