CSS
/* */ 주석
초기화 코드
Eric Meyer’s Reset CSS
HTML5 Doctor CSS Reset
YUI reset CSS
id 선택자
하나의 요소
#header{ ...} <id = header>
<h1 id="header"> 값 </h1>
클래스
.클래스 { .. }
.container > .child-box
li.select {
color: red;
}
// li 태그중 class 속성이 select를 가지는 태그
// <li class="select">
선택자
* 모든 태그 선택 / CSS reset file에서 주로 사용
선택자 {
스타일속성 : 스타일 값;
}
선1, 선2 ...{
margin:0;
padding:0;
}
속성 선택자
선택자[속성]
선택자[속성="값"][속성="값"]
input[type="test"]{
background: red;
}
//input 태그 중 type 속성을 "text"로 갖는 태그를 { } 한다.
문자열 속성 선택자
선택자[속성~=값] 특정값 단어로 포함 = ko-kr : ko-kr (하이픈 (-) 인식)
선택자[속성|=값] 특정값 단어로 포함 = ko-kr : ko 와 kr
선택자[속성^=값] 특정값 시작
선택자[속성$=값] 특정값 끝나는 태그
선택자[속성*=값] 특정값 포함
후손 선택자, 하위 선택자
상위요소 하위요소 {
...
}// id="header"를 가지는 태그의 후손 위치에 있는 h1 태그
#header h1 {
color : red;
}
#header h1, #header h2{..}
// header 태그의 자손 h1
#header > h1
동위 선택자
선택자1 + 선택자2 : 선택자 바로 뒤 선택자2 하나
선택자1 ~ 선택자2 : 선택자 바로 뒤 선택자2 전체
가상 선택자 ':' <html> 에 명시돼 있지 않음 , 액션이벤트
반응 선택자
:active 마우스 클릭한 이벤트 태그
:hover 마우스 올린 이벤트 태그
상대 선택자
:checked 체크 상태 (input:checked)
:focus 초점 맞춰진 input 에 효과 넣기
:enabled
:disabled
input[type="checkbox"]: checked + div{
box-shadow: 0 0 0 3px hotpink;
}
속성 선택자
속성 있는 것만
a[속성="값"] {...}a[href] { ... } -> <li> <a href="#">메뉴 1</a></li>
일반 구조 선택자 {유용}
:first-child 첫번째 자손
:last-child 마지막 자손
:ntn-child(n) {..} 앞에서 수열 번째 = 2n, 2n+1
:ntn-last-child(n){...} 뒤에서 수열 번째
형태 구조 선택자
:first-of-type{ } 자손 중에서 첫번째로 등장하는 특정 태그를 선택
:last-of-type {}
:ntn-of-type{}
:ntn-last-type{}
가상요소 p :: 태그 { }
시작 문자 선택자
태그::first-letter{} 첫번째 글자 선택
p::first-letter{ font-size: 3em; }
태그::first-line{} 첫번째 줄 선택
전후 문자 선택자
::before 태그 앞에 위치하는 공간을 선택
::after 태그 뒤에 위치하는 공간을 선택
반응 문자 선택자
::selection{ ... } 사용자가 드래그한 글자등등..
링크 선택자
:link href 속성을 가지고 있는 a태그 선택
:visited 방문했던 링크를 가지고 있는 a태그 선택
부정 선택자
:not(선택자) 선택자를 반대로 적용
input:not([type="password"]) { .. } input 태그 중 type="password" 가 아닌 태그에
유용한 속성
{ 속성 : 키워드; }
순서없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성
list-style-type:
ul 목록의 불릿 바꾸기
- disc(채운원) , circle(빈원) , square
ol 목록의 불릿 바꾸기
- decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin / lower-alpha, upper-alpha / upper-latin
ul, ol 불릿 없애기
none
배경
background-color
background-clip 배경 영역 지정
border-box / padding-box / content-box
background-image:url( ‘ ‘ );
background-repaert
background-size
background-attachment 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지
background-position: 키워드/크기 / 주로 스프라이트 이미지
캐스캐이딩
스타일 적용: 인라인 > id > class > 태그 > 전체
if 같다면 , 뒤쪽 / 스타일 정의 뒤쪽 순서
폰트속성
font( 순서대로 )
font-style : normal, ialic, oblique
font-variant (소문자를 대문자로 만드는 역할) : nomal, small-caps(소문자를 작은 대문자로 만듦)
font-weight(굵기)
font-size : 상대크기 (larger, smaller, em(부모기준) ,rem(루트 기준))
100% = 16px , 0.5em = 8px
or
line-height: n ( 줄 간격을 맞춤 height와 동일하게 )
font-family : 속성은 상속
구글 폰트 사용
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
버니 폰트 사용
Bunny Fonts | Explore Faster & GDPR friendly Fonts
fonts.bunny.net
color
폰트 색상
{ color:rgb(n,n,n) / :색상이름 / :#16진수 / :rgba(n,n,n, a) (a= 0~1 투명,불투명 0.2 0.4...) }
text-decoration
텍스트 링크밑줄 없앨 때
none, line-through, overline, underline
text-align (정렬)
ceter, left, right, justify
text-transform 대소문자
capitalize (첫글자 대문자) , uppercase, lowercase
text-shadow : 오른쪽, 아래, 흐림도, 색상
text-shadow: 5px 8px 9px red;
긴 글자 생략
{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
padding
글씨크기는 rem으로 padding 은 em 으로 지정
pading: n,n,n,n /* 위 오 아 좌 */
n, n /* 위아 ,좌우 */
아웃라인
border
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: unset;
border-style
none(테두리x) | solid | dotted | dashed
border-radius(둥글게) : 50%
box-sizing
content-box (속성 값을 콘텐츠 영역 너비, 마진포함)
border-box (속성 값이 테두리 포함, 마진제외)
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
box-shadow
오른쪽 아래 흐림도 색상
box-shadow: 10px 5px 5px red;
visibility
hidden, collapse (table 태그 보이지 않게)
opacity
투명도
0.0(투명) ~ 1.0(불투명)
z-index : 1, 2 ... (떠 있는 우선순위)
overflow (부모의 범위를 벗어날 때) / overflow-x / overflow-y
hidden / scroll / auto
float : left | right; (요소를 왼쪽이나 오른쪽에 떠 있게 만든다.
clear : float 속성을 무효화 시키는 속성
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
선택자::after{ //float 속성이 더 이상 적용되지 않기를 바라는 지점
content:"";
display:block;
clear:both;
}
position
static / relative / absolute / fixed
offset( top / right / bottom / left )
relative;
// 기준위치에서 250px 떨어진 곳 / 떨어진 공간은 남아있음
{
position: relative;
top: 250px;
}일반적으로 부모 요소는 relative, 자식 요소는 absolute
ㄴ>부모요소를 기준으로 자식요소의 위치를 결정, 자식이 공간을 차지하지 않고 떠있게 하고 싶을 경우
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
<div class="absolute">This div element has position: absolute;</div>
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
" > " 는 첫 div 만
body div { .. } 는 body 하위 전체
<style>
body > div {
position: relative;
overflow: scroll;
width: 400px;
height: 150px;
border: 3px solid #73AD21;
}
.absolute{
width: 100px; height: 100px;
position: absolute;
}
.absolute:nth-child(1){
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.absolute:nth-child(2){
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.absolute:nth-child(3){
background-color: red;
left: 90px; top: 90px;
z-index: 1;
}
</style>첫(바깥) div 만 relative 적용
안쪽은 absolute 적용
absolute;
조상을 기준으로 위치가 지정됩니다(있는 경우). 그렇지 않으면 초기 포함 블록 을 기준으로 배치
offset에 의해 결정
white-space: nowrap (줄, 안바꾸게)
margin : px / 백분율 / auto;
max-width : (px 최대 픽셀)
레이아웃
display
block (해당 요소 블록으로)
inline
inline-block 단일 인라인 상자인 것처럼 , 공백 없애기 -> float : left;
none
grid
CSS Grid 완벽 가이드
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...
heropy.blog
flex
https://javapp.tistory.com/216
벤더 프리픽스 : 공급업체에서 제공하는 실험적인 기능
-ms- / -webkit- / -moz- / -o-
수직목록 메뉴 아이콘
<div class=”well sidebar-nav”>
<ul class=”nav nav-list”> //수직 리스트
<li class .. //라인
<i class.. //아이콘
CSS 스프라이트 이미지
이미지를 1개의 파일에 뭉쳐놓으면서 웹 페이지 요청시간을 줄이고 쉽게 관리할 수 있습니다.
CSS Sprites Generator Tool | Toptal®
CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)
www.toptal.com
좌표를 통해서 이미지를 가져올 수 있다.
'Back-end > 웹(web)' 카테고리의 다른 글
| JSP Dynamic 웹 프로젝트 생성 (0) | 2022.04.08 |
|---|---|
| CSS - Flexbox 플렉스 박스 (0) | 2022.03.31 |
| HTML - 태그 (0) | 2022.03.09 |
| AMP : Accelerated Mobile Pages (0) | 2021.02.21 |
| express multer 파일 업로드 (0) | 2020.09.23 |
댓글