margin 및 padding 속성...
margin와 padding 속성은 아주 중요한 속성으로... 정확한 의미를 알아야함...
padding은 원래 있던 background와 똑같이 연장이된다. margin은 투명한 (또는 따로 지정한) 여백이 생긴다
border 속성:
border-width:
border-style: -> (dashed, solid etc.)
border-color:
이 3가지 값을 그냥 border: (width) (style) (color) << 이렇게 함
border-top: 위에 보더만...
border-bottom: 밑에 보더만...
background-image 속성
복습: url('www.adf.com')은 url로 지정...
background-size: %로 지정가능.... 50%면 1/4의 사이즈가 그 background을 채운다
background-repeat: no-repeat; << background-size가 작아졌을때... 그 이미지가 repeat로 꽉채운것을 방지한다.
선택자란 (보통 selector라고함)? 특정 태그를 선택하여 해당 태그의 속성을 변경하는 목적으로 사용함. <css를 사용하는 전체적인 이유!
id(#)와 class(.) -> 태그의 id와 class을 이용하여 css에서 속성을 설정 할 수 있음... 예)
class도 비슷함... -> 클래스도 이름을 줘서 id와 똑같이 사용하지만. 하지만 # 이아닌 .class_name 이렇게 함. (구체적인것이 우선순위를 갖는다) width. border. font-size. font-weight (e.g. bold). text-align (e.g. center). background-color
overflow:hidden << can set how overflowing data will/willnot be shown
tag,id,class 혼합<< 3개를 혼합하여 css에서 속성을 설정할수있다.
예) ul li.menu { (styles)} <<이렇게 하면 ul 태그안에 li태그 안에 menu class 만.
속성 선택자!!! 예) html로 << 이렇게 있을때 style로 input { (style)} 하면 input의 속성을 가진 모든 애들을 선택하지만 style로 input[type=text] 하면... text인 애들만 한다
후손 및 자손 선택자 tag의 속성을 선택하여 css의 속성을 설정가능
예) div 안에 li가 있으면 div li { style} 하면 -> div li 안에 있는 모든것들을 설정한다 -> 반대로 div 만 하면 li 및 모든것들을 설정한다
div > h1 -> div 바로 밑에 있는 h1 만 선택.
동위 선택자!! 태그의 동등한 위치를 판단하여 속성을 설정...
h3~div -> h3와 동등한 위치에 있는 넘들중에 div를 모두 선택 h3+div -> h3와 동등한 위치에 있는 넘들중에 바로 근접해 (바로 아래쪽에) 있는 div 선택
title~div -> title와 동등한 위치에 있는 넘들중에 div를 모두 선택
반응 선택자 마우스의 반응에 따른 속성! 예) li:hover { color:blue;}
(misc: margin: 0 0 0 0; 좌측부터 우측까지 clockwise direction margin 두깨. auto로 하면 브라우저에 남은 여백의 auto center가 된다)
상태 선택자 상태에 따라서 css속성이 변하는 설정... 예) input:focus; input:enabled;
구조 선택자 구조에 따라서 css속성이 변화는 설정... 예) ul li:first-child, (u의 li 자식중 첫번째 li), u li:last-child(u의 자식중 마지막 li).... nth-child(2n+1) -> 함수... n째 자식이란뜻...
(misc: border-radius: 좌측 코너부터 시계 방향 ( a b c d) -> 값이 커질수록 코너의 굴곡이 심해짐 list-style: none 하면 bullet point 없어짐
문자 선택자 특정 문자 또는 문자열을 선택하여 css속성을 설정 예) #history2:first-letter, #history3:first-line. ::selection은 브라우저에서 드래그로 하일라이트하면 되는 설정
(misc: border-bottom (밑에 보더... (divider line같은거))
a::after { content: ' - ' attr(href); } -> a 끝나고 후 - + href을 더해라 라는 뜻
부정 선택자! 나를 제외한 모든 태그에 css속성을 적용 가능 예) #content li:not(.fa) -> content의 자식중 li중 fa 클래스가 아닌 놈들.
CSS3 단위 CSS3에서 자주 사용되는 단위들!
em -> 폰트의 기본적인 사이즈 (브라우저마다 다르긴 하지만 16px = 1.0em) 즉 2.0em 은 16px *2. 0.5em 은 /2
% -> 100%. 등등 몇프로로 설정할수있음
px은 그냥 픽셀~
url() background-img의 속성값으로 매길수 있음... 예) background-image:url('www.asdf.com')
display 속성 화면에 어떻게 보이는지를 설정하는 속성... 속성값이 많지만 주로 몇가지만 많이 사용함... 제일 중요한 넘들: block inline inline-block
html은 많은 태그들이 있는데... 기본적으로 크게 2분류로 나뉘어진다. block-> div. p. li . block은 레고 블럭으라고 생각하면됨 (위아래로 계쏙 쌓여짐) inline-> span. 옆으로 붙여나감.
block을 inline으로 바꿀려면 display:inline으로 하면됨 -> (inline은 height 속성을 줘도 height 설정이 안된다... 즉 margin도 상하 margin은 의미가 없음...)
(misc: display:none 해주면 아예 날라간다...)
visibility 속성 display:none은 아예없앰.... (공간 자체를 없앰) visibility:hidden은 안보임 (공간은 그대로 잇음)
(misc: display: inline-block 은...? block 인데 좌우로 쌓임)
opacity 속성 투명도를 조절하는 속성... (1은 완전 불투명. 0은 완전 투명)
margin 및 padding 속성... margin와 padding 속성은 아주 중요한 속성으로... 정확한 의미를 알아야함...
padding은 원래 있던 background와 똑같이 연장이된다. margin은 투명한 (또는 따로 지정한) 여백이 생긴다
border 속성:
border-width: border-style: -> (dashed, solid etc.) border-color: 이 3가지 값을 그냥 border: (width) (style) (color) << 이렇게 함 border-top: 위에 보더만... border-bottom: 밑에 보더만...
background-image 속성 복습: url('www.adf.com')은 url로 지정... background-size: %로 지정가능.... 50%면 1/4의 사이즈가 그 background을 채운다 background-repeat: no-repeat; << background-size가 작아졌을때... 그 이미지가 repeat로 꽉채운것을 방지한다.
font family, font-szie << 폰트와 사이즈를 임의로 지정 가능...
font style: italic << 이탤릭으로... font-weight << bold line-height << 행 간격... block내에서 height을 a로 해놓고 line height 도 a 로 해놓으면 중간에 자리잡는다...