본문 바로가기
반응형

CS 지식96

JS 기초 : 난수 생성하기 - 숫자 맞추기 게임 실습 예) 1~100 사이의 난수 생성 Math.random()*100 +1 하시면 1.0~100.0까지의 실수를 반환하겠죠? 소수점을 자르고 정수로 만들고 싶으시다면 , ParseInt()나 Math.floor()를 쓰시면 되겠습니다! Math.floor(Math.random()*100 +1); 자바스크립트(JS)는 객체 기반의 스크립트 프로그래밍 언어로, 웹 브라우저 내에서 컴파일 돼서 사용됩니다.(node.js 제외) 일단 지금은 브라우저 없이 실습을 할 수 없으니까 html파일과 css파일을 미리 다운 받고, JS를 직접 작성해봅시다. HTML에서 외부 CSS , JS 파일을 참조하는 법 html head태그안에 css는 link , JS는 script태그를 만듭니다. CSS는 herf , JS는 sr.. 2022. 4. 15.
[html/CSS] div 가운데 정렬 하는법 자식 태그를 가운데 정렬하기 위해서는 부모와 자식 둘다 CSS 설정을 해야합니다. 우선 앞서 가시화 속성인 display 속성을 먼저 알아야하는데요, display 속성에는 block과 inline-block 속성이 있습니다. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. ex) div inline-block display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. ex) span 여러 엘리멘트를 한 부모안에 정렬하고 싶으면 inline-block을 써야겠죠?? 부모태그를 outer , 자식(정렬해야하는 태그)를 inner로 지정하고 할게요.. 2022. 4. 15.
[html/CSS] position , overflow 속성으로 레이아웃 배치 , float 사용시 주의사항 CSS3 position 속성 top, left, right, bottom 속성과 함께 사용합니다. 상대적 위치 좌표 사용 static : 기본값. 태그들을 위에서 아래로 차례대로 배치. float -> 옆으로 배치 relative : static으로 초기 위치가 정해진 곳에서 상하좌우로 추가 이동 절대적 위치 좌표 사용 absolute : 절대적 위치 '좌표' fixed : 화면을 기준으로 화면 상의 절대적 위치 좌표 설정 absolute 사용 시 주의사항 절대적인 좌표를 이용한 것이기 때문에 부모블럭과 겹치게 된다. => 부모태그가 영역을 차지하지 않는다. 해결책 부모에게 height속성을 입력한다. => 부모 태그가 영역을 차지합니다. 부모의 position속성을 relative 키워드로 적용한다... 2022. 4. 14.
[html/CSS] CSS3로 웹페이지 스타일 설정하기 결과 스크린샷! 첨부한 html 파일을 크롬브라우저로 열어보세요! 제 첨부파일을 에디터(sublime Text/VScode)로 열어보면 소스코드와 내용 다 볼 수 있습니다. 사진은 html파일과 같은 폴더에 있어야지 보일것입니다.(상대경로로 설정했기 때문!) 상단에 탭바에 있는 html5 , CSS3 , PHP 메뉴 위에 마우스를 올려보세요! 메뉴블럭이 검은색으로 변하고 글자색이 바뀔겁니다. (CSS3 위에 마우스를 올려놓은 상태) 카테고리, 최근 글등 사이드 바도 추가된게 보입니다. 잘봤나용?? CSS style이 없으면 밑에 사진처럼 나오겠죠?? 이 프로젝트는 CSS를 이용한 프로젝트니까 기초는 제 첫 포스트 먼저 보고 오세요!! CSS(Cascading Style Sheets)는 문서의 스타일을 지.. 2022. 4. 10.
HTML 기본 태그 - 사용자 회원 가입 정보 입력받기 예제 html 개발 에디터 -sublime Text (입문자용) - Visual Studio Code - microsoft (프론트엔드 최고의 개발툴) Visual Studio Code으로 코드 작성했고 필요하시면 vscode 개발 환경 세팅 글도 올리겠습니다! 결과! (사진이 아니라 html블럭이니까 조작해보세요!) 2022. 4. 9.