6.5 css hack =>justify-content대신 사용가능 class는 .사용 justify-content: center; -> 중앙으로 보냄 nth-child(2) => 목록의 2번째 선택 display:flex; =>Flex Container정의 아이콘 크기 키울려면 2x나 lg 붙여주기 6.6 margin 웹에서 원래 기본적으로 적용되어있음 reset css padding: 세로; 가로; opacity=불투명도 조정 margin: 90px 0px; => 위아래 90px 좌우는 0px margin,flex 더 공부해야겠다
6.0-6.5
6.0 gitignore =무시하고 싶은 파일 이름을 기록하는 파일 6.1 BEM 6.3 아이콘 추가하는 법 1. 직접 구하기 2. 직접 이미지를 만들고 추출하거나 svg파일 svg=픽셀없는 이미지형식의 파일 css아이콘(svg파일) 받을 수 있는 곳 -heroicons -font awesome script코드는 항상 body닫히기 전에 있어야 함 6.4 공통적으로 헤더를 가지고 있기 때문에 class를 만들어야함 placeholder=아이디 적는 칸에 계속 있는 글자 만드는 것
5.2-5.3
5.2 깃허브 repositories를 폴더와 브라우저에 연결할 때 경로 바탕화면으로 설정해두는 것이 좋다 -> 잘 못 찾는 경우가 많기 때문에 5.3 깃헙 폴더를 VSC에 드래그 하기 드래그한 폴더는 깃헙 데스크탑으로 만든 폴더랑 같은 폴더여만 한다 README.md md=mark down=서식이 있는 문서를 작성하는것 commit ->repository의 버전을 저장하는 시점 커밋할려면 타이틀은 꼭! 작성해줘야됨 (내가 뭘 했는지 적기) publish=게시 컴퓨터에서 업데이트 된 것 컴퓨터가 알고있음 파일저장->파일체크->커밋타이틀적고-> 푸시 Markdown 찾아보기
미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. developer.mozilla.org @media print{ body{ background-color: tomato; } } ==>사이트를 프린트할 때 배경색이 토마토 색이 된다(ctrl+p) 5.0 깃은 파일을 계속 추적한다 깃헙은 변경한 내용을 올리는 것임
Media Queries CSS이용해서 스크린의 사이즈를 알 수 있는 방법 @media screen and (min-width: 600px) and (max-width1200px){ div{ background-color wheat; } } 600px~1200px범위안에 들어가면 색이 wheat로 바뀜 +media sreeen and (min-width: 600px) and (max-width1200px) and(orientation: portrait) portrait에서색이 바뀜 *landscape(가로모드) *portrait(세로모드)
4.3 애니메이션 만들기 @keyframes 애니메이션 이름{ from {transform:rolate(0); } to{ transform:rolateY(180deg) translate(100px); } img { border: 5px solid black; border-radious: 40%; animation: 애니메이션이름 5s ease-in-out infinite; } infinite=새로고침할 필요없이 애니메이션을 계속 움직일 수 있다 4.4 애니메이션 만드는거 재밌다
4.1-4.2
4.1 transition은 상태(state)에 따라 바뀌는 속성(preperty)를 갖고 있으면 사용됨 애니메이션처럼 움직이게 할려면 transition사용해야함 a{ color:wheat; background-color: tomato; text-decoration: none; paddingg: 3px 5px; transition: all 1s } all-모두에게 적용 transition: background-color 1s background-color만 trasition이 적용 4.2 transformation =다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해서 사용 box,element,이미지에 영향을 끼치지 않음 transform: translate(); X축 기준으로 이미지..
3.19 (11/27) rgb( red grreen blue) rgb( 235,156,0) red 값이235, green값이 156, blue값이 0이라는 뜻임 rgba a는 투명도 0~1로 투명도 조정가능 1에 가까워 질수록 불투명해진다 변수 color pocker 크롬 익스텐션 custom property =변수(variable) css를 프로그래밍 언어로 보여주게해줌 여러가지 document의 색을 쉽게 바꾸려면\ :root{--main-color: #46877; } 메인컬러를 지정하고 p{color: var(--main-color)}; a{color:var(--main-color)}; 모든 컬러가 #46877이 된다 4.0 hover사용 할 때 마우스 올리고 땔 때 빠르게 움직임 -> 별로 좋지않..
3.17-3.18
3.17 active=클릭할 때버튼 색이 바뀜 hover=마우스를 갖다댈 때 색이 바뀜 focus=키보드로 선택되었을 떄 효과적용 visited=방문했던 사이트일 때 효과적용 focus-whithin = focused 상태를 가진 부모 element상태를 말한다 form:hover input:focius: { back-groundcolor: sienna; } 헤드 바디 폼 인풋칸에 마우스를 올리고 클리간 상태일 때 코드가 적용됨 3.18 placeholder=입력 될 값의 힌트를 명시함 selection= 글자 마우스로 그을 때 색깔 지정가능함 first-letter=첫 글자에만 적용이 됨 first-line=첫 문장에만 적용이 됨 외울려고 노력 하지 않아도 됨 이해가 중요 만들다 보면 외워지게 된다!
