분류 전체보기 (35) 썸네일형 리스트형 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.. flexbox 가로나 세로로 요소들을 정렬하기 위해 사용 바깥에 아이템들을 감싸고 있는 container가 존재 (부모자식관계가 성립해야함) flex container : 가장 바깥쪽 아이템을 감싸고 있는 부모 영역flex item 내부 정렬을 위한 아이템들 main axis 주축 (축에서 메인이 되는 축, 기본값일때 가로가 되는 축) cross axis 교차축 (기본값일때 세로가 되는 축) , ---> 축방향은 바뀔 수 있음. container - displaydisplay-outside 제일바깥쪽 있는 것들 inlinen, blockdisplay- inside 요소 내부의 아이템 container - flex- direction플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축(main axis, cros.. animation transition은 A에서 B로만 animation은 다수의 스타일을 전환하는 애니메이션 @keyframes개발자가 애니메이션 중간중간 특정 지점들을 거칠 수 있는 키프레임들을 설정함 div class="box"> 하윙! div>.box { width:100px; height: 100px; border: 10px solid seagreen; background-color: rgb(204,253,225); border-radius: 30px; animation: my-first-animation 2s infinite alternate;}@keyframes my-first-animation{ from {width: 100px;} to {width: 300px;}}@keyframes.. transition A 상태가(css) ------> B 상태(css) 로 시간차를 두고 자연스럽게 전환된다. transition-property (어떤요소) 특정 css만 바꾸겠다. all: 모든 css를 바꾸겠다 none: 아무것도 바꾸지 않겠다 transition-duration (얼마만큼의 시간을 가지고) s, ms(밀리세컨 0.5s = 500ms) div class="box"> Hover!.box { width: 600px; height: 80px; border: 2px dashed teal; background-color: darkslategray; font-size: 50px; color: white; trandition-property:all; transiti.. 이전 1 2 3 4 5 다음
