본문 바로가기
카테고리 없음

[개발공부] HTML/CSS 독학하기 (1)

by HarryJang 2023. 7. 6.

목차

    개념

    우선 HTML 과 CSS가 무엇인지 정리해보자.

    • HTML이란
      • Hyper Text Markup Language의 약자로 webpage에서 내용에 해당하는 부분을 담당한다고 보면 된다. 웹 사이트에서 텍스트, 제목, 문단 등에 해당하는 부분을 HTML로 작성할 수 있다.
    • CSS란
      • Cascading Style Sheets의 약자로 HTML로 작성한 내용의 스타일을 꾸며줄 수 있는 언어이다. 폰트의 크기, 색깔, 배경 색깔 등 심심한 text에 조미료를 첨가할 수 있게 해주는 언어이다.

     

    HTML 구조

    + 들어가기에 앞서 간단한 용어를 정리하자면, <html></html> 과 같은 것들이 많이 보일텐데 이를 tag라고 하고 보통은 opening tag(i.e., <>)와 closing tag(i.e., </>)가 pair로 나온다. 그렇지 않은 tag도 있으니 구글링을 잘 하도록 하자.

     

    + tag 안에는 attribute 를 사용해서 다양한 기능을 가능하게 한다. attribute는 항상 앞의 tag에 포함된다. e.g., <a href="index.html"></a>.

     

    다음은 HTML의 전반적인 구조다.

    <!DOCTYPE html>
<html>
    <head>
        <title>...</title>
    </head>
    <body>
        ...
    </body>
</html>

     

    제일 처음 오는게 <!DOCTYPE html> 인데, 정확한 의미는 잘 모르겠지만 "html" 자리에 사용하려 하는 HTML의 버전이 들어가고, browser에 어떠한 버전으로 작성된 파일인지를 알려준다. 위 코드와 같은 경우에는 HTML 5라고 생각하면 될 것 같다.

     

    그 밑에는 <html></html>의 block이 자리하고 있는데 이 안에 이제 html코드를 작성하면 된다. 이게 필요한 이유는 html파일 안에 css와 js가 함께 쓰일 수 있는데 그들과 html을 구분하기 위해서 필요하다고 한다.

     

    안에는 <head></head> 그리고 <body></body> 가 있는데, head part는 우리가 실제로 볼 수 없는 부분으로 여러가지 metadata가 들어있다고 설명을 들은 것 같다. 디테일한 설명을 듣지는 못해서 나중에 기본적인 공부를 마친 뒤에 자세히 알아봐야겠다. 현재 배우는 것은 head 안에 <title></title>을 넣을 수 있고 이는 우리가 브라우저에서 탭을 띄워놓을 때 적혀있는 제목이라고 한다. <body></body> 안에는 우리가 실질적으로 볼 수 있는 content들이 들어가게 된다. 어떤 content가 들어갈 수 있는지는 차차 알아보도록 하자.

     

    이것이 html파일의 전반적인 구조이고, head와 body 사이에 어떠한 content가 들어가느냐에 따라 webpage에 뜨는 내용이 달라질 것이다.

     

     

    HTML tags

    가장 기본적으로 배운 몇가지 tag들을 나열해보겠다.

    • <title></title>
      • 이전 section에 봤다시피 head 태그 안에서 사용된다. 정확한 의미는 모르나 브라우저 탭에 제목으로써 드러난다.
    • <h1></h1>, <h2></h2>, ... , <h6></h6>
      • heading을 나타내는 태그로 1에서 6으로 갈수록 그 사이즈가 작아진다.
    • <p></p>
      • paragraph를 나타내는 태그로 일반적으로 "본문"에 해당하는 text가 들어가게 된다.
    • <strong></strong>
      • 글을 bold 처리해서 강조하고 싶을 때 사용된다.
    • <em></em>
      • 글을 italic 체로 바꾸어준다.
    • <a></a>
      • 하나의 html 파일에서 다른 html 파일로 넘어갈 때 link 해준다.
      • 항상 href attribute가 필요하다. <a href="WHERE TO GO"></a> 의 형태로 사용하며 WHERE TO GO에 어떠한 파일로 이동할 지를 지정할 수 있다. url이나 file name을 입력할 수 있다.
    • <ol></ol>
      • ordered list의 약자로 순서가 있는 리스트를 말한다. web에서는 1., 2., 3. 과 같이 숫자 순으로 나열된다.
    • <ul></ul>
      • unordered list의 약자로 순서가 없는 리스트를 말한다. web에서는 bullet-point ( - ) 로 표현된다.
    • <li></li>
      • <ol> or <ul> 사이에 들어가는 태그로 리스트 각각의 element들을 담는 태그다.
      • e.g.,
    <ol>
    <li>강아지</li>
    <li>토끼</li>
    <li>고양이</li>
</ol>
    • <img> or <img />
      • 사진을 삽입할 수 있는 태그다.
      • 일반적인 태그와는 달리 closing tag가 따로 존재하지 않는 self-closing tag이고, 위와 같이 두가지 방법으로 사용할 수 있다.
      • 'src' attribute를 사용하여 어떤 image를 삽입하려는지 지정할 수 있다. 파일명, url을 value로 갖는다. e.g., <img src="image.jpg">
      • 'alt' attribute을 사용하여 어떠한 이유로 img가 출력되지 않을 때 그 자리에 텍스트를 출력할 수 있다. 일반적으로 사진에 대한 설명을 추가한다. e.g., <img src="cat.jpg" alt="a cute cat laying on the floor">

     

    In-line CSS(CSS in HTML)

    css를 html 코드 안에서 사용할 수 있다. opening tag에 'style' attribute를 사용하면 된다. 이 스타일은 하나의 해당 태그에만 적용된다.

     

    구조 또한 중요한데 "property: value;"의 구조를 항상 따른다. e.g., <h1 style="font-size: 20px;"></h1>

     

    property 에는 font-size, color, background-color, text-align 등이 있다.

    각각은 특정한 value를 가지는데,

    font-size의 경우에는 어떠한 숫자 + px(pixel)의 값을 가진다.

    color / background-color 는 keywords, hex, rgb, hsl 등 다양한 형태의 색깔 값을 가질 수 있다.

    text-align은 left, center, right이 있다.

    이게 현재까지 배운 내용이다. 강의 반틈 분량을 한 번에 적다보니 양도 많고 피곤해졌다.. 아마 다음부터는 강의 듣는 그날에 기록을 할거라 좀 더 짧을 것으로 예상된다. 아 그리고 관련된 주제끼리 정리를 하다보니 강의 순서와는 다르게 기록하게 되었다. 강의 15까지의 내용을 담았다. 강의로 듣고 싶은 사람은 다음 글에서 링크를 찾을 수 있다.

     

    이전 이야기:

     

    [개발공부] HTML/CSS 독학하기 (0)

    개요 Daniel과의 프로젝트 tool box를 진행하기 위해 추천 받은 강의 사이트 scrimba에서 frontend 를 배우기 시작했다. 대학 시절 항상 backend만 했었고 마지막 프로젝트 과목에서 수박 겉핥기식으로 HTML

    lifofharru.tistory.com

    다음 이야기:

     

    [개발공부] HTML/CSS 독학하기 (2)

    Internal CSS 이전 글에서는 in-line CSS에 대해서 적었다. HTML tag에 하나의 attribute로써 작용하도록 한 것이었는데, 실제 많이 사용되는 방법은 아니라고 한다. 여러 가지 이유가 있는데, 예를 들어 100

    lifofharru.tistory.com

     

    저작자표시 (새창열림)

    티스토리툴바