기초 개발 노트

랜덤 정수를 생성하고 조건에 따라 메세지 나오게하기 /* 랜덤 정수 생성하기 : Math.random() 1이상 10이하의 랜덤 정수 생성 Math.random() - 0.0 9 Math.floor(Math.random() * 10); - 0 = 60) { console.log('합격하셨어요'); console.log('수고')} else { console.log(`불합격~~`);} if 뒤에는 반드시 () 괄호가 와야한다! prompt는 string type 이기 때문에 앞에 +를 붙여야 숫자를 인식한다. a === b === c 가 있을 때         (b에서는 true) 상태임 var money = 3000;var ..

자바스크립트 특징    자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어자바스크립트로 작성한 프로그램 ➟ 스크립트(script)*. 스크립트는 웹페이지의HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됨.스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있음보면 자바스크립트는 자바(Java)와는 매우 다른 언어이다.   var result; // 변수 선언result = 10 + 20; // 값을 변수에 할당 (대입)// = 는 우항에 있는 값을 좌항에있는 공간에 저장한다는 것이다. ( 수학에서의 '같다' 의미가 아님 )var multiple = result * 3; // 90console.log(multi..

반응형 스타일을 하는 법 웹페이지➟ 콘솔➟ 스타일➟ 왼쪽 위버튼➟ 설정하려는 해상도변경➟ 수정하고싶은 부분의 태그 복사➟ vscode에 복사 ➟ media(max-width) { 이 곳에다 수정사항을 다 넣기 명시도 중요!!!  }       애니메이션  키프레임을 사용해서 설정값을 정해주고 위 코드와 같은 명령어로 실행하면 된다. 0% ➟ 100%  정방향 으로 움직인다. 100% ➟ 0% 는 역시 역방향이라 생각 하면 된다.       rotation 이라는 가상의 설정값을 만들어준다. transform translate을 이용해서 움직이는 듯한 제스쳐를 만들어낼 수 있다. 100% 로 갈수록 픽셀값을 바꿔서 위치를 옮겨준다. 마치 만화의 한컷들을 모아놓듯이     .box { width:..

Transistion 이번 시간에는 transition 을 통해 요소를 시각적으로 움직이게 하는 방법을 배웠다. transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s = 1000ms transition-timing-fuction 타이밍 함수 지정 ease transition-delay 전환 효과의 대기시간 설정 Transfrom hover 효과에 다양한 효과를 붙여낼 수 있다. .box { transform: rotate(20deg) translate(10px, 0); /* 20도 각도 회전, X축:10px Y축:0 이동 */ transform-origin 요소 변환의 기준점을 설정 transform-style 3D ..

3번 HTML 코드 Musée d'OrsayMusée d'Orsay Musée d'Orsay Musée d'Orsay Musée d'Orsay Musée d'Orsay Royal Academy of Arts, THE REAL VANGOGH THE ARTIST AND HIS LETTERS ARTIST 작가의 작품 작가의 시대 작가의 일생 피리부는 소년 에두아르마네 1866 캔버스에 유채, 161*97cm, 파리 오르세 Edouard MANET, Le Fifre, H.T, 161*97cm 고흐의 방 빈센트반고흐 1889 캔버스에 유채,57.5*74cm,파리 오르세 Vincent Van GOGH,La Chambre de Van Gogh, H/T, 57.5*74cm 황색 그리스도가 있는 화가의 자화상 폴 고갱 ..

1번 코드 동물병원 24시 밥 먹이는 시간 지킬 것 길고양이 주사 맞히기 눈 아픈 동물 목에 깔때기 씌우기 매일 목욕 시킬 것 이름없는 애들 이름 짓지 말기 더보기 결과 개선방향 우선 스타일에 클래스 지정해줄 때 가능한 자세하게 깊은 부모요소부터 적는 것이 좋을 것 같다. 따라서 좀 더 명시성을 키워서 오류를 피하도록 하이퍼링크 태그를 a태그를 사용해 추가하면 좋을 것 같다. 궂이 Height 지정없이 시도해 볼 수 있을 것 같다. 2번 HTML 코드 호랑이를 주제로 한 민화 그림의 작가 그림의 시대 그림의 재료 그림의 주인공 그림의 활용 승운용호도 사람 이름 같기도 한 이 그림을 처음 보았을 때 티셔츠에 새길 그림을 일러스트레이터로 작업 중이었다. 비록 그림을 보며 원본대로 그려내는 작업이었지만 즐거웠..

Position을 사용하면 문서상 요소를 자유롭게 배치가 가능하다. 쉽게 말해 relative를 쓰면 형제 요소들한테 영향이 갈 수 있다. absolute 는 반드시 조상요소에 position이 있어야 그 요소를 기준으로 움직일 수 있다. 없다면 전체 뷰포트를 기준으로 움직인다. /* 텍스트 중앙 정렬 */ /* 1번 */ /* text-align: center; */ /* 2번 */ /* line-height: 100px; 글자 높이를 박스크기랑 맞추기 */ /* 3번 */ display: flex; justify-content: center; align-items: center; 그 외 텍스트 중앙 정렬 하는 방법들. ㅡ fixed는 언제나 화면전체 기준으로 움직인다. fixed와 absolute를 ..

명령어들 기능을 이용해서 배경화면을 지정할 수있다. url을 사용해서 외부 사진을 불러오거나 배경 색깔을 지정해 꾸밀 수 있다. 코드 예제 참조 이미지를 넣기 위해서는 박스 코드 안에 액자코드 를 만드는 작업이 우선 필요하다. html에서 마크업을 해준뒤 아래 코드를 참고하면 된다. 코드 예제 참조 background attachment 위 코드를 사용하면 스크롤을 움직여도 fix된 배경화면을 확인 할 수 있다. 중요하게 보아야 할 점은 background: url('') no-repeat fixed center/cover 에서 center 부분은 위치를 cover 부분은 꽉채울건지 아니면 contain으로 붙일건지를 정하게 된다. 입력 순서를 지켜야한다. Float (박스띄우기) 좌우 수평배치가 필요할..

폰트 사용법. 예제 코드 폰트는 font-family : 후보 1 , 후보2 , 후보 3 , 후보4. 1번이 먼저고 맨 마지막 후보 폰트 뒤에 또는 폰트 뒤에 계열 serif 등등 써줘야 한다.

상속(inherit) 상속이란 부모요소에 적용한 스타일이 후손요소들에게까지 영향을 주는 특성을 말한다. 모든 속성들이 상속되는 것이 아니다. 상속이 적용되는 속성들 1. font 관련 속성: font-size, font-weight, font-style, line-height, font-family, color 2. text 관련 속성: text-align, text-indent, text-decoration, letter-spacing, opacity 예시 코드 그러니까 상속에 되면 자식요소들에 다 상속이 된다. 각각 스타일링이 필요하면 상속을 통해 전체설정하고 자식요소를 따로 설정해서 설정하는 식으로 하면 된다. 우선순위(명시도) 란? 각 속성에 따라 점수가 다르다. 그것에 따라 우선 적용이 된다. ..