collasing margin 현상 (상하에서만 발생) div margin이 body margin과 만나면 둘 중 큰 값의 margin으로 body에 적용되고, body와 div margin은 하나로 취급
padding= box의 경계로부터 안쪽에 있는 공간
box의 경계(border)이다 border의 스타일은 border style mdn 구글링
border: 2px(굵기) solid(스타일) black(색깔); 전체박스에 적용= { 2px(굵기) solid(스타일) black(색깔); }
전체를 사용했을때 하나는 다른 스타일로 할 경우 ex) span{ border-style: dotted; }
는 전체를 뜻한다 사용법 * { }
사각면을 둥글게 만들고 싶으면 border-radius: 50px;
코드를 한번에 수정하려면 = (win)ctrl+D (mac)command+D 누르고 방향키로 옮김
display는 block 이다
div 웹 브라우저 전체공간에 대해 분할, block 형식으로 분할
span 웹 브라우저의 일부 영역만 분할, inline 형식으로 분할
div 가운데 정렬
head에서 div{margin:0 auto;}
css 에서 text-align: center;
div 바로 밑 자식에서 span만 효과를 주는 방법 div span{ text-decoration: underline;} 하면 div밑에있는 모든 span들이 효과를 가진다 div> span{text-decoration: underline;} 하면 바로 밑의 자신만 적용
body-div-p-span(child) 에서 p안에있는 span(child)에만 효과를 주고싶으면 stlye에서 p span{} 을 적용시킴
body-div-span-p-span(부모) 에서 p다음에 오는 span에게 효과를 주고싶으면 p+span{}사용(딱 바로뒤에 오는태그만 가능). 이때 +에 마우스를 올리면 적확히 어디에있는 span인지 미리보기가 된다
p~span{} 만약span이 p의 형제인데 바로뒤에 오지않을때 사용
< a >링크에서 밑줄을 없애고 싶으면 text-decoration:none;을 사용
/form/ body에서 작성한 input을 head-style에서 스타일을 줄때 [ ]구간선택
[placeholder~="name"] placeholder에 "name"이라는 단어를 포함한 모든 input
placeholder : input에 미리적는 문구
button:active{} 마우스 버튼을 누르는 순간부터 떼는 시점
- hover{} 마우스 커서가 대상 위에 있을 때
scss에서는 .textBox{&:hover{}}
.textBox{
margin: 0
img:hover~.imgTextBox { // img 에 있는 imgTextBox에만 적용
display: block;
}
}focus{} 키보드로 선택되었을 때
a:visited{} 링크에만 적용됨, 방문한 링크의 색깔을 변경
focus-within{} focus 동시적용 조건/
form: hover input:focus{backgrond-color:black;}일때 hover와 focus가 동시인 상태에서만 작동함/
조건을 나열해 여러상황을 만들수 있다
button에서 배경색을 바꾸면 border의 속성이 없어짐
placeholder
- placeholder을 꾸미는방법은 ::placeholder 드래그 했을때
- 색을 입히고 싶으면 selection{color, background-color} 적용
- ::first-letter 첫번째 글자에만 효과
- 검색창에 포커스가 있을때 텍스트 없애기
input:focus::placeholder { color: transparent;//부모 색깔 따라가기 }
input type:file
- 파일을 업로드할때 사용됨
type= 'file' accept= 'image/png, image/jpeg'
- accept: input 요소의 type 속성값이 'file'인 경우에만 사용 할 수 있다.
accept='파일확장자(audio/ | video/.. | image/png, image/jpeg...)'
: 모든타입의 ㅇㅇ파일이 허용됨
color-zilla로 어느 사이트에서나 원하는컬러를 따올수 있음
var(Vector AutoRegression/편집) 여러개의 같은 코드 색깔이 지정되어 있을때 여러개 수정하지 않고 root를 이용해 한번에 변수를 만들어 수정한다 :root {--main-변수이름:컬러;} /
해당코드에는 var(--main-변수이름); 변수에 공간이 있으면 안됨 /
변수를 사용할 때는 var(--main-변수이름);
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
어떤브라우저에서 작동되는지 이 사이트에서 확인하기, 변수의 기본 사용법이 담겨있음
그리드(grid)
나란히 놓을때 사용
fr 비율값
display:grid;
grid-template-columns: 1fr 1fr;
- button 부모 컬러로 적용하기
background-color: inherit;
z-index
배치 순서 결정하는 속성
position: fixed, relative, absolute속성이 적용된 요소에서만 작동된다
auto: 기본값으로 z-index를 지정하지 않은 것과 같음
number: 배치 순서를 결정, 숫자가 낮을수록 뒤에 배치되며 숫자가 높을수록 앞에 나옴(음수도 가능)
initial: 기본값으로 설정함
