[HTML] 국비지원 개발자 양성과정 첫수업! HTML 기초
블록체인 SW개발자 양성과정 첫째날!
#1 VISUAL STUDIO CODE
HTML 페이지 제작하는데는 Visual Studio Code 이외에도 다른 것들이 쓰일 수 있다고 함, 수업에서는 요걸 사용
비주얼 스튜디오 코드 언어설정 한국어로 바꾸기~~~~(영어울렁증 나에게 필수~~~~)
왼쪽 아이콘중에 블록4개로 이뤄져있는 아이콘 클릭하고 'korean' 검색해서 깔아주면 한국어로 설정 변경 가능하다!
1) 새폴더, 새파일 만들기
탐색기 밑에 빈 검은 공간에 오른쪽 마우스버튼 클릭하면 새폴더랑 새파일 만들기 가능!!!
새폴더 먼저 만든 뒤에 파일 만들어야한다! 파일이름은 항상 영어로!!! 영어로 설정해야 오류가 나지 않는다.
2) 파일 형성후 첫째줄에 html:5 입력하면 자동으로 head, body 완성
3) head,body란?
head는 직역대로 머리 역할 head 안에 있는 title 사이의 용어 바꿔주면 창이름 설정 변경 가능하다.
첫번째 창은 Documet 설정 그대로 냅뒀고, 세번째 창은 경일아카데미로 바꿨을 때
body는 몸통 역할이라고 한다. body 안에 적는 코드들이 내용이 됨
다음단계에서 body안에 들어가는 코딩용어들을 적은 뒤 의미를 들었다.
#2 교수님이 시키는대로 적어보기
교수님이 다짜고짜 이 코드들을 적으라고 시키셨다. 적으면서 div? span? h1? 뭐가뭔지 하나도 모르겠지만 일단 시키시는대로 궁금증 가진채로 적었다.
#2 결과물
교수님이 시키신대로 적으니 아래와 같은 결과물들이 나왔음 각각 용어의 기능은 이후에 설명해주셨는데 그냥 무작정 해본 뒤에 설명을 들으니 더 이해가 잘 됐던거같다.
#3 각 용어의 기능
html을 만들기 위한 용어를 바라볼때 먼저 아래의 과정을 거쳐야 잘 이해되는 것 같다.
1. 기능이 무엇인가?
2. 블록인가 인라인인가?
블록은 세로 개념이다. 새로운 정보를 새로운 줄에 입력하기에 추가되는 정보가 옆에 붙지않고 밑에 새로운 줄로 형성
인라인은 가로 개념이다. 새로운 정보를 기존 정보 옆에 입력해줌
정보를 입력할때 사용되는 코드중 블록과 인라인을 대표하는게 div, span 요 두개인듯 하다 이걸 가장 먼저 알려주신거 보면?
div -> 블록태그, 세로형식
span -> 인라인태그, 가로형식
똑같이 두문장씩 쳤는데 div로 하면 새로운 줄에 'div가 뭐냐고!!!'가 입력되었고
span으로 하면 같은 줄에 두문장이 입력된 것을 볼 수 있음
h1,h2,h3,h4,h5 -> 숫자 커질수록 크기 점점 작아짐, 요 용어들도 블록개념이다. 세로로 정보가 입력됨, 기능은 글씨크기 조정해서 정보입력하는 것?
ul ,li -> 무조건 한쌍, 메뉴바 만들 때,
a - 앵커의 약자, 인라인 태그
href(속성값)
input type ->인라인 태그
br / -> 엔터같은 개념
p -> 엔터같은 개념, 회사에서 주로 쓰임
#4 결과물 보고 스스로 코드짜보기
처음에는 가로 정보라는 생각에 span을 사용해야겠다는 생각이 먼저 들어서 '이름'과 'input type 텍스트' 둘다 span을 사용해서 연결하고 p를 사용해서 문단을 나눠줬다. 그랬더니 교수님 결과물과 다르게 자간이 훨씬 넓었음
이건 아니다 싶어서 '이름'과 'input type 텍스트'를 하나의 div에 넣어줌 그랬더니 교수님 결과물과 같이 자간넓이로 결과물이 나옴
직접 해보면서 느낀건 똑같은 결과물을 보고 다들 다른 코드를 짜온다는 것이 신기했고, 미세한 차이라고 캐치해서 오류를 검증해내기 위해선 꼼꼼함이 필요하다는 생각이 들었음
실제로 수업시간에 다른 사람들이 짠 코드를 봤는데 비슷한 결과물이라도 제각각이였음