Fridaynight

우리가 복잡한 레이아웃을 작성할때에 꼭 필요하다. 유연하게 컨테이너 및 박스를 배치할 때에 사용한다. flexbox 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다. flex item 과 그것을 감싸고 있는 flex-container로 이루어졌다. flex-container:flex item을 감싸고 있는 부모 요소flex item: flex-container에 여러개의 자식 요소 display:flex 속성을 지정하면 된다. main axis 나 cross axis 를 보아야한다. 기본적으로 row 가로로 설정이 되어있고 flex-direction:row 이러면 가로로 정렬이 되고 flex-direction:column 이러면 세로로 정렬이 일어난다. *{ ..

style> /* min-width:최소 px 이상 max-widht:최대 여기까지 버틴다. @media(min-width:400px) and (max-width:600px) 0~400px blue 401px ~600px red 601px ~ yellow 만약 범위가 겹치면 아래에 있는게 먼저 적용이 된다. */ @media(min-width:600px){ body{ background-color: red; } } @media(max-width:400px){ ..

모바일 viewport와 pc의 viewport는 그 크기가 다릅니다. 그렇기 때문에 반응형 웹에서는 viewport에 맞게 화면을 보여줘야 할 필요가 있습니다. user-scaleble=none 유저가 화면을 마음대로 조절할 수 없다는 뜻이다.(이건 앱이니까 당연하다.)vw 화면 viewwidth 에 맞게 조절 전체는 100vw;vh 화면 viewheight 에 맞게 조절 전체는 100vh;%: 이거는 부모 컨테이너에 비율에 맞게 움직여짐 ;

style> body{ margin:0px; padding:0px; } .circle{ width:20px; height:20px; background-color: blue; border-radius: 50%; position:absolute; animation:move-the-circle 1.5s infinite; } .circle:nth-child(2){ left:30px; animation-delay:.1s; } .circle:nth-child(3){ left:60px; animation-delay:.2s; ..

developer.mozilla.org 가 css 여기서 공부 좀 해봐라스타일 body{ margin:0px; padding:0px; } .circle{ width:20px; height:20px; background-color: blue; border-radius: 50%; position:absolute; animation:move-the-circle 1.5s infinite; } .circle:nth-child(2){ left:30px; animation-delay:.1s; } .circle:nth-child(3){ left:..

a { font-size: 30px; } a:link { color: cyan; } a:visited { color: red; } a:hover { color: blue; font-weight: 900; } fieldset:hover { background-color: lightgrey; box-shadow: 0 0 20px grey; } a:active { color: yellow; } input:focus { outline: none; border: 3px solid rg..

/*overflow:scroll 넘쳐 흐른 만큼 scroll 하겠다. hidden 은 숨기겠다. */ /*background-repeat:repeat no-repeat repeat-x repeat-y */ .image{ background-image: url('./images/cputech\ \(1\).png'); background-repeat:repeat; background-position:top right; width:200px; height:400px; border:1px solid black; display: inline-block;..

.red{ background-color: rgb(255, 0, 0); width:120px; height:120px; } /*계속해서 반복이 될 수 있다. background-repeat: no-repeat repeat-y; repeat-x; */ .image{ background-image: url('./images/cputech\ \(1\).png'); background-repeat:no-repeat; background-position:top right; width:200px; height:400px; } background-image 쓰는 법 단..

body{ margin:0px; padding:0px; } /* 위치를 고정시킨다. static 은 요소가 html 문서에서 일반적인 흐름을 따라 배치 일반적인 block,inline 속성이다. top,right,bottom,left 와 같은 속성에 의한 상대적인 위치에 배치된다. */ main,section,article,div{ border:1px solid black; padding:20px; } /*static 은 top,right,bottom,left 는 상대적인 위치에서 변경이 가능하다. */ main{ max-width:600px; /*좌우는 동일하게 맞추겠다...

div>span : div 바로 아래 span 태그 선택이 된다. div span 하고 차이점 (div 밑 하위에 span은 모두 선택을 하겠다.)