본문 바로가기

전체 글26

css 선택자 기본 -css 선택자 개요 css는 html문서의 스타일을 꾸미는 데에 사용됩니다. 글자의 크기, 스타일, 색상 부터 요소의 너비, 높이, 위치 등 여러가지 스타일을 줄 수 있습니다. 또한 애니메이션과 반응형 디자인, 자바스크립트와의 상호작용도 가능합니다. 주로 태그이름, 클래스와 아이디 등으로 요소를 선택해서 한번에 여러개의 요소에 스타일을 부여하게 됩니다. 이 때 클래스와 아이디 뿐만 아니라, 여러 선택자가 있고 우선순위도 존재합니다. css 선택자로 html 요소를 선택하고, 뒤에{스타일 줄 내용;} 원하는 요소에 대한 스타일 내용을 쓰는 데 목적이 있습니다. -css 선택자 우선순위 우선순위는 일반적으로 css 문서의 아래로 갈 수록 우선순위가 생깁니다. 또한 선택자를 구체적으로 쓸 수록 우선순위가 높.. 2021. 8. 20.
html 태그 자주 쓰이는 태그 순위 -html 태그 어떤걸 주로 쓸까? advancedwebranking닷컴에서 매긴 자주 사용되는 태그 순위입니다. 아래로 갈 수록 덜 쓰이는 태그지만 순위에 들었다는 것만으로도 전세계 사람들이 가장 많이 쓰는 html 태그 종류 라고 할 수 있습니다. html 문서의 최상위 부모이자 태그입니다. html 태그 중에 가장 많이 쓰일 수 밖에 없겠죠? html 문서의 제목, 링크, 메타데이터 등을 포함하고 있습니다. 문서의 기본 정도라고 할 수 있습니다. 문서의 콘텐츠를 담은 영역입니다. 콘텐츠를 담는 태그이니 위의 태그들과 마찬가지로 필수적인 태그입니다. 문서의 제목을 나타내며, 브라우저 창에 나타납니다. 해당 문서에 대한 메타데이터로 head태그 안에 속해 있습니다. 문자셋이 대표적입니다. 요소를 담을 .. 2021. 8. 19.
css inline, block, inline-block element -인라인 엘리먼트 , , 과 같은 태그는 css inline element입니다. 주로 박스 안의 요소로 들어가게 됩니다. 다른 엘리먼트에 비해 정렬이 까다롭습니다. 메모리에 열 단위로 저장됩니다. 내용이 담긴 크기만큼 영역을 차지합니다. 줄바꿈이 없고, 문장 중간에 들어갈 수 있습니다. 내용물의 크기만큼 영역을 점유하기 때문에, 임의로 너비나 높이를 설정할 수 없습니다. 패딩, 마진도 마찬가지입니다. 따라서 블록이나 인라인 블록 엘리먼트로 성질을 변경하거나 다른 성질을 가진 부모 안에 넣어서 사용하는 경우가 많습니다. a태그나 img, span과 같은 css inline 태그를 div나 p같은 태그안에 넣어서 사용합니다. -블록 엘리먼트 , , , , 과 같은 태그는 block element 입니다. .. 2021. 8. 19.
vscode 단축키 및 환경설정 vscode live server, FTP, ftp simple, Emmet, Beautify -vscode 단축키 vscode로 효율적인 마크업을 할 수 있는 단축키( emmet )를 안내해드리겠습니다. 따로 설정하지 않아도 vscode 단축키는 기본으로 설정되어 있습니다. 선택한 영역을 주석 처리합니다: 컨트롤+/ 들여쓰기와 내어쓰기를 합니다: 탭, 시프트+탭 HTML DTD 기본양식을 빠르게 입력합니다: ! 누르고 탭 빠르게 태그를 생성합니다: p, a, img등의 태그 이름 입력 후 탭 선택된 영역을 위 또는 아래로 복사해줍니다: 시프트+알트+방향키 여러 열을 한꺼번에 수정할 수 있습니다: 시프트+알트+드래그 또는 마우스 휠 드래그 부모 자식 태그를 한번에 만들 수 있습니다: ul>li*3과 같이 부모 자식 될 태그를 입력 후 탭 클래스, 아이디와 함께 태그를 생성합니다: div.mydiv.. 2021. 8. 19.
Phaser 기본세팅과 플랫포머 튜토리얼 0. Phaser 기본 세팅 먼저 에디터와 개인 웹서버를 설치합니다. 웹서버는 비트나미, 몽구스 등이 있지만 개인적으로 VS 라이브 서버가 편했습니다. (비주얼 스튜디오 코드(에디터)와 확장 기능인 라이브 서버+자동 저장 기능을 이용하면 매번 저장, 새로고침을 누를 필요가 없습니다. ) 그러고 나서 Phaser 홈페이지에 가서 최신 버전의 cdn 주소를 확인합니다. 아래 기본 포맷 헤드 부분에서 글 작성기준 최신 버전인 3.11 버전 cdn주소를 확인할 수 있습니다. 1. Phaser 기본 포맷 platformer body { margin: 0; } var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, c.. 2021. 2. 26.
생활코딩_WEB2 JS요약 자바스크립트는 웹안에서 사용자와 상호작용할 수 있게 한다. 자바스크립트는 html문서 내에서 div는 제목도 아니고 아무의미가 없고, 단지 css나 js로 대상을 선택하기 위한 태그다. 자동 줄바꿈이 된다. span도 같은 역할을 하지만 자동 줄바꿈이 없다. 상황에 따라서 쓰면 된다. class(.클래스명으로 사용)는 그룹핑, id(#아이디명으로 사용)는 타겟팅을 위해 사용한다. id선택자에 대한 명령이 최우선으로 작동한다. 그다음은 class선택자, 그다음이 span선택자의 내용이 실행된다. 웹에서 동작하는 버튼과 같은 요소들에게 id를 부여한다음, 조건문으로 id 벨류값에 따라 style을 바꾸는 등의 상호작용을 할 수 있다. 반복되거나, 긴 문장을 id나 변수로 축약할 수 있다. 중복을 없애고 간결.. 2021. 2. 16.
생활코딩_WEB1 요약 프로젝트 중심으로 학습한 것을 증명해서 에너지를 얻는 순환. 공부할것이 많을수록 창작의 근원인 기초를 중요하게 대한다. 프리퀀시(빈도수)에 의해서 자주쓰이는 통계를 중심으로 공부한다. 최소한으로 배워서 최대한으로 써먹는다. 문법을 외우기 보다는 지식을 이용해서 프로그래밍의 원리에 초점을 두고 학습하자. -태그 : 제목. 1~6까지 있다. : 볼드 : 밑줄 : 줄바꿈. 여닫기가 필요없음 : 단락 img: 이미지+속성 : 링크. 하이퍼텍스트. 앵커(닻)을 내려 정박한다는 시적의미. 사용방법링크 붙일 텍스트 target="_blank" 는 새로운 창에서 열게 한다. input type="checkbox" 체크박스를 삽입한다. -부모자식관계 li는 ul, ol의 자식이다. ol은 순서가 있는 리스트로 숫자가 자.. 2021. 2. 15.
생활코딩_데이터베이스 이론 3강 분량 요약 -데이터베이스: 정보를 관리하는 전문 애플리케이션. -파일과 데이터베이스의 차이. 파일은 기본적이고 원시적인 형태의 데이터 관리수단. 장점은 어느시스템에서나 쓸수있고, 무언가를 설치할 필요없이 심플하다. 데이터베이스는 공부하고, 무언가를 설치해야할 필요가 있다. 장점은 안전하다. 나의 정보를 무단으로 보거나, 시스템이 고장났을때 백업기능도 있다. 인덱스(색인)기능으로 빠르다. SQL같은 프로그램을 이용해서 프로그래밍적 제어가 가능하다. -보편적이고 성공적인 데이터베이스 모델은 관계형 데이터베이스다. 제품으로는 MySQL, MSSQL, Oracle등이 있다. 작동방법은 같으며, MariaDB는 특히 같으면서도 발전속도가 빠르다. MySQL은 오픈소스로, 웹의 성장과 함께 성장해왔다. -SQL은 무엇인가? .. 2020. 11. 27.

티스토리툴바