[JavaScript를 들어가기 전] HTML 및 CSS 기초 정리

Program_Language/JavaScript

[JavaScript를 들어가기 전] HTML 및 CSS 기초 정리

beeimp 2022. 3. 21. 10:38

웹 개발 기초

웹페이지의 구조와 내용을 담당하는 HTML

HTML은 HyperText Markup Language의 약자로 개발 언어가 아닌 웹 페이지의 뼈대가 되는 마크업 언어입니다. 뼈대가 되는 HTML에 CSS와 JavaScript를 적용하여 원하는 웹페이지를 꾸미고, 동작할 수 있습니다. 기본적으로 HTML은 tag(ex. <html></html>)의 집합이며, 트리 구조를 갖습니다.

주요 HTML 요소

<html>
    <head>
        <title>자주 사용되는 HTML Elements</title>
    </head>
    <body>
        <div>Division - 기본적으로 한줄의 공간을 차지함</div>

        <span>Span - 기본적으로 내용만큼만 공간을 차지함</span>

        <a href="url" target="_blank">Link - 기본적으로 현재 창에서 해당 링크로 열기(Target 속성)</a>

        <img src="url" alt="부가설명"/> <!-- image -->

        <ul>Unordered List
            <li>List Item</li>
        </ul>

        <input /> <!-- Input(type - Text, Radio ...)-->
        <input type="text" placeholder="Text here">
        <input type="password">
        <input type="checkbox" checked>

        <input type="radio" name="group-name" value="1" checked>
        <input type="radio" name="group-name" value="2">
        <input type="radio" name="group-name" value="3">

        <textarea> <!-- Multi-Line Text Input - 줄바꿈 가능 -->

        <Button>Button</Button>
    </body>
</html>

스타일을 담당하는 CSS

CSS는 Cascading Style Sheets의 약자이며, 외부와 내부의 스타일을 담당합니다. 같은 내용이라도 CSS가 바뀐다면 더 보기좋게 바꿀 수 있습니다. 다만, CSS는 이쁘게 만드는 것보다 해당 웹의 목적에 맞는 스타일링이 중요합니다. 크게 레이아웃 디자인, 타이포그래피를 갖추고 있다면 좋은 사용자 경험을 제공할 수 있습니다. 만약 프론트엔드 개발자가 되려면 필수적으로 다룰 수 있어야 합니다. 추가적으로 정렬, 컬러, UX에 대한 감각과 경험 또한 많으면 많을수록 좋습니다.

CSS 기본 정리

CSS는 HTML에서 사전에 정의된 시맨틱 태그(ex. <html>, <head>, <div>), class, id를 통해 적용할 수 있습니다.

<!-- index.html -->

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 적용</title>
  <!-- 외부의 css파일을 html 문서에 적용 -->
  <link rel="stylesheet" href="index.css" />
</head>
<body>
<header>Header</header>
<div class="container">
  <nav>
    Navigation section
  </nav>
  <main>
    Main Content
  </main>
  <aside>
    Aside Section.
  </aside>
</div>
<footer>
  Footer
</footer>
</body>
</html>

/* index.css */
body {
  margin: 0;
  padding: 0;
  background: white;
  color: gray;
}
header, footer {
  font-size: 1.5em;
  text-align: center;
  background-color: darkgray;
  color: white;
}
nav {
  background: orange;
}
main {
  background: whitesmoke;
}
aside {
  background: whitesmoke;
}

CSS 구성

CSS는 크게 Selector, 선언 블럭(Declaration block)으로 구성됩니다. Declaration block은 Declaration의 집합이며, Declaration은 Property, Value, 선언 구분자(;)로 이루어져 있습니다.

Selector{ Declaration block
    Property: Value; /* Declaration */
}

Selector

Selector는 HTML의 특정 요소를 찾는 선택을 의미합니다. CSS에서 스타일을 적용하기 위해 사용됩니다. 이를 학습하기 위해 여러 CSS 게임을 활요해보는 것도 좋은 방법일 수 있습니다.

CSS 코드 작성에서 시맨틱 태그를 선택한 경우 태그 기호를 뺀 태그 이름만 Selector자리에 작성하면 됩니다. 만약, 태그 내에 id와 class 속성으로 선택하고 싶다면, 앞에 기호를 포함하여 선택할 수 있습니다.(id - #id, class - .class)

텍스트 꾸미기

.text {
    color: #155724; /* 글자 색상 */
    background-color: #d4edda; /* 배경 색상 */
    border-color: #c3e6cb; /* 테두리 색상 */

    font-family: "SF Pro KR", "MalgunGothic", "Verdana"; /* 글꼴 속성 - 쉼표로 입력한 순서대로 fallback 적용 */
    font-size: 10px; /* 글자 크기 */
    /* 
    굵기: font-weight
    밑줄, 가로줄: text-decoration
    자간: letter-spacing
    행간: line-height
    */

    text-align: left /* 가로 정렬 - left, right, center, justify(양쪽) */
}

- [웹 폰트 기술](https://d2.naver.com/helloworld/4969726)

    - 의도를 사용자에게 전달하기 위한 기술

- [Google Fonts](https://fonts.google.com/)

    - 다양한 웹 폰트를 쉽게 적용할 수 있게 도와주는 사이트

크기 단위

크기 단위에는 절대 단위와 상대 단위로 구분합니다.

절대 단위

절대 단위는 환경(기가나 브라우저 크기)에 영향을 받지 않습니다. px, pt 등의 단위가 있으며, 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하지만, 환경에 따라 목적과 다르게 보이는 경우가 많다는 단점이 있습니다.

상대 단위

상대 단위는 환경에 따른 설정한 기본 크기를 따릅니다. %, em, rem, ch, vw, vh 등의 단위가 있습니다. rem의 경우 웹브라우저의 기본 크기를 1로 하며, em은 부모 요소에서 설정된 기본 크기를 1로 합니다. vw와 vh는 각각 너비와 높이의 크기를 뜻하며, 최대 100입니다.

박스 모델

Block Level Element

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능여부	가능	가능	불가능

박스 구성 요소

박스는 바깥쪽부터 안쪽으로 Margin(바깥 여백), Border(테두리), Padding(안쪽 여백), Content 순으로 구성되어 있습니다.

margin은 콘텐츠의 배경색 지정이 되지 않습니다.
박스의 크기는 Margin(바깥 여백), Border(테두리), Padding(안쪽 여백), Content의 총합입니다.

div{
    width: 10px; /* 콘텐츠의 너비 */
    height: 10px; /* 콘텐츠의 높이 */
    overflow: auto; /* 넘칠경우 스크롤 설정 */

    padding: 10px 10px 10px 10px; /* 위에서부터 시계방향 */
    padding: 10px 10px; /* 위아래 양옆 */
    padding: 10px; /* 전체 */
    padding-top: 10px; /* 위 */
    padding-bottom: 10px; /* 아래 */
    padding-left: 10px; /* 왼쪽 */
    padding-right: 10px; /* 오른쪽 */

    border: 1px solid red; /* 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)  */

    margin: 10px 10px 10px 10px; /* 위에서부터 시계방향 */
    margin: 10px 10px; /* 위아래 양옆 */
    margin: 10px; /* 전체 */
    margin-top: 10px; /* 위 */
    margin-bottom: 10px; /* 아래 */
    margin-left: 10px; /* 왼쪽 */
    margin-right: 10px; /* 오른쪽 */

}