프로그래밍 삽질 중

※ 변화 속성 - 효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 그 과정을 시간적으로 조정할 수 있게 함 ※ 변화속성 종류 - transition-property : 변화 효과를 적용할 속성들 나열 - transition-duration : 변화가 지속되는 시간 지정 - transition-timing-function : 변화의 시작과 끝 타이밍 지정 - liner : 처음부터 끝까지 같은 속도 = cubic-bezier(0, 0, 1, 1) - ease : 느리게 시작하여 점점 빨라졌다가 느리게 끝남 = cubic-bezier(0.25, 0.1, 0.25, 1.0) - ease-in : 느리게 시작하여 점점 빨라지다가 일정한 속도에 다다르면 같은 속도 유지 = cubic-bezier(0.42, 0..

※ 표(테이블) 레이아웃 - 셀 안의 내용에 따라 셀 너비 조절 ※ 표 레이아웃 속성 1) table-layoyut: auto; - 내용 분량에 따라 셀 너비가 자동으로 조절(기본 값) 2) table-layout: fixed; - 내용 분량과 관계 없이 셀 너비를 고정 3) table-layout: initial; - 변경된 테이블 레이아웃을 기본값 상태(auto)로 설정 4) table-layout: inherit; - 부모 요소의 값을 상속 받아 셀 너비를 결정 ※ 불투명도 속성 - opacity : 숫자(0~1); ※ 가시성 속성(visibility) - 어떤 요소로 보이게 하거나 반대로 보이지 않게 할 때 사용 ※ 디스플레이 속성(display) - 가시성 속성과 반대로 요소가 차지하는 공간도 ..

※ CSS의 필요성 - 문서작성(HTML)과 디자인(CSS) 분리 - 디자인 분리 시 장점 1) 내용과 디자인 수정 용이 2) 다양한 기능으로 확장 가능 3) 통일된 문서 양식 제공 4) 전송 및 로딩 시간 단축 ※ CSS 문법 - 선택자 { 속성 : 속성값; } ex) div { width : 100px; } ※ CSS 사용 위치 1) 인라인 스타일 시트 : HTML 내 위치 (ex ····) 2) 내부 스타일 시트 : HTML 내 위에 생성 3) 외부 스타일 시트 : 별도 파일 생성(호출식으로) ※ CSS 기본 선택자 1) 전체 선택자 : * { 속성 선언; } - 모든 태그에 스타일 적용 2) 타입 선택자 : 태그 { 속성 선언; } - 지정한 태그에 스타일 적용 3) 클래스 선택자 : .클래스 이..

※ 상태 선택자 1) :checked : 체크 상태의 input 태그 선택 2) :focused : 포커스를 맞춘 input 태그 선택 3) :enabled : 사용 가능한 input 태그 선택 4) :disabled : 사용 불가능한 input 태그 선택 ※ 구조 선택자 1) :first-child : 형제 관계에서 첫 번째로 등장하는 태그 선택 2) :last-child : 형제 관계에서 마지막으로 등장하는 태그 선택 3) :nth-child(수열) : 형제 관계에서 앞에서 수열 번째 등장하는 태그 선택 4) :nth-last-child(수열) : 형제 관계에서 뒤에서 수열 번째 등장하는 태그 선택 * 2n+1 수열에 0부터 넣을 경우 → 1, 3, 5, 7, 9, 12... - 구조 선택자는 수열의..

4.1정리(1) ※ 데이터 전달 (1) Get 방식 - url주소 뒤에 패러미터를 붙여 데이터 전달 - 글자 수 제한(최대 2048), 비밀 보장 x ex) https://www.youtube.com/watch?v=Y9CClRuv3yM → https://www.youtube.com/watch : 검색을 처리하는 스크립트의 URL → v=Y9CClRuv3yM : 사용자가 입력한 단어를 URL에 붙여서 서버로 전송 (2) Post방식 - HTTP Request 헤더에 포함시켜 전송 - 길이 제한 없으며 비밀 보장 가능 - 뒤로 가기 버튼 누르면 데이터 다시 보내야 한다는 브라우저 경고 뜸 ※ 입력 요소 - input요소 1) text : 텍스트을 입력할 수 있는 한 줄짜리 필드 생성 2) password :..

※ - 각 웹 콘텐츠 영역에서 제목 표시할 때 사용 - 크기 순서 : h1 > h2 > h3 ······ ※ - 줄 바꿈(닫는 태그 x) ※ - 분위기 전환(수평 줄 생김) ※ - 입력한 내용 앞 뒤로 빈줄이 생기면서 텍스트 단락 생성 ※ - 인용문 넣기 - 다른 텍스트보다 안으로 들여 써짐 ※ - 소스에 표시한 공백 그대로 표시 - 프로그램 소스 표시 표현 시 유용 ※ = - 굵게 표시 - strong : 중요한 내용 강조 - b : 단순히 굵게 표시 ※ , - 이탤릭채로 표시 - em : 흐름상 특정 부분 강조하고 싶을 때 - i : 단순히 이탤릭체로 표시 ※ - 줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시 - 인용 내용 앞뒤로 따옴표(" ")추가됨 ※ - 형광펜(노랑색)으로 표시 ※ = → 주..

※ 에어프라이어는 오븐만큼 열전달이 잘 안 되면서 금방 태워먹을 수 있기에 오븐 레시피들보다 10~20도 낮추고 굽는 것을 권장 (ex 180도 오븐 20분 굽기 -> 160도 20분 굽기) ※ 대부분의 레시피는 유투브를 통해 참고 ※ 참고한 유튜버 :www.youtube.com/watch?v=hRKRS-BgqzA&t=101s ※ 마늘빵 레시피 - 식빵 2개(파는 거 파는 거 파는 거) [양념] - 마늘 한 숟가락 약 20g(마늘 좋아해서 버터랑 1대 1 비율로 함) - 버터 20g - 설탕 1숟가락 - 파슬리 한 숟가락(없어도 되는 데 있으면 모양이 보기 좋음) [굽는 시간] - 170도 5분~7분 혹은 160도 10분(170도 권장) - 마늘 부분이 타면 쓴맛이 나므로 너무 굽지 말 것 - 그냥 구우..

※ 에어프라이어는 오븐만큼 열 전달이 잘 안 되면서 금방 태워먹을 수 있기에 오븐 레시피들보다 10~20도 낮추고 굽는 것을 권장 (ex 180도 오븐 20분 굽기 -> 160도 20분 굽기) ※ 대부분의 레시피는 유투브를 통해 참고 ※ 참고한 유튜버 :www.youtube.com/watch?v=W_i04z-uZVA&t=319s ※ 바나나식빵 레시피 [반죽 재료] - 바나나 저렇게 넣었는데 바나나맛 안 남(대체 왜?) - 바나나 70g(원래는 50g, 연유 없어서 더 넣음) - 강력분 280g - 소금 3g - 드라이 이스트 4g - 달걀 1개 - 우유 100g (원래는 연유 40g, 우유 80g → 망함의 시작) - 식빵은 사먹어야지... 사먹자... 사먹자.... - 넣으라는 재료만 넣어야 된다.....