분류 전체보기
-
-
CSS DINNER 링크 및 답CSS 2022. 10. 2. 23:21
CSS Dinner: https://flukeout.github.io/ ------------------------------------------------------ 절취선 ------------------------------------------------------ 01 plate 02 bento 03 #fancy 04 plate apple 05 plate#fancy pickle 06 .small 07 orange.small 08 bento orange.small 09 plate, bento 10 * 11 plate * 12 plate + apple A + B : A 바로 다음에 오는 B요소가 선택 (인접형제 선택자) 13 bento ~ pickle A ~ B : A 다음에 오는 모든 B를 선택..
-
HTML Sementic tagHTML 2022. 10. 1. 15:05
홈페이지 구조 Sementic tag(의미있는 tag)를 이용하는게 좋다 article vs section 메인 안에 있는 다른 내용들과 상관없이 그 자체만으로 독립적 서로 연관있는 내용들을 연결. 연관있는 내용을 하나로 묶음. vs : 시각적으로만 이탤릭체 : 강조하는 이탤릭체 vs : 시각적으로만 볼드 : 강조하는 볼드체 vs vs : 순서가 중요 : 순서 없음 : 정의, 설명 목록 vs css : 웹페이지 안에서 하나의 중요한 요소일 때 / 문서의 일부분 O : 문서의 내용과는 별개로 스타일링을 위할 때 / 문서의 일부분 X vs : review, quiz, vote, login 등 사용자의 특정한 액션을 위해 버튼 클릭 : 사용자가 클릭을 했을 때 어디론가 이동할 때 (링크) vs : 행+열 데이..
-
Personal PortfolioFreeCodeCamp 2022. 9. 18. 23:29
nav 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용 #값과 이동하길 원하는 곳의 id값이 같아야 함 Features How It Works Pricing navbar ul/ li 제발 설정해... // html //CSS ul{ list-style: none;} >> 정렬 . 없애줌 .navbar{ display: flex; justify-content: flex-end; } >> 오른쪽 끝으로 Social-icons 사진 누르면 링크 이동 안에 img 태그 걸기 #navbar 항상 위에 위치 // html About Us Demo Photo Gallery Contact // css header { position: fi..
-
Learn CSS Transforms by Building a PenguinFreeCodeCamp 2022. 9. 18. 19:58
:root 가상클래스, 웹 문서 구조에서 특정 위치에 있는 요소를 선택, 웹 문서상 가장 상위 요소를 선택/공통으로 사용될 속성 적용 /* 문서의 루트 요소 선택 HTML에서는 */ :root { background: yellow; } :root { --main-color: hotpink; --pane-padding: 5px 42px; } https://developer.mozilla.org/ko/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다. developer.mo..
-
Learn CSS Animation by Building a FerrisFreeCodeCamp 2022. 9. 13. 23:34
transform element 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여 / 좌표 공간을 변경 transform: matrix(1, 2, 3, 4, 5, 6); transform: translate(120px, 50%); transform: scale(2, 0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: scale(0.5) translate(-100%, -100%); https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절..
-
Product Landing PageFreeCodeCamp 2022. 9. 4. 18:33
nav 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용 #값과 이동하길 원하는 곳의 id값이 같아야 함 Features How It Works Pricing input type="submit" 글자 바꾸기 value=" 바꿀 이름 " input data 서버에 전송하기 action="전송할 서버 url" ... video 임베드 https://okayoon.tistory.com/entry/%EC%95%84%EC%9D%B4%ED%94%84%EB%A0%88%EC%9E%84iframe