본문 바로가기

분류 전체보기

(96)
[JS-자바스크립트]2.기본 (변수, 데이터타입, 연산자, 기타-메소드,제어할태그선택) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ [1]변수 -사용하는 이유: 중복으로 선언해주고, 변할때 그것만 변경 (1)선언 var 변수명; (변수명은 한눈에 알아볼수있겠금 하는게 좋음) (변수명은 “저장공간” 개념) (2)값표시 Var 변수명 = 값; ________________________________________________________________________ [2]데이터 타입 1.undefined (값의 유형이 정해지지 않은상태) 값도 없고, 유형도 정해지지 않았음 > 결과에 “undefied”라고 표시됨 밑에는 값이 있긴하지만, 유형이 정해지지는 않았음 > 결과에 “10”이라고 표시됨 2.숫자형(number), 문자형(string), 논리형(b..
[JS-자바스크립트]1.기본개념 (script태그 / 이벤트(onclick) / 콘솔) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@1강@@@@@@@@ 1.수업소개 - 사용자와 상호작용하기 위해 나온 언어 @@@@@@@@2강@@@@@@@@ 2.수업목적 -야간모드 주간모드 기능을 만들어볼 예정 (버튼으로 배경색 변경) @@@@@@@@3강~5강@@@@@@@@ 3.HTML과 JS의 만남 (Script 태그, 이벤트, 콘솔) [1]script태그 (1)기본개념 - 이제부터 자바스크립트 시작합니다. Ex) >>>hello 표시됨 (2)html과 차이 1)html (정적임) 1+1 >>>>> 1+1로 표시됨 2)js (동적임) >>>> 2로 표시됨 [2]이벤트 (1)onclick 이벤트 (속성) - onclick으로 클릭하면 > alert창 생성 (2..
[CSS]5.코드 재사용 (CSS공통파일 > 중복제거) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@14강@@@@@@ css코드의 재사용 [1]css코드 재사용 지금까지 만든 코드 다른페이지들에도 모두 적용시키려면 1번)페이지마다 모두 복붙 (만약 페이지가 1만개 라면????) 2번)css파일을 별도로 만들어서 붙여넣기 > link태그 사용
[CSS]4.미디어쿼리 (media) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@12강~13강@@@@@@ 미디어쿼리 소개 및 써먹기 [1]미디어 쿼리 기본 - 화면의 크기에 따라 반응형 최적화 되는 디자인 (1)div태그를 어쩔 때 보이고, 어쩔때 안보이도록 하고싶다면 1)개발자도구에서 화면의 크기 확인 2)screen width > 800px 이때 div태그를 display:none;으로 하고싶음 -min(최소) 과 max(최대) 개념 Ex)max-width:800px >>> 800피셀보다 작을 때 [2]미디어쿼리 사용해보기 (1)800px보다 작을 때 아티클 아래로 내리기 (@media부터 )
[CSS]3.그리드(grid) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@10강~11강@@@@@@ 그리드 소개 및 써먹기 [1]그리드 기본 (가장 최신 굳굳) “실습에서 본문 내용을 오른쪽으로 배치시키기 위함” (1)div 태그 -아무런 의미가 없고, 단지 디자인을 위한 태그 (기본적으로 블록레벨 element) (2)span 태그 - div와 동일한데 인라인 element임 (3)grid 속성 Ex) display:grid; Grid-template-columns: 150px 1fr; Cf)fr 화면전체에서 어느정도 사용할지. 아래 예시에서 navagation은 105px, article은 1fr 만약 2fr 1fr하면 > navagation은 3분의2, article은 3분의1을..
[CSS]2.박스모델 @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@8강~9강@@@@@ 박스모델 [1]박스모델 1. 태그 영역 구분 (전체영역 vs 내영역) (1) block level element(태그) - 전체 블록을 사용하는 태그 (2) inline element - 자기 자신의 부피만큼 사용하는 태그 예시)h1태그는 블록라벨, a태그는 인라인 (3) display -블록레벨이지만 인라인으로 변경해 사용하는 방법 Cf)display:none; 으로 코딩하면 해당 태그 자체가 사라짐 >>>위에 Border-width:5px; border-color:red; border-style:solid;이거를 간단하게 Border:5px solid red; 이렇게 사용도 가능 2. 박스..
[CSS]1.CSS기본 (속성, 선택자, class, id, 중복/자손/자식/일반/인접 선택자) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@@@@2강@@@@@ CSS가 등장하기 전의 상황 [1]HTML로 꾸미기 시작 태그 등 내용 >>>html은 정보전달인데 디자인이 들어가면서 일관성이 없음, 또한 몇만개의 태그를 모두 바꿔야한다면 너무 노가다..아니 불가한 작업이됨… >>>그래서 지금은 디자인할 때 html안쓰고 새롭게 CSS언어 만들어서 꾸밈 @@@@@@@@3~7강@@@@@ CSS등장, 기본문법, 혁명적변화,속성,선택자,class,id [2]기본문법 1. CSS 사용방법 2가지 (1) 따로 태그생성 >>>여러 태그에 디자인 줄 때 (2)html의 속성으로 활용 내용 >>>1개 html태그에만 디자인 줄 때 2. 선택자와 속성 예시) >>> a태그에 ..
[HTML]3.활용 (동영상삽입,댓글기능,채팅기능) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@30강~35강@@@@@ 부록 [1]동영상 삽입 -유뷰브 소스 (iframe 태그)내거에 복붙해서 영상사용 [2]댓글 기능 추가 -디스커스 사이트활용 https://disqus.com/ 1)your sites(왼쪽 상단) > new > 웹사이트이름,카테고리 지정 > 크리에이트 사이트 > 렛츠겟스타트 >인스톨 디스커스 > I don’t…클릭 > 상단 코드 복사 > 웹사이트 body하단에 붙여넣기 2)url을 서버를 통해서 열어야함 (로컬호스트 IP index.php 열어야함 > 그럼 댓글기능 생김 [3]채팅 기능 추가 -tawk 사이트 활용 https://www.tawk.to/ 1)로그인 > 왼쪽 관리자(톱니바퀴)클릭 ..
[HTML]1.기본 (실습환경 ATOM, 깃허브, 아파치) @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ [1]ATOM - 코드 편집기 @@@@@5강@@@@@실습환경 준비 1.atom설치 2.atom인스톨 3.html폴더 (바탕화면이든 아무데나)만들기 4.atom에서 open folder로 html폴더 열기 5.파일 생성 ( “아무이름”.html) ( 확장자가 html) 6.브라우저에서 컨트롤+o > 열기 > 해당 파일 열기 7.atom에서 작업하고 > 브라우저 새로고침하면 작업한거 반영됨 @@@@@16강@@@@@ 원시웹 [1]원시웹 (1)인터넷 > 웹 (인터넷이 큰 범위) -인터넷은 1960년대 핵전쟁 이후 통신마비 대비해 보완하면서 발전 -웹은 1990년대 스위스에서 생성 (팀버너스리) (info.cern.ch 에서 웹이시작..
[HTML] 2.태그 및 속성으로 사이트 완성 @@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@ @@@@@html vs css 기본구조@@@@ @html 1.기본구조 컨텐츠 ex) 방문해주셔서 감사합니다 방문해주셔서 감사합니다 전송버튼 2. id, class 식별 콘텐츠 콘텐츠 @css 1.기본구조 선택자 {속성:속성값; 속성:속성값;} ex) h1 {color:red; font-size:12px;} 자손: div p {color:red; font-size:12px;} 자식: div > p {color:red; font-size:12px;} 일반형제: div ~ p {color:red; font-size:12px;} 인접형제: div + p {color:red; font-size:12px;} 2. id, class 식별..