Programming/HTML CSS6 VSCode HTML 파일 단축키로 간단하게 실행하기 - 심코딩 오늘은 비쥬얼스튜디오코드 (VSCode)에서 HTML 파일을 단축키 하나로 간단하게 실행하는 법에 대해서 알아보겠습니다.보통 일반적인 방법으로는 해당 파일을 끌어와서 구글 크롬탭에 드래그를 많이들 합니다. 하지만 이렇게 진행할 시 계속해서 수시로 코드를 변경할때에 많이 귀찮으실 겁니다. 딱 단축키 하나로 브라우저를 오픈해주면 얼마나 좋을까요? 이러한 우리의 어려움들은 대부분 비쥬얼스튜디오코드내의 확장프로그램을 통해 극복이 가능합니다. open in browser 설치방법 open in browser 라고 하는 확장프로그램이 위 문제는 간단히 해결해줄 수 있습니다. 해당 확장자를 설치를 하신다음, 파일을 연 후 단축키 Alt + B 를 누르면 바로 실행이 됩니다. 아래를 확인해 주시죠! 오늘은 비쥬얼스튜디.. 2022. 11. 16. HTML CSS 공간분할태그 (div, span) 알아보기 - 심코딩 오늘은 간단한 포스팅을 하나 해보려 한다. 우리가 홈페이지를 만들 때 중간 공간을 분할을 하려면 공간분할태그를 사용을 하여야 한다. 이러한 공간 분할 태그에는 크게 div와 span이 있다. 나도 오늘 공부하기 전까진 뭐가 다른지 몰랐으나 알게되어서 포스팅을 하려한다. div 태그 div 태그는 와 사이 외에도, 그 줄 전체를 모두 해당 태그가 차지를 한다. 이것을 Block이라고 표현을 한다. Block Block Block Block Block 이렇게 코드를 입력 후 실행을 하면 아래와 같이 나오는 것을 볼 수 있다. span 태그 반대로 span 태그는 딱 태그 된 그 영역만 차지를 한다. 이것을 inline 이라고 표현을 한다. 앞서 말한 글자 관련 태그들 (a태그, b태그, i태그 등등) 은 모.. 2022. 9. 15. HTML 입력 양식 태그 알아보기 (input, action) 오늘은 HTML의 입력 양식 태그에 대해 알아보도록 하겠습니다. 일단 입력양식태그라고 하면, 우리가 웹사이트에서 어떠한 값을 입력을 하는 곳을 만드는 것이다. 먼저 이러한 입력양식태그를 만들려면 이라는 form 태그로 영역을 만든다음 그 안에 input 태그를 넣고, type 속성에서 원하는 속성을 지정을 해서 만들 수 있다. form 태그 만들기 먼저 아래와 같이 form 태그를 통해 입력양식태그를 지정할 영역을 만들 수 있다. 이제 이 안에 input 태그를 넣고, type 속성을 통해 원하는 입력양식 태그를 만들 수 있다. input 태그의 type 속성 알아보기. type 속성에는 여러가지가 있다. 아래 표를 살펴보자. text 텍스트 입력 공간 생성 submit 제출 버튼 생성 password .. 2022. 9. 1. HTML CSS 이미지, 오디오, 비디오 넣어보기! 오늘은 html css에서 이미지, 오디오, 비디오를 어떻게 넣는지 알아보겠습니다. 마찬가지로 제가 학습한 내용의 복습겸 공유 입니다. 먼저 이미지를 넣을 때는 img 태그를 사용합니다. 또한 img 태그의 속성 중 하나인 src (source)를 이용하여 특정 이미지를 정할 수 있습니다. src에는 이미지의 웹링크가 들어가도 되며, 같은 폴더내의 이미지 이름으로 가능합니다. 또한 오늘은 아래와 같은 속성들을 배워 볼 것입니다. width: 이미지의 너비 사이즈를 정한다 height: 이미지의 높이 사이즈를 정한다 alt: 이미지가 표현되지 않았을 시 대체 문구를 정한다. 먼저 img src를 이용하여 이미지를 하나 불러오겠습니다. 위와 같이 코드를 작성한 후, 크롬에서 실행을 해보면 아래와 같이 이미지.. 2022. 8. 30. HTML, CSS 기본 글자 태그 알아보기! (a태그, a href ...) 오늘은 글자 태그에 대해서 배워보았습니다. 복습겸 공유로 포스팅 합니다. html에서는 글자에 태그를 넣어서 글자의 속성을 바꿀 수 있습니다. style 속성으로 현재는 많이 대체가 되었지만 그래도 몇가지 기본적인 것들을 알고 넘어가는게 좋을 것 같습니다. a 태그: anchor의 약자, 현재 가장 중요한 태그 중의 하나이며 보통 문서나 url에 링크를 걸 때 사용 a href를 이용하여 하이퍼 링크를 걸 수 있음. 심코딩 입니다 심코딩 입니다 b 태그: bold의 약자, 글자를 진하게 해줍니다. 심코딩 입니다 심코딩 입니다 I 태그: Italic의 약자, 글자를 기울여 줍니다. 심코딩 입니다 심코딩 입니다 sub 태그: 글자를 아래쪽에 위치 하게 합니다. sup 태그: 글자를 위쪽에 위치 하게 합니다... 2022. 8. 19. HTML, CSS 시작시 꼭 필요한 확장프로그램! (비쥬얼스튜디오 확장) 이제 오늘부터 html과 CSS 공부에 들어갔다. 뭔가 시각적인걸 만들기에 재미있을 것 같기도 하고, 추후에 내 티스토리에도 적용을 할 수 있을 것 같아서이다. 평소에도 비쥬얼스튜디오코드를 통해 공부를 했기 때문에 이번에도 그냥 비쥬얼스튜디오를 이용하기로 했다. 오늘은 내가 시작전에 알게된 html css를 공부할 때 꼭 필요한 비쥬얼스튜디오코드 확장 프로그램에 대해 알아보겠다. 일단 공부 시작하기 전에 먼저 해당 확장프로그램을 설치한 후 공부를 시작하자! HTML PREVIEW Html Preview는 간단히 비쥬얼스튜디오 코드에서 미리보기를 제공하는 것이다. 보통 우리가 html을 작성을 하면 빈 크롬창을 띄워 실행을 시켜보는 것이 보통 일반적인 방법일 것이다. 하지만 이런 경우 수정을 할 때마다 계.. 2022. 8. 16. 이전 1 다음
