전체 글 (30) 썸네일형 리스트형 css 애니메이션 transisition div class="box"> div class="box-overloay"> div>body { margin: 20px;}.box { width: 100px; height: 100px; border: 1px solid black; position: relative;}.box-overloay { width: 100px; height: 100px; background-color: black; position: absolute; top: 100px; left: 0; transition: all 1s;}.box:hover .box-overloay { top: 0px;} transition: all 1s;all 로 설정을 하게 되면 .box-over.. sass (scss) -css 의 확장언어-css보다 조금 더 높은 자유도, 지켜야할 문법도 多-변수, 반복문, 가정문 사용 가능 &-부모 태그를 그대로 부를수 있음 css 땐 hover 할땐 .box로 불러 와서 했을텐데 괄호 안에 & : 로 하면 그대로 적용 가능하다 변수-변하는 수 (모든 데이터 포함) -$ + 작명 : 저장할 내용 ; 색관련함수darken : 어둡게lighten : 밝게saturate : 더 선명하게 (높은 채도)desaturate : 더 흐리게 (낮은 채도)adjust-hue : 명도 변경rgba : alpha 값 변경 (투명도) div>Div1div> div>Div2div> div>Div3div> div>Div4div> div>Div5div> div>Div6div> d.. position position: absolute; --> 기준: 부모 position: fixed; ------->기준: 브라우저 position: relative;--------> 원래 내 위치 position: static; -------->기준이 x 좌표 적용 x top, bottom 거리 설정을 할때 position: static이 원래 적용되어있음 하지만 기준이 없기 때문에 사용할 순 없음. --> relative를 이용해서 설정 해주면 됨. style> div { width: 100%; min-height: 100px; height: auto; border: 1px solid red; } .parent.. css 가상클래스 / 가상요소 가상 클래스 (:) style> a:link { color: blue; } a:visited { color:red; } style>head>body> a href="https://www.naver.com/" title="naver">테스트a>body> 선택자:not (선택자) style> p:not(.panda) { color:red; } style>head>body> p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis obcaecati maiores beatae ipsum officia hic reprehenderit quae debitis.. +css 선택자 . p { } .test {} # id {} * 모든것을 포함 선택자 + " " + 선택자 div class="test"> p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea molestias atque cumque? Mollitia omnis ducimus esse, inventore incidunt quasi a repellendus in fugiat at iste magnam id sed, ipsam laboriosam!p> div> p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos minima fuga quae laborum vel impedit. Optio h.. foam 가 사용자가 우리의 웹 사이트를 소통할 수 있도록 만드는 가장 기본적인 HTML form action="./result.html" method="get"> div> ID: input name="id" type="text" /> div> div> PW: input name="password" type="password" /> div> input type="submit" value="로그인"> form> password는 보안상으로 type을 text가 아닌 password로 해줘야함. form action="./result.html" method="get"> foam 태그는 antion과 method 를 필수적으로 가지고 있어야 함. actio : 정.. 반응형 디자인 다양한 화면 크기가 등장함에 따라 반응형 디자인 개념이 등장다양한 사이즈의 디바이를 하나의 웹페이지로 대응할 수 있음 미디어쿼리body { background-color: blanchedalmond;}@media screen and (max-width:300px) { body { background-color: tomato; } 가로 길이 최대가 300px 일때, (=300px 이하일때) 토마토색깔 screen을 all 로 해도 되고 생략을 해도 됨 body { background-color: blanchedalmond;}@media (min-width:300px) and (max-width:500px) { body { background-color: tomato; }}최소 30.. grid 주축과 교차축에 여러가지 아이템을 나열하도록 해줌.container가 있고 그 안에 item 나열 container-displaydiv class="container"> div class="item">1div> div class="item">2div> div class="item">3div> div class="item">4div> div class="item">5div> div>div class="container"> div class="item">1div> div class="item">2div> div class="item">3div> div class="item">4div> div class="item">5div> div> .containe.. 이전 1 2 3 4 다음
