front-end 공부하기/Html + CSS11 [CSS] Animation 1. keyframes를 잡아준다 @keyframes loading-title{ from{ opacity: 100%; } to{ opacity: 0; } } 2. animation이 필요한 곳에 넣어준다. .loading-title{ font-size: 18px; line-height: 1.333; font-weight: 400; color: #151B26; margin-bottom: 20px; text-align: center; animation-name: loading-title; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction.. 2022. 9. 30. [CSS] Centering trick / 아이템, 글자를 가운데 정렬하는 방법 아이템을 가운데 정렬하는 방법 margin : auto 기본값으로 항상 오른쪽에 마진이 들어가 있어서 auto로 바꾸게 되면 양 옆으로 자연스럽게 margin값이 들어간다! text-align : center 블럭요소 안에서 그안의 컨텐츠들(텍스트 뿐만 아니라 버튼과 같은 인라인요소)들을 정렬할때 쓸 수 있다 transform : translate(50%, 50%) 자기 자신의 %만큼 움직인다 글자를 가운데 정렬하는 방법 text-align : center; line-height : 박스 높이 // 한줄의 높이를 지정함 2022. 9. 30. [CSS] Flexbox Flexbox란? 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형 된다. display : flex; flex-direction flex 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 기본축이 X축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; 기본축이 Y축 방향 //왼쪽 → 오른쪽 flex-direction : row; //오른쪽 → 왼쪽 flex-direction : row-reverse; flex-wrap ‘flex-item’ 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역.. 2022. 9. 30. [CSS] Selectors Universal (전부) * type Tag ID #id Class .class State : Attribute [] State : (의사 클래스) 선택자에서 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다. button:hover { color: red; background : yellow } Attrivute[] 주어진 특성을 가진 모든 요소를 선택 (^, $) a[href = "naver"] // naver가 들어간 것을 찾음 a[href^ = "naver"] // naver로 시작하는 것을 찾음 a[href$ = ".com"] // .com으로 끝나는 것을 찾음 자세한 내용은 아래 링크로! https://developer.mozilla.org/ko/docs/Web/CSS/CSS.. 2022. 9. 30. [CSS] display, position 확실하게 알고가기 display display : block; display : inline; display : inline-block; display : flex; block inline inline-block div span div(+span) 꽉차게 들어가는 상자 물건 상자 한 줄에 하나씩 한 줄에 전부 상자지만 한 줄에 여러 상자를 놓을 수 있음 width, height을 지정 가능 content 자체만 꾸며줌 (width, height를 무시함) width, height을 지정 가능 position 기준 static 기본값 top, left 등을 사용해도 아무런 영향을 미치지 않는다 relative 아이템의 위치 값 그 자리에서 상대적으로 지정한 만큼 이동된다 absolute 아이템이 담겨있는 box static.. 2022. 9. 27. [Html] 유용한 tag abbr : 축약어 : 속성 값으로 title이 반드시 들어가야 함 PLZ...한번만 봐줘요 address : (물리적인)주소, url, 이메일, 전화번호, sns 치즈도넛 블로그 https://cheese-donut.tistory.com pre & code : 둘이 같이 사용하지 않아도 됨 : pre - html에서 적은 그대로 화면에 나타남 : code - code를 적을 때 사용 console.log('hello world!'); let a = 2; pre를 사용하면 띄어진 부분까지 전부 화면에 나타남 2022. 6. 2. [Html] Media Audio // 컨트롤러가 생김 // 자동으로 재생 // 자동으로 재생 + 무한 재생 ↑ 사용자들이 어떤 브라우저를 사용할 지 모르기 때문에 최대한 지원할 수 있도록 함 https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio - HTML: Hypertext Markup Language | MDN HTML 요소는 문서에 소리 콘텐츠를 포함할 때 사용합니다. developer.mozilla.org 참고 자료 Video Sorry, your browser doesn't support embedded videos. 2022. 6. 2. [Html] Form - Input / Label / Radio & Checkbox / Select / Textarea / Button From Input input에는 무조건 type이라는 속성 값이 들어가야 함 placeholder : hintText minlength : 입력해야하는 단어의 최소 값 maxlength : 입력해야하는 단어의 최대 값 required : 필수로 입력해야 하는 input disable : 특정 input 값을 사용하지 못하게 함 value="치즈 도넛" : 기본으로 들어가는 값 (복사도 가능!) ** number의 최솟값과 최댓값을 적고 싶으면 min과 max를 사용해야 함 Enter your phone number: ** 확장자명을 정하고 싶다면 accept를 사용 Label : 폼 양식에 이름을 붙이는 태그 라벨 ** for은 '누구'를 위한 라벨인지 명시해줘야 함 -> for="input id" 이.. 2022. 6. 2. [Html]인용 Quotations blockquote : 인용구 cite : 인용을 어디서 했는지 알려줌, 출처 q : 문장에 인용구가 있을 때 사용 (ex 두번째 코드에 예시가 있음) : ""를 쓰지 않아도 저절로 생성됨 우리가 겪을 수 있는 가장 아름다운 체험은 신비다. 신비는 모든 참 예술과 과학의 근원이다. 알버트 아인슈타인 **출처하는 사이트가 있다면 blockquote에 cite를 넣어준다 The study is the first to project the long-term outlook for Antarctica's largest penguins, which can grow 1.2 meters (four ft) tall, seeking to fill a gap in understanding climate change and .. 2022. 6. 1. 이전 1 2 다음
