web developer👩🏻‍💻

* display: flex; align-content: flex-start; flex-direction: column; flex-wrap: wrap flex-wrap flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있다. ul : 부모 엘리먼트 - display: flex를 설정 한 부모 엘리먼트 li : 자식 엘리먼트 - Flex container 내의 자식 엘리먼트 .divUl{display: flex; align-content: flex-start; flex-direction..

table-layout:fixed; table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 초과해버리는 것을 방지한다.

1. overflow: visible; 기본값. 사이즈를 넘 칠경 우 글이 상자 밖으로 보임. 2. overflow: hidden; 사이즈를 넘 칠경 우 글이 잘림. 3. overflow: scroll; 사이즈를 넘칠경우 가로 세로 모두 스크롤이 추가. 4. overflow: auto; 양에 따라 스크롤이 자동으로 추가될지 결정. 5. overflow-x, overflow-y 가로, 세로 overflow를 각각 제어하고자 한다면 overflow-x와 overflow-y를 사용. 참고 : triki.net/prgm/792

반응형웹을 위해선 ul li로 table을 만드는걸 추천한다. .ul { list-style:none; } .li { float: left; } list-style:none; 앞 점 없애기 float : left; 가로 정렬 1번 li 2번 li 3번 li 4번 li 5번 li 6번 li 7번 li style 적용 전 style 적용 후

calc() : 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수. + 덧셈 calc(OO% + OOpx) - 뺄셈 calc(OO% - OOpx) / 나눗셈 calc(OO% / OOpx) * 곱셈 calc(OO% * OOpx)

position: relative; 위치를 계산할때 static의 원래 위치부터 계산한다. position: absolute; 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. 버튼1 버튼2 결과

1. 그라데이션 일자로 넣기 background: linear-gradient ( 방향, 색상1, 색상2 ... ) 2. 그라데이션 기울기있게 넣기 색상 : www.w3schools.com/colors/colors_picker.asp HTML Color Picker Selected Color: Black Text Shadow White Text Shadow www.w3schools.com 참고 : parkjuwan.dothome.co.kr/wordpress/2017/04/01/css-text-gradient/