불광불급

section { width: 80%; height: 800px; background-image: url(""); background-size: cover; background-position: center; margin: auto; background: url("") center/cover; } 위와 같은 background 코드를 설명하면 background-image는 background에 사진을 삽입한다. background-size는 background의 크기를 정한다. %, cover( selector를 전부 채움 ), contain( selector를 채움 but 짤림 ) background-postion은 입력된 image의 기준 위치를 정한다. 위 같은 내용들을 맨 아래 코드인 backg..

button { background: none; color: #ffa260; border: 2px solid; padding: 1em 2em; font-size: 1em; transition: all 0.2s linear; } 위 내용으로 만든 버튼을 hover 했을때 hover한 내용이 linear 타이밍으로 all 요소가 0.2s동안 움직인다. button:hover { border-color: #f1ff5c; color: white; box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c; transform: translateY(-0.25em); cursor: pointer; } transfrom: translate Y로 인해 hover시 button이 -0.25em 만큼 이동하고..

margin: 값을 auto로 주게 되면 페이지의 중앙으로 오게된다. h1 { width: 300px; background-color: #2a9d8f; border: 5px solid #264653; color: #eae2b7; font-size: 1.8em; text-align: center; margin: 20px auto; font-family: 'Courier New', Courier, monospace; font-weight: lighter; } transfrom 값은 selector에 여러가지 변화를 주는데, rotate, scale, translate,skew 등이 있다. section:nth-of-type(1) h1:nth-of-type(1) { /** transform-origin: bo..

hover 했을때 사각형 블록에서 원형으로 바뀌는 코드를 만들어 hover 값을 넣었다고 하면, hover시 도형이 바로바로 변한다. 하지만 Transition을 사용하면 바로바로가 아닌 1초에 걸쳐 변하게 할 수 있다. .circle { width: 300px; height: 300px; background-color: magenta; transition: background-color 1s 1s, border-radius 1s 2s; } .circle:hover { background-color: cyan; border-radius: 50%; } 위같은 코드는 circle class를 hover했을때 원형으로 만드는 코드인데, transition을 넣었기 때문에 background-color는 1초만..

rgba 의 alpha 와 opacity의 차이점은 alpha값은 그 값을 준 selector만 투명해지고 opacity는 그 값을 준 selector와 그 안의 텍스트등도 같이 투명해진다. #rgba { width: 50%; height: 50%; background-color: rgba(255, 255, 255, 0.7); } #opacity { width: 50%; height: 50%; background-color: yellow; opacity: 0.5; } postion은 static, relative, absolute fixed sticky 등이 있다. static은 정적이기 때문에 top, left 등의 영향을 받지 않고 자리를 지킨다. relative는 상대적으로 움직이기 때문에 top,..

% section { background-color: #6d6875; width: 800px; height: 800px; } section div { background-color: #e5979b; width: 50%; height: 50%; } 위같은 요소는 section의 자식값이 div인데, div의 width와 height가 50%즉, relative이기 때문에 부모값 section의 width height 800px의 50%인 400px이 div의 width와 height가 된다. 하지만 무조건 부모의 값을 따르는 것은 아니다. h1 { font-size: 40px; line-height: 200%; border: 1px black solid; } 위 값의 경우는 부모의 height가 아니라 f..

button { padding: 200px 30px; } padding의 수직으로 200px 수평으로 30px의 값을 준다. padding이 아니라 margin으로 써도 같다. 저렇게 2개가 아닌 200px 100px 50px 0px 4개의 값을 주면 반시계 방향으로 상 좌 하 우 순서로 값을 준다. h1 { background-color: palegoldenrod; border: 1px solid black; display: inline; } 이렇게 display의 값을 inline이나 block inline-block 등으로 바꿀 수 있는데 block 과 inline의 차이는 block는 막는다는 뜻으로 가로로 한줄을 전부 차지하고 inline은 line 안에 들어간다는 뜻으로 텍스트의 크기만큼 차지..

.post butto:hover { background-color: #e63945; color: #f1faee; } post class의 자식인 button에 마우스를 올리면 ( hover ) background color와 color 가 변한다. .post button:active { background-color: aqua; } post class의 자식인 button에 마우스를 클릭하면( active ) background color 가 변한다. .post:nth-of-type(2n) { background-color: #dfe8dc; } post class의 2번째 마다 background color가 변한다. 만약 2n이 아닌 3n이면 3번째마다 그냥 2이면 2번째 post만

CSS는 STYLE.CSS 파일을 만들어 거기에 넣는게 가장 좋은 방법이다. CSS 를 문서에 넣기 위해서는 head에 link을 적어야 한다. text-align 은 텍스트 정렬 font-weight 는 폰트 굵기 text-decoration 은 텍스트를 꾸며줌 ( text-decoration: underline wavy; 를 하면 물결 밑선이 생김 ) letter-spacing 은 글자들의 간격 height 는 글자들의 줄간격 css selector * 는 모든 요소 선택 h1,h2 와 같이 여러개의 요소 선택 가능 id # class . ==> id는 한 페이지에 동일한 아이디가 하나만 들어가기 때문에 class를 더 많이 사용한다. (대부분..

Amount of Cheese: Any Special Requests? range input은 볼륨바와 같이 조절할 수 있는 바를 넣는다 id cheese 로 label과 같이 맞춰주고 min = 1 max = 10 step = 2 로 최소값 1 최대값 10 2씩 올라간다 1 3 5 7 textarea 는 user가 작성가능한 창이다. Enter first name username Submit minlenght와 maxlenght 는 최소, 최대 텍스트를 정하고 required 를 넣으면 해당 텍스트가 빈칸이면 submit이 안된다.