HTML과 CSS
HTML은 우리가 흔히 생각하는 '명사', CSS는 이를 꾸며주는 '형용사', 추후에 JavaScript는 정적인 화면이 변화하게끔 하는 '동사'라고 생각하면 편하다.
좀더 구체적으로 보면, HTML은 웹페이지를 이루는 가장 기초적인 뼈대, 컨텐츠이다. 뼈대에 살을 붙이고 디자인하여 실제 건물을 만들듯, 효과적으로 보이기 위해 시각적인 효과를 입혀주는 것이 CSS이다. JavaScript는 화면과의 상호작용을 가능하게 하는 좀 더 다양한 기능을 추가할 때 사용할 수 있다. 화면을 클릭, 스크롤, 마우스올리기(마우스오버) 등 모든 종류의 상호작용을 JS로 제어할 수 있다.
HTML 의 기본 문법 : Tag
HTML은 전부 태그로 시작해서 태그로 끝난다. 와 같이 여는 태그와 닫는 태그가 한 쌍을 이루는 것도 있고, 태그 하나만으로 기능할 수 있는 것도 있다.
웹페이지에서 마우스 우클릭 > 페이지 소스 보기를 클릭하거나, F12키를 누르면 해당 웹페이지가 어떤 HTML코드, CSS파일, JS파일로 구성되어있는지 알 수 있다.
내가 밑천으로 가지고 있어야 할 태그는 무엇일까?
지금 당장 모든 태그를 다 알고 있어야 할 태그는 없다. 실제로 약 25~26종류의 태그를 가지고 있는 웹페이지가 가장 많다고 한다.
가장 많이 사용되는 태그는 역시 <html>, <head>, <body> 이다. <div>, <a>, <script>, <link>, <img>, <span>, <p> 등의 태그가 그 뒤를 잇는다.
HTML Study | Advanced Web Ranking
따라서 모든 태그를 지금 당장 알 필요는 없다. 배운 것만 가지고도 응용해서 수많은 다른 것을 만들어 낼 수 있으니 자신감을 가지자!
가장 기본적인 태그들
<h1>~<h6>h는 headings를 의미한다. 숫자에 따라 크기를 달리할 수 있고, 의미적으로는 콘텐츠의 중요도 차이를 읽을 수도 있겠다.<p>paragraph, 문단을 의미한다.<b>,<strong>태그 사이에 있는 텍스트를 볼드체로 표현할 수 있다.<b>는 시각적으로만 강조되지만<strong>해당 부분이 중요하다는 것을 웹브라우저에게 알려주게 되어 웹 접근성에 크게 기여한다.<u>언더라인<i>,<em>태그 사이에 있는 텍스트를 이탤릭체로 표현할 수 있다. 볼드체 표현과 마찬가지로<i>는 시각적인 효과,<em>은 의미적인 효과도 가진다.<ol>순서가 있는 리스트<ul>순서가 없는 리스트(불렛 포인트로 표현)<div>기본 컨테이너, block태그에 해당한다.<span>기본 컨테이너, inline태그에 해당한다. 즉 내용이 있는 부분만 공간을 차지한다.
- 추가로 배우고 싶은 것: 이론과 실제는 다르다고 했던가? 실제로 화면을 처음부터 끝까지 구성해보니, HTML을 작성하고 CSS를 붙일 때 내가 작성하고 있는 이 코드가 정말 적절한 구성인지, 현업에서는 어떤 프레임워크나 규칙을 가지고 HTML과 CSS를 작성하는 것은 아닌지 궁금해졌다. 앞으로 HTML을 좀더 전문가답게(?)짤 수 있는 방법이 있는지 찾아보고 싶다!
