본문 바로가기

Programming310

[Javascript] html 파일에 자바스크립트 삽입하기 지난 포스트에서 hello, world를 출력했습니다. 출력하는 예제에서는 부분에 파일이 여러개로 나뉘지 않기 때문에 문서구조가 간단해집니다. 그러나 스크립트 내용이 길어 지면 오히려 가독성을 방해하고 복잡한 구조를 형성하기 때문에 한 줄의 간단한 코드가 아닌이상에야 사용하지 않습니다. 그래서 대부분 외부파일을 임포트하는 방식을 선호하고 권장합니다. 2. 외부파일을 임포트하기 자바스크립트 파일을 html문서 외부에 두고 임포트하여 사용하는 방식입니다. console.log("Hello, World!"); src속성을 사용하는 순간 태그 사이의 자바스크립트 코드는 무시되므로 두 가지를 혼용할 수는 없습니다. 2021. 1. 25.
[JavaScript] Hello World! Hello World! 이미 언어를 배운적이 있다면 굉장히 익숙할 문장입니다. 혹은 배우지 않았더라도 코딩 교육이 장려되기에 어디에선가 한번쯤은 패러디로 들어봤을 문장입니다. 그렇기에 여느 책, 강의, 문서와 마찬가지로 "Hello, World!"문장으로 서두를 띄우려고 합니다. +자바스크립트에 대한 내용은 html을 어느정도(기초) 알고있다는 가정하에 진행됩니다. 1. 코드 작성 준비 우선 VSCode를 켜고 빈 html 파일을 생성합니다.(확장자가 .html) 그다음 html을 치면 다음과 같은 자동완성이 보이는데 그중 html:5를 선택합니다. 그러면 이렇게 기본 구조가 완성된 html 파일을 자동으로 작성해 줍니다. 혹은 아래 내용을 복사해주세요. 이렇게 되면 자바스크립트를 사용하기 위한 기초 h.. 2021. 1. 25.
[CSS] 콘텐츠 영역 설정하기 지난 포스트에서 마진과 패딩을 다뤘는데 이번엔 콘텐츠 영역을 설정하는 것을 다루겠습니다. 1. 콘텐츠 크기 지정하기 콘텐츠의 크기는 다음의 두가지 속성으로 조절합니다. width: 속성 값; height: 속성 값; 말 그대로 width는 콘텐츠의 너비, height는 콘텐츠의 높이입니다. 두 속성의 속성 값은 아래와 같습니다. 속성 값 효과 크기 너비/높이를 단위와 수치로 직접 지정 백분율 콘텐츠를 포함하는 부모요소의 크기를 기준으로 백분율로 지정 auto 너비와 높이가 콘텐츠의 양(길이, 크기 등)에 따라 자동 지정 +1. 실제 콘텐츠의 크기 방금과 같은 방법으로 너비와 높이를 지정했더라도 실제 콘텐츠의 크기는 위에서 지정한 값이 아닙니다. 왜냐하면 실제로 요소를 웹에 배치할때 지난 포스트에서 배운 .. 2021. 1. 25.
[CSS] 마진(margin)과 패딩(padding) 웹에서 마진과 패딩을 여백을 의미합니다. 마진과 패딩을 이용하면 콘텐츠를 원하는 곳에 배치할 수 있기에 활용도가 높습니다. 들어가기전에 마진과 패딩을 한눈에 볼 수 있게 표현하면 다음과 같습니다. 콘텐츠와 패딩을 묶어서 하나의 요소로 보고, 요소와 마진 사이의 경계를 테두리(border)라고 합니다. 1. 마진 (margin) 마진은 현재 요소 주위의 여백입니다. 마진을 조절하여 요소와 요소사이의 간격을 조절할 수 있습니다. 마진은 다음과 같은 속성으로 조절합니다. 마진 속성: 속성 값; ▽ margin-top: 상단의 여백 크기 지정 ▽ margin-bottom: 하단의 여백 크기 지정 ▽ margin-left: 좌측의 여백 크기 지정 ▽ margin-right: 우측의 여백 크기 지정 ▽ margin.. 2021. 1. 25.
[Javascript] 에디터 설치하기 자바스크립트를 시작하기전에 다른언어들과 마찬가지로 에디터를 설치하려고합니다. 자바스크립트의 에디터로는 노트패드, 에디트플러스, 아톰, 서브라임 텍스트, 비주얼 스튜디오 코드, 웹스톰 등이 있습니다. 저는 현재 학생 라이선스를 통해 웹스톰을 사용 중 입니다. 그러나 학생라이선스가 없거나 미구매 하셨다면 웹스톰은 배우는 과정에서 구매해서 쓰기엔 조금 부담스러운 가격을 가지고 있습니다. 그렇기에 비주얼 스튜디오 코드 환경에서 자바스크립트를 실행하시는 것을 추천드립니다. 비주얼 스튜디오 코드는 상대적으로 가볍고 훌륭한 확장성을 가지고 있습니다. 아래 사이트에서 다운로드 하시면 됩니다. code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Vis.. 2021. 1. 22.
[JavaScript] 개발자 도구 자바스크립트를 학습하다보면 개발자 도구를 꽤 자주 들여다보게 됩니다. 그래서 자바스크립트에 들어가기 이전에 이 도구를 간단히 알아보고 넘어가겠습니다. 크롬을 기준으로 "F12"를 누르시면 됩니다. 그러면 이런창이 나오는데 이 창이 바로 개발자 도구 입니다. 상단에 보면 Console, Elements, Sources..등이 있습니다. 이 탭들에서 제가 공부하면서 사용하고 들여다보는 횟수가 빈번한 탭 세 가지를 간략히 설명하겠습니다. 1. Console 콘솔 탭은 코드의 실행 로그와 코드 실행의 기능을 가지고 있는 창입니다. 나중에 배울 console.log()의 내용을 확인하거나 특정 명령을 통해 요소 추출, 오류나 경고 메세지의 확인을 할 수 있습니다. 그렇기 때문에 결과 창의 이 부분을 확인하여 오류.. 2021. 1. 22.
300x250

티스토리툴바