프로그래밍 언어/HTML
-
HTML 기초 - 9(完) | Emmet 사용하기프로그래밍 언어/HTML 2020. 5. 21. 14:51
Emmet 사용하기 Emmet 이란 HTML 이나 CSS 를 작성할 때 작성 시간을 줄여주는 확장 기능이다. HTML 문서를 작성할때 그 구조를 짜는데 시간을 들여야지, 작성하는 단순 타자 치는 것에 시간을 들여서는 안 된다. 그렇기에 이 확장 기능을 이용하여 타자 치는 시간을 획기적으로 줄여보자. 드디어 우리가 지금까지 써 왔던 VSCode 의 강력한 기능을 활용해 볼 시간이 되었다. VSCode 에는 Emmet 확장기능이 자동으로 설정되어 있다. 따라서 뭔가 더 설치할 필요도 없이 그냥 사용법만 익혀서 바로 써보면 된다. 생각보다 간단하니 하나씩 차근차근 익혀보자. 기본적인 사용법 위와 같이 VSCode 에서 우리가 그동안 배웠던 태그를 아무거나 하나 타이핑해보자. 사진처럼 저렇게 뭔가 예시 같은 게..
-
HTML 기초 - 8 | DIV 태그와 SPAN 태그프로그래밍 언어/HTML 2020. 5. 19. 00:53
특별한 기능이 없는 태그 우리는 HTML 기초의 마지막 파트로 아무런 기능도 없는 태그 에 대해서 배워볼 것이다. 아무 기능이 없는 태그라고? 아니 그런 걸 굳이 왜 쓰는 거지? 나도 HTML 까지만 공부했을 때 까지는 이해가 안됐다. 하지만 CSS 를 공부하면서 이 태그들의 필요성이 느껴졌다. HTML 이 건물의 뼈대라고 비유한다면, CSS 는 건물의 인테리어라고 볼 수 있다. HTML 의 여러 태그들을 이용해 각각 건물에 필요한 역할을 만들어 내고 CSS 로 꾸미는 것이다. 이때 아무런 기능이 없는 태그들이 건물의 벽면 같은 역할을 한다고 생각하자. 이제 아무런 기능이 없는 태그인 DIV 태그와 SPAN 태그에 대해 알아보자. DIV 태그 DIV 태그는 Division(나누다) 의 약자로 영역을 나누..
-
HTML 기초 - 7 | form 태그프로그래밍 언어/HTML 2020. 5. 18. 01:57
Form 태그 이번 글은 form 에 대해서 알아볼 것이다. form 태그는 백엔드서버에 입력정보를 제출하는 역할을 한다. 우리는 웹페이지의 시각적인 부분인 프런트엔드를 배우고 있기 때문에 이번 글에서는 form 의 기능적인 부분에 대해서는 자세하게 다루지 않을 것이다. 그냥 이런 것도 있구나 하고 넘어가자. 이해를 못하는 게 당연한 파트이다. (추후에 form 태그의 심화적인 내용을 다루는 글도 써보겠다.) form 태그의 형태 일반적인 form 은 위와 같은 형태를 가진다. form 에서 사용할 수 있는 가장 기본적인 속성 몇 가지만 알아보자. action : form을 전송할 서버의 URL을 지정한다. method : form을 서버에 전송할 Http method 를 지정한다. ( GET / POS..
-
HTML 기초 - 6 | 태그의 속성프로그래밍 언어/HTML 2020. 5. 16. 23:08
이번 글에서는 웹페이지에 이미지나 링크 같은걸 달아보기로 했었다. 이때 필요한 태그들은 특이하게도 태그속성이라는 것을 가진다. 태그의 속성에 대해 먼저 알아보자. 태그의 속성 HTML 의 모든 태그는 각자의 속성을 가진다. 이러한 태그의 속성은 미리 정의되어 있는데, 태그 속성에 맞는 값을 입력하면 태그의 특별한 기능을 사용할 수 있다. 위와 같은 형태로 태그의 속성을 사용할 수 있다. tag 에는 태그 이름, attribute 에는 속성, value 에는 값을 넣어주는 형태이다. 각 태그마다 사용할 수 있는 attribute 의 종류가 다르기 때문에 tag 종류를 외우면서 그 태그의 attribute 도 같이 외워주자. 이미지 태그 이미지를 웹페이지에 나타내기 위해 사용하는 img 태그는 여는 태그만 ..
-
HTML 기초 - 5 | 간단한 글 쓰기프로그래밍 언어/HTML 2020. 5. 15. 18:30
이번 글부터는 body 태그에 들어가는 여러 태그들에 대해 알아보자. 처음은 간단하게 웹페이지에 글을 올려보도록 하자. 제목 태그 우선 제목을 달아보자. 제목은 태그를 사용한다. 저기 # 부분에는 1부터 6까지의 숫자를 넣을 수 있다. 한마디로 제목 태그는 6가지의 종류가 있고, 숫자가 작아질수록 제목의 크기가 커진다. 내용 내용 내용 내용 내용 내용 위의 태그 중 한가지를 골라 직접 써 보자. 그리고 안에 내용도 원하는 글을 아무거나 써보자. 위와 같이 웹페이지에 글이 나타난다면 성공이다. 문단 태그 제목을 달았으니 본문도 써보자. 일반적인 문단을 적을땐 태그를 사용한다. 내용 마찬가지로 쓰고 싶은 내용을 태그를 이용해 한번 써보자. 위와 같이 적은 글이 잘 나타난다면 성공이다. 리스트 태그 마지막으로..
-
HTML 기초 - 3 | HTML 의 기본구조와 태그프로그래밍 언어/HTML 2020. 5. 13. 23:30
HTML 태그 HTML 에서 사용하는 태그에 대해서 알아보자. 우선 태그의 생김새부터 알아보자. 태그의 생김새 위와 같은 형태가 태그의 기본적인 생김새이다. tag이름을 '' 와 같은 꺽쇠로 감싸주면 된다. 대부분의 tag는 여는태그와 닫는태그로 이뤄져 있다. (정확한 표현은 아니다. 또한 여는태그만 있는 태그도 있다.) 위와 같은 형태가 여는태그 이다. 위와 같은 형태가 닫는태그 이다. 이렇게 여는태그와 닫는태그 사이에 적고 싶은 내용을 적어주면, 웹페이지는 그 내용을 감싸는 태그를 보고 그 내용의 종류를 이해하고 분류한다. HTML 의 기본 구조 HTML에는 기본적인 구조가 있다. 이렇게가 가장 기본적인 구조라 생각하면 된다. 여러 태그들이 태그와 태그사이에 들어가있는게 보이는가? 이렇게 여는태그와 ..
-
HTML 기초 - 2 | 개발환경 세팅프로그래밍 언어/HTML 2020. 5. 13. 17:56
HTML을 작성하기 위해서는 무엇이 필요할까? 거창한 거 필요 없다. 메모장과 브라우저만 있으면 된다. 진짜로 메모장으로 된다. 메모장 저장 시 파일확장자를 .html 로 저장하자. 그리고 브라우저에서 그 파일을 열어서 확인하면 끝이다. 그럼 진짜 메모장만 써요??? 그건 아니다. 메모장으로도 HTML 작성을 할 수는 있지만, 더 좋은 프로그램이 있다면 굳이 메모장을 쓸 이유는 없다. 우리는 Visual Studio Code 라는 Microsoft의 무료 코드에디터 프로그램을 사용할 것이다. Visual Studio Code https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a c..