minstory

flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; justify-content main-axis 정렬 flex-direction 설정값에 따라서 justify-content 값을 적용한 결과가 달라진다. flex-wrap flex -wrap: wrap; flex-wrap: wrap-reverse; 여기서 reverse는 cross-axis 방향을 반대로 바꾼다. * flex-direction: row; 일 때 cross-axis는 세로축, flex-direction: column; 일 때는 cross-axis는 가로축이다. align-items cross-axis 정..

https://easings.net/ Easing Functions Cheat Sheet Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function. easings.net transitiono 다양한 효과들 참고할 수 있다.

em button { font-size: 1em; //부모 요소 폰트 크기의 1배 padding: 0 1em; //현재 요소 폰트 크기의 1배 border-radius: 0.5em; //현재 요소 폰트 크기의 0.5배 곡률 유지 } 이렇게 하면 폰트 크기가 바뀌더라도 button 곡률은 망가지지 않고 모양이 유지된다. *단점: 부모 요소의 글꼴 크기에 따라 달라지기 때문에 예를 들어 중첩될 때 제곱한 만큼 크기가 바뀐다. 그래도 border-radius 설정할 땐 유용함. 버튼 테두리 곡률은 버튼내부 글씨 크기에 영향을 받기 때문 rem 부모 요소 말고 root element ( ) 글씨의 배수로 크기 설정

width & height : 컨텐츠 가로세로 설정 box-sizing: border-box; -> 테두리가 원래 설정한 컨텐츠 크기 안에 포함됨. *short handed property border: 두께, 스타일, 색상 순서; Padding : element와 border사이 공간 Margin : element 테두리 간 간격 Display property options *87강 참고 Inline width&height are ignored. margin & padding push elements away horizontally but not vertically Block Width&Height, Margin&Padding are respected. Inline-block..

CSS 선택자에는 여러 종류가 있다. element id class descendent div li {color: red;} adjacent 인접 선택자 input + button {color: pink;} -> input 바로 뒤에 있는 button만 글자 색을 pink로 바꿈 direct child 직계자손 선택자 한단계 아래 하위항목만 선택 div > li {color: red;} attribute 속성 선택자 input[type="text"] {color: red;} pseudo class 유사 클래스 a:hover {color: red;} 링크위에 커서 올리면 색 변함 pseudo element p::first-letter {color:red;} 문단 안에서 첫번째 글자만 빨간색 ::select..

css 3가지 방법 1. Inline styles 2. element 3. external stylesheet color 참고 사이트 https://htmlcolorcodes.com/ HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com font stack https://www.cssfontstack.com/ CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code. Join..

html은 프로그래밍 언어가 아니다 마크업 언어이며 태그를 이용하여 문서나 데이터의 구조를 만들어준다. 프로그래밍 언어는 소프트웨어를 구동시키기 위한 언어이며 복잡한 논리를 내포할 수 있다. accessibility 접근성을 고려한 언어라는 점이 인상깊다. 스크린 리더 사용자를 배려한다. ex. alt 속성 * 프론트엔드 개발에 기본적인 HTML CSS Javascript 는 문법 요소와 비교할 수 있다. CSS - adjective HTML - noun Javascript - verb

*Live Server 실행 단축키 : Ctrl + Shift + p *바로 창 띄우는 단축키 : Alt + L Alt + O (패스트캠퍼스) HTML : HyperText Markup Language 부모태그 div 자식태그 p h1 ... 화면레이아웃 구성 연습 - 카카오오븐 속성(attribute)은 특정 태그가 갖는 특별한 설정값이다. Ex) a태그는 href를 속성으로 갖고, 하이퍼링크 지정이 가능하다. 아이디를 갖는 p 태그 / 유일한 요소의 식별자 역할 클래스를 갖는 p태그 / 다중요소의 식별자 역할 블록요소 - 자동줄바꿈, 인라인요소 포함o, 다른 블록요소 포함x(div는 블록인 동시에 범용요소이기에 그 안에 p 가능) 블록요소에는 여러가지있는데, 블록&범용요소 - div, address(..