외부파일 console.group var let const use strict 1) 외부파일 js파일을 만들어 놓은 후 html에서 불러올 수 있다. document.write("안녕하세요 "); document.write("연습중"); document.write("제목3") document.write(''); 위 내용을 main.js 파일로 저장한 뒤 html에서 불러오면 body부분에 나타나게 된다. 또한 css style도 적용 가능하다. 2) console.group console.group을 사용해 여러 개의 console.log를 그룹화할 수 있다. console.log('안녕하세요'); console.group('메세지1'); console.log('안녕하세요1'); console.log('..

console document alert 변수 1) console javascript 첫 수업이라 기초적인 몇 가지만 구현해 보았다. console.log('test'); console.log('안녕'); [Running] node "c:\Users\L\Desktop\dev\Becoding.web.docs\02_javascript기본\8일차\01.js" test 안녕 [Done] exited with code=0 in 0.095 seconds console.log 코드를 실행시켰을 때 출력되는 내용이다. 2) document script를 html의 head, body 안에 어디든 넣을 수 있다. *처리 속도 향상을 위해 주로 body 맨 끝에 넣는다고 배웠다. 한 줄 주석을 달땐 똑같이 Ctrl+/ 두..

내부/외부링크 visibility float flex justify-content align-content align-items 1) 내부/외부링크 a 를 사용해 페이지 내 혹은 다른 페이지로 이동하는 연결 링크를 만들 수 있다. 제목1 제목2 제목3 제목4 타이틀1 타이틀2 타이틀3 타이틀4 위와 같이 타이틀이 적힌 box 4개를 각각 제목 1,2,3,4에 링크가 걸리도록 만들어 제목1을 누르면 box1이 있는 타이틀1로 화면이 이동하게 된다. 페이지 내부에서 뿐만 아니라 다른 페이지로도 링크를 연결할 수 있다. 제목1 제목2 제목3 제목4 2) visibility 화면에는 존재하나 보이지 않게 하고 싶을때 사용한다. *주로 장애인들을 위해 만들어 놓은 본문바로가기/메뉴바로가기에 쓰인다고 배웠다. .b..

background 다중 이미지 선택자(first-child, last-child, nth-child(), first-of-type) ::before ,::after vertical-align w00p=width: 100%; h100p=height: 100% 1) background 다중 이미지 background 한 줄만으로 여러 사진을 각각 다른 위치에 불러올 수 있다. 부모 박스의 크기가 서로 다른 배경에 총 3가지 이미지를 조합해 만들어 보았다. background: url(images/img1.png) 0 0 no-repeat, url(images/img3.png) right 0 no-repeat, url(images/img2.png) 0 0 repeat-x; img1은 0 0 위치에서 부터 반..

구글 폰트 border-radius box-shadow/text-shadow overflow text-overflow background text-align: center;=tac width=w height=h border: 1px solid #000;=bd 1) 구글 폰트 구글 폰트를 css 파일에 적용시키는 방법을 배웠다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 마음에 드는 폰트를 고른 후 우측에 + 버튼을 누른다. (옆 숫자는 font-weight) 여러 폰트를 한 번에 받을 수 있다. @import를 선택한 뒤 ..

다중 클래스 컬러 단위 line-height letter-spacing white-space word-break text-transform display 1) 다중 클래스 하나의 요소에 여러 가지 클래스를 적용시킬 수 있다. 예를 들어 아래와 같이 몇 가지 조건을 통일시킨 박스를 각각 다른 조건으로 만들고 싶을 때 .box { border: 2px solid #000; height: 100px; margin: 15px auto; text-align: center; font-size: 25px; } 다음과 같이 알아보기 쉽게 여러 클래스를 만들어 두고 .red {background-color: red;} .pink {background-color: pink;} .green {background-color:..

.css 외부 스타일 class margin padding border width height 1) .css 외부 스타일 head 부분에 직접 css를 코딩할 수 있지만, 자주 사용하는 css파일을 따로 만들어서 head에서 링크를 걸 수 있다. div {background-color: aqua;} div h2 {font-size: 50px; background-color: coral;} div h2 ul {} div h2 ul li {background-color: cornflowerblue;} div+p{background-color: chartreuse;} p {background-color: navajowhite;} 파일 이름을 style.css로 저장 한 후 html에서 링크하면 똑같이 적용이 ..

reset.css background-color color font-siza 1) reset.css 우선 reset.css 코드를 적용시켜 태그들이 갖고 있는 기본 설정을 초기화시킨 뒤 원하는 대로 수정을 한다. css 폴더를 만든 뒤 reset.css 파일을 넣는다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ..

img header nav section main footer article aside ctrl+b alt+l+o ctrl+/ 1) img img-이미지를 불러온다. src 부분에 이미지 파일의 경로를 찾아 넣어야 한다. ./ : 현재 폴더 ../ : 상위 폴더 / : 최상위 폴더 width : 너비 height : 높이 둘 다 px 단위 사용 2) header, nav, section, main, footer header : 사이트 상단 머리 부분 주로 로고, 메뉴, 로그인, 회원가입 등 nav : 중요 메뉴 section : 주제가 동일한 페이지 또는 컨텐츠 영역 ( h1~h6 제목이 반드시 있어야 한다.) main : 실제 컨텐츠 영역 (본문) footer : 하단, 하단 로고, 패밀리 사이트, 정..