코딩 입문 D-1
WECODE 부트캠프 16기 학습내용 정리...
웹사이트의 언어 html과 CSS 배우며 정리하기
html, css 뽀개던가 내가 뽀개지던가...
HTML과 CSS 기본
What is HTML?
(Hypertext Markup Language)
python, C++, Java와 같은 프로그래밍 언어지만
특히 웹페이지를 만들기 위한 언어이다.
웹사이트가 가지는 구조, 내용과 레이아웃을 설정하는 용도로 쉽게 이해할수가 있다.
HTML 파일은 텍스트 파일로 확장자 .html로 분류
파일의 이름은 아래와 같이 원하는대로 정할 수 있습니다.
- index.html
- main-page.html
- loginPage.html
- 1.html
텍스트 편집기(sublime Text, visual studio)와 같은 간단한 텍스트 작성앱을 확장자 html로 지정하여 브라우저에 파일을 열면 작성한 html 파일을 웹페이지 형식으로 확인이 가능하다.
HTML 구조
우리가 익히 알고있는 언어처럼 프로그래밍 언어인 HTML도 고유의 문법과 기능을 가지고 있다.
기본 문법은 아래와 같은 형식이다.
<tag> According Content</tag>태그를 열어 태그가 수행할 내용을 입력한 후 태그로 닫아 그 기능을 마무리하는 형식이다.
윗 코드의 'tag'는 시작 태그(openingtag), 'According Content'는 내용(content), '/tag'는 끝태그(closing tag)이며 이모든 것을 하나의 요소(element)라 부른다.
'TAG'
태그는 HTML의 기본 분류법이라고 생각하면 된다. 물건에 태그를 달아 상품을 분류하고 카테고리를 정의하고 기능을 설정 하듯 태그도 비슷한 역할을 한다.
특히 HTML은 요소(Element)의 시작을 태그로 시작을 하면 닫아야한다. 물론 모든 태그가 닫아야만 실행 되는 것은 아니다. 모든 태그들은 <>로 묶는다.
닫아야 하는 대표적 태그
<p></p> <h1></h1> <h2></h2> <a></a>닫지 않는 대표적 태그
<img> <br>기타 'TAG'
!DOCTYPE - html의 가장 처음 오는 선언문으로 해당 html파일의 사용 버전을 알림(기본적으로 html5로 html를 입력하면 html5 버전을 이용하는 파일임)
html,/html - DOCTYPE 다음으로 오는 최상위 태그... 파일의 모든 html 요소들을 감싸줌
head,/head - 사이트 페이지상 노출 되는 내용이 아닌 사이트 고유의 속성을 설정해주는 태그, 사이트의 대표이름, 인코딩 언어, 디바이스의 크기에 따른 화면 표시 등등....
body,/body- 본문이라 이해하면 된다. 페이지의 정보를 입력하는 부분.
(순서는 DOCTYPE, html, head, body)
h1,h2,h3,h4,h5,h6(/닫힘 필요)- header라는 뜻으로 머릿말을 작성하는 태그, 숫자가 낮을수록 큰 글자 크기를 가지지만 이역시 수정이 가능하다.
span,/span - 택스트를 넣는 태그
p,/p - span과 같은 택스트를 넣는 태그이지만 paragraph의 약어인 만큼 문장 단위의 택스트 입력시 사용
a,/a - ahcor의 약자로 링크를 연결시켜주는 태그이다. 여러가지 속성을 이용해 페이지에 머물수도, 새로운 페이지에서 작업을 이룰수도 있다.
div,/div - division의 약자로 웹사이트 내에 섹션을 나눌때 사용, 자체적 의미는 없지만 다른 태그들의 기능을 독립시키고 연관성 있는 태그끼리는 묶는 역할.
[W.I.F]What I Felt
파이썬으로 코딩 세계를 입문 하여서 그런지 HTML의 언어는 완전히 달라보였다. 물론 용도와 기능이 다르지만 파이썬 보다 훨씬 더 많은 입력을 요하는 것 같으면서도, 단순하다는 것을 동시에 느꼈다.
파이썬의 핵심은 구동이라면 HTML의 핵심은 배치라고 할까? 어떠한 부분은 어떻게 분류하고 배치하고 태그하는지에 따라서 훨씬 깔끔하고 이용하기 편한 웹사이트 구축이 가능하다는 것을 배웠다. 백엔드의 논리력이라면 프론트엔드는 디테일이라는 말을 들었지만 사실살 HTML을 사용하기 위한 논리적인 디자인이 디테일하게 들어가야하며 파이썬 역시 논리적인 코딩이 가독성이 좋아야한다느 점에 둘의 시작점은 같은 뿌리라는 점을 느끼게 되었다.
