1/4 페이지 열람 중
그리드 레이아웃 자동으로 생성해주고 css를 다운받게 해주는 사이트
css를 이용하여 글자 강조 깜빡거리게 하기 keyframes 를 이용하여 활용이 가능하다. 아래의 코드를 css에 적용시켜 주면 된다. @keyframes blink-effect { 50%{ opacity:0; } } .blink { animation: blink-effect 1s step-end infinite; /* 다른 기능을 원한 다면 이부분의 주석을 해제. animation-name: blink-effect; animation-duration: 1s; animation-iteration-c…
html 주석 <!-- 주석 내용 --> css 주석 /* 주석 내용 */
태그의 정렬 ( 테이블과 같이 효과를 얻기 위해 사용하는 css의 종류 ) 1) float 을 이용한 정렬 2) display:inline-block 을 이용한 정렬 3) display:table 을 이용한 정렬 4) display:flex 를 이용한 정렬 5) display:grid 를 이용한 정렬
선택자 공부 사이트 :: http://flukeout.github.io
세번째 방법은 display:table을 사용하는 방법 부모는 display:table를 사용하고 자식에는 display:table-cell을 사용해준다. 이때는 따로 제약이 없므로 잘만 사용하면 편하게 쓸수 있는 css이다. <style> *{ padding:0; margin:0; } .main{ width:100%; height:800px; border:1px solid #000; } .head{ width:100%; height:20%; box-sizing:border-box; } .to…
두번째 방법 Display:inline-block 을 사용하는 방법 이 방법은 inline-block으로 바뀐 요소에 공백이 생기는 문제가 있다. 그래서 부모에서 font-size:0을 지정해줘야 공백이 사라진다. <style type="text/css"> * { margin: 0; padding: 0; } .main { width: 500px; height: 500px; border: 1px solid #000; font-size:0px; } .head { border: 1p…
가로 정렬, 세로 정렬 등 테이블과 같이 명확한 효과를 얻기 위해 사용하는 css의 종류와 사용법 float를 사용하는 경우 float를 해제 해줘야 한다. 첫번째로 float를 사용하는 방법 float:left(왼쪽정렬), float:right(오른쪽정렬) <div class="clear"> <div class="left"></div> <div class="left"></div> <div class="left&…
border style 종류 - solid, dotted, dashed, double, groove, ridge, inset, outset
박스사이징(box-sizing) - 요소의 크기를 화면에 표시하는 방식 - 컨텐츠 기준으로 바뀜 div{ margin:10px;width:150px;} #small{border:10px solid #000;} #large{border:30px solid #000;} <div id="small">small</div> <div id="large">large</div> 위와 같이 사용할 경우 small과 large가 크기가 달라진다. 이를 A와 B를 같은 크기…
