오늘은 웹 개발에 대해 배운 하루였습니다.
단축키(VSCODE)
! 만 누르고 엔터를 누르면 HTML의 전체 틀이 완성됩니다.
ctrl + n 을 누르면 새로운 파일이 만들어집니다.
ctrl + s 는 파일 저장인데 이때 확장자를 설정해주면 해당 파일이 생성됩니다.
ctrl + alt + n을 사용하면 js파일 출력이 가능합니다.
alt + shift + f 를 사용하면 자동 줄바꿈을 해줍니다.
HTML
HTML은 저번 블로그 작성에도 해놨기 때문에 해당 링크를 첨부해놓겠습니다.
HTML정리1 - https://ggoalbeom97.tistory.com/2
HTML정리2 - https://ggoalbeom97.tistory.com/4
VSCODE를 사용시에 Live Preview를 설치하면 실시간으로 바로 수정된 웹 화면을 볼 수 있습니다.
그냥 div를 사용해서 레이아웃을 분류했을때 주석으로 영역이 끝나는 것을 알려줬었는데 시맨틱 태그를 이용하면 굳이 주석으로 영역이 끝나는 것을 분류하지 않아도 됩니다.
하위 태그를 한번에 생성할 떄 >를 사용하면 쉽게 만들 수 있습니다. 예를들면 p > span을 사용하면 p태그 안에 span태그가 생성됩니다. 만약 +를 통해 생성하면 동일한 level에서 생성됩니다. 괄호도 사용할 수 있는데 (p>span) + (p>span)을 사용해주면 p태그안에 span태그의 구조를 같은 level에 2개 생성합니다. 괄호를 통해 우선순위 생성이 가능합니다.
input:email 을 사용하게 되면 input 태그의 타입이 email로 된 태그가 생성이 됩니다. 만약 : 대신 #으로 하게 되면 id가 email인 input 태그를 만들어주고 .인 경우에는 class가 email인 태그가 만들어집니다.
div>span.data*3을 사용하면 elment 갯수가 3개인 div 하위에 class가 data인 span태그가 3개 만들어집니다.
<div>
<span class="data"></sapn>
<span class="data"></sapn>
<span class="data"></sapn>
</div>만약 타입에 순서를 부여해주고 싶다면
div>span.data$*3을 사용해주면 됩니다.
<div>
<span class="data1"></sapn>
<span class="data2"></sapn>
<span class="data3"></sapn>
</div>만약 텍스트까지 넣어서 만들주고 싶다면 div>span.data${데이터$@3}*3을 사용해주면
<div>
<span class="data1">데이터3</sapn>
<span class="data2">데이터4</sapn>
<span class="data3">데이터5</sapn>
</div>@3을 사용해서 3부터 작성이 됩니다.
a[href=https://naver.com]{네이버이동} 이라고 작성을 해주면
<a href="https://naver.com">네이버이동</a>이 작성됩니다
header>nav.main-nav>ul>li.item${목록$}*5 을 작성하면
<header>
<nav class="main-nav">
<ul>
<li class="item1">목록1</li>
<li class="item2">목록2</li>
<li class="item3">목록3</li>
<li class="item4">목록4</li>
<li class="item5">목록5</li>
</ul>
</nav>
</header>자동 완성이됩니다. 자동완성방법은 ctrl+스페이스바+엔터를 누르면 됩니다.
웹 폰트사용하는 방법은 다운로드 받는 방식과 2가지 방법이 있습니다
원하는 폰트를 다운 받아 작업 폴더에 넣은 후
<style>
@font-face {
font-family: 'D2Coding';
src: url('font/D2Coding.ttc');
}
html, body{
font-family: 'D2Coding', sans-serif;
}
</style>header에 이런식으로 폰트를 적용해줍니다. 그러면 html과 body에 D2Coding이 적요이 됩니다. 단 영문에만 적용이 되기 때문에 한글같은 경우는 뒤에 추가로 작성한 sans-serif가 적용이 됩니다.
웹폰트 설정은 아래와 같습니다.
https://fonts.google.com/ 사이트로 이동해서 원하는 폰트를 고릅니다. 후에 원하는 폰트를 전부 추가해준 후에 link를 복사하면 됩니다.
그리고 link 태그를 통해 붙여넣기를 해주면 됩니다. 물론 여러개의 폰트를 한번에 가져올 수 있습니다.
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
html, body{
font-family: 'Roboto,'D2Coding', sans-serif;
}이런식으로 작성하면 저는 Roboto 폰트를 가져와서 우선 Roboto를 적용하고 다음에 적용안된 폰트는 D2Coding 또 적용안된 글꼴에 대해서는 sans-serif를 적용합니다.
ngrok사용법
이제 개인 컴퓨터가 아니라 외부 컴퓨터 혹은 친구에게 보여주고 싶을 때 ngrok을 사용하면 외부 접속을 허용할 수 있습니다.
https://ngrok.com/ 해당 사이트로 접속후에 회원가입을 진행하면 됩니다. 이메일 인증이 있으니 이메일 인증을 해야만 사용이 가능합니다. 인증을 진행하지 않으면 사용이 불가능합니다. 에러가 떠서 많이 놀랐습니다.
다운받은 후 압축파일을 풀어주고 Anaconda Prompt을 실행 후 ngrok.exe가 있는 곳으로 이동을 진행하고 페이지에 있는 명령어를 진행하면 됩니다.
후에 이제 ngrok http file://C:\Users\User\Desktop\web 제가 작업을 진행한 폴더의 위치를 이런식으로 표기해주면 이제 외부 컴퓨터도 접속이 가능해집니다.
오늘부터 웹 개발을 진행했는데 뭔가 고향으로 돌아온 느낌이였습니다. 항상 프로젝트를 진행할 때 외부 접속을 중요시 여겼는데 외부접속을 바로 배워서 좋았습니다.
※공부하고 있어 다소 틀린점이 있을 수 있습니다. 언제든지 말해주시면 수정하도록 하겠습니다.
※용어에 대해 조금 공부 더 해서 수정하겠습니다.
