HTML 기초 공부하기 (기본틀 짜기, 주석처리, inline block태그, 제목태그, 입력태그 - form / input, 테이블 만들기)
안녕하세요 홍 가 입니다.
오늘은 HTML기초를 공부하려고 합니다.
저도 배워가는 과정이라 제가 아는 선에서 알려드리도록 하겠습니다.
저는 항상 웹 사이트를 만들 때 폴더를 하나 만들어 놓고 시작을 합니다.
맨 위 상단바에 File - Open Folder을 누르시고 생성해 놓은 파일을 클릭하시면 이런 창이 나옵니다
저는 웰컴 페이지를 지운 거예요
이 폴더에 파일을 만들어야지 웹사이트가 나오겠지요?
화면과 똑같이 마우스를 가져가시면 뉴 파일이라고 뜹니다.
클릭하셔서
index.html과 style.css를 만들었습니다. 그러면 창이 이렇게 두 개가 뜨는데
html은 이제 웹사이트를 나타내 주고 css는 html을 꾸며주는 역할을 합니다.
html은 사람 얼굴이고 css는 화장품 같은 개념이죠.
이게 기초 틀인데요
index.html창에! 을 치시면 스패너가 뜨는데 그걸 Tab으로 눌러주시면 저런 창이 뜨게 돼요 Enter로 하셔도 되고요.
! Tab 또는! Enter. 기본 틀이 나오게 됩니다.
저 같은 경우는 디자인에 신경을 많이 쓰는 편이라.. html과 css에 시간 투자를 많이 해요.
그럼 계속 html이랑 css를 와 따가 따 해야 하는데 그러면 불편하잖아요..?
html창에서 Ctrl 누르신 상태로 \ 눌러주시면 이렇게 창이 분할이 돼요.
저는 html창에서 Ctrl \ 을해서 html이 2개가 뜬 거예요
css창에서 하시면 css로 나옵니다.
저는 초반 디자인 및 마크업을 할 때 이렇게 창을 뛰어 놓고 합니다. 아주 편하거든요
저는 visual studio code 확장팩인 Extensions에서 프로그램들을 사용하고 있는데
Ctrl Shift X를 누르면
제가 어떤 걸 사용하는지가 뜹니다.
저는 아직 3가지만 사용 중이지만 HTML Preview를 유용하게 쓰고 있습니다.
Live Server 사용하시면 홈페이지의 큰 틀을 보려고 할 때 단축키로 간편하게 웹 사이트가 열리기 때문에 사용합니다.
자 이제 코딩을 하다 보면 주석 처리를 은근 많이 사용하게 돼요.
주석처리 할부분을 드래그하시고 Ctrl / 를 하시면 이렇게 주석 처리가 됩니다.
HTML이랑 CSS주석 처리가 달라요
꼭 명심하세요.
자 이제 기본 틀 만들기, 주석처리, 화면 분할 등등을 배웠는데 이제 태그와 클래스를 배워야겠죠?
큰 틀로 Inline / Block 태그로 나뉘는데요
여기서 잠깐 설명해드릴게요 무조건 저장하셔야 해요 Ctrl + S 꼭 하세요
html lang은 웹 페이지 번역기 역할이에요 en으로 되어있으면 영어로 나오게 되거나 번역기가 돌아가요
ko - 한국어
title은 웹 페이지를 열면 상단바에 쓰여있는 제목입니다.
자 Inline / Block 차이가 보이시나요?
Inline 한 줄에 여러 개 배치 가능 span
Block 한 줄에 한 개씩 배치 가능 div
자 이제는 제목 태그와 목록 태그에 대해 배워볼게요
제목은 H1으로 시작하여 h1 2 3 4... 쭉 늘어나고요
목록은 ul이라는 태그 안에 li라는 태그를 넣어주는 겁니다.
저는 Extensions에서 Preview라는 프로그램을 사용 중인데 저렇게 바로바로 입력이 되어 나와서 사용하기 편리합니다.
하지만 바로 입력된다 해서 저장을 안 하시면 안돼요 저장 꼭 하세요.
목록 앞에 뜨는 저. 은 css를 활용해서 지울 수 있어요 다음 시간에 css와 html을 같이 공부하는 시간을 가지도록 할게요.
저희는 우선 HTML먼저 배워보도록 합시다.
이제 입력 태그를 배워볼게요
form태그는 정보전달 태그이고요 input은 입력 태그입니다.
input 태그는 radio, checkbox라는 게 있습니다.
제가 여러 가지 만들어봤는데요 박스 만드는 방법은 여러가지 있습니다.
label태그는 이게 라디오나 체크박스 뭐 로그인 창 등등 만들 때 유용하게 사용할 수 있으며
radio는 한 개만 체크가 가능하고 checkbox는 여러 가지 선택이 가능하다.
table 태그는 thead, tbody로 나눌 수 있다. th, td, tr도 포함
알기 쉽게 만들기 위해 table이라는 큰 틀에 thead제목과 tbody라는 내용을 넣는다
tr th / tr td로도 나타내도 된다.
다음은 CSS를 활용해서 테이블로 표 만들기 글자 색 넣기 움직이기 등등 여러 가지를 해보겠습니다.