[HTML & CSS] HTML & CSS 기초

Skill/HTML & CSS

[HTML & CSS] HTML & CSS 기초

엉아_ 2021. 8. 11. 21:03

728x90

HTML

( Hyper Text Markup Language )
웹페이지를 작성하기 위한(구조를 잡기 위한) 언어
웹컨텐츠의 의미와 구조를 정의

1) HTML 기본 구조

- head

: 문서 제목, 문자코드(인코딩)와 같이 해당 문서 정보를 담고 있으며, 브라우저에 나타나지 않음.

: CSS 선언 혹은 외부 로딩 파일 지정 등도 작성

- body

: 브라우저 화면에 나타나는 정보로 실제 내용에 해당

2) 요소

- HTML의 요소는 시작 캐그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성
: 태그는 컨텐츠(내용)를 감싸는 것으로 그 정보의 성격과 의미를 정의

- 내용이 없는 태그들 : br(줄바꿈), hr(가로선), input, link, meta

- 시멘틱 태그 : 의미를 가지고 있는 태그 ( div와 다름 )

header : 문저 전체나 섹션의 헤더(머릿말 부분)
nav : 네비게이션
aside : 사이드에 취지한 공간, 메인 콘텐츠와 관련성이 적은 콘텐츠
section : 문서의 일반적인 구분, 콘텐츠의 그룹을 표현
article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
footer : 문서 전체나 섹션의 푸터(마지막 부분)

<header>
    <nav></nav>
</header>
<section>
    <article></article>
    <article></article>
</section>
<footer></footer>

CSS

(Cascading Style Sheets)

스타일, 레이아웃 등을 통해 문서(HTML)을 표시하는 방법을 지정하는 언어

1) CSS 정의 방법

1. 인라인

: 해당 태그에 직접 `style` 속성을 활용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 style="color:blue; font-size:100px;">Hello</h1>
</body>
</html>

2. 내부 참조

: head 태그 내에 style에 지정

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
        h1 {
            color:blue; 
            font-size:100px;
        }
    </style>
</head>
<body>
</body>
</html>

3. 외부 참조

: 외부 CSS 파일을 head내 link를 통해 불러오기

<!--hteml-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

/*css*/

h1 {
    color: blue; 
    font-size: 100px;
}

2) 선택자

: HTML 문서에서 특정한 요소를 선택하여 스타일링 하기 위해서는 반드시 선택자라는 개념이 필요

- 요소 선택자

: HTML 태그를 직접 선택

- 클래스 선택자

: 마침표(.)문자로 시작하며, 해당 클래스가 적용된 모든 항목을 선택

- 아이디(id) 선택자

: # 문자로 시작하며, 해당 아이디가 적용된 모든 항목을 선택 (단일 id 권장)

3) CSS 적용 우선순위

1. 중요도

: !important

2. 우선순위

: 인라인 > id 선택자 > class 선택자 > 요소 선택자

3. 소스 순서

4) CSS 상속

: CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속한다.

상속 되는 것 예시
: Text 관련 요소(font, color, text-align), opacity, box-sizing, diaplay)
상속 되지 않는 것 예시
: position 관련 요소(position, top/right/bottom/left, z-index) 등

5) CSS 단위

- px (픽셀)

모니터 해상도의 한 화소인 '픽셀'을 기준
픽셀의 크기는 변하지 않기 때문에 고정적인 단위

- %

백분율 단위
가변적인 레이아웃에서 자주 사용

- em

(바로 위, 부모 요소에 대한) 상속의 영향을 받음
배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가짐

- rem

(바로 위, 부모 요소에 대한) 상속의 영향을 받지 않음
최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐

- viewport

웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐츠의 영역
주로 스마트폰이나 테블릿 디바이스의 화변을 일컫는 용어로 사용됨
글자 그대로 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정됨
vw, vh, vmin, vmax

6) Selectors

1. 결합자

- 자손결합자

: selectorA 하위의 모든 selectorB 요소

div span {
  color: red;
}

<div>
  <span>이건 빨강입니다.</span>
  <p>이건 빨강이 아닙니다.</p>
  <p>
    <span>이건 빨강입니다.</span?
  </p>
</div>

- 자식 결합자

: selectorA 바로 아래의 selectorB 요소

div > span {
  color: red;
}

<div>
  <span>이건 빨강입니다.</span>
  <p>이건 빨강이 아닙니다.</p>
  <p>
    <span>이건 빨강이 아닙니다.</span?
  </p>
</div>

- 일반 형제 결합자

: selectorA의 형제 요소 중 뒤에 위치하는 selectorB 요소를 선택

div ~ span {
  color: red;
}

<span>p태그의 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<b>그리고 코드도 있습니다.</p>
<span>p태그와 형제이기 때문에 이건 빨강입니다!</span>
<b>더 많은 코드가 있습니다.</b>
<span>이것도 p태그와 형제이기 때문에 빨강입니다!</span>

- 인접 형제 결합자

: selectorA의 형제 요소 중 바로 뒤에 위치하는 selectorB 요소를 선택

div + span {
  color: red;
}

<span>p태그의 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<span>p태그와 인접한 형제이기 때문에 이건 빨강입니다!</span>
<b>그리고 코드가 있습니다.</b>
<span>이것도 p태그와 인접한 형제가 아니기 때문에 이건 빨강이 아닙니다!</span>

7) Box model

- content

: 글이나 이미지 등 요소의 실제 내용

- padding

: 테두리 안쪽의 내부 여백 요소에 적용된 배경색, 이미지는 padding까지 적용

.margin-padding {
  margin: 10px;
  padding: 30px;
  }

- border

: 테두리 영역

.border {
  border-width: 2px;
  border-style: dashed;
  border-color: black;
  }

- margin

: 테두리 바깥의 외부 여백 배경색을 지정할 수 없다.

.margin {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  }

8) Display

- display: block

줄 바꿈이 일어나는 요소
화면 크기 전체의 가로 폭을 차지한다.
블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있음.
ex) div / ul, ol, li / p / hr / form

- display: inline

줄 바꿈이 일어나지 않는 행의 일부 요소
content 너비만큼 가로 폭을 차지한다.
width, height, margin-top, margin-bottom을 지정할 수 없다.
상하 여백은 line_height로 지정한다.
ex) span / a / img / input, label / b, en, i, strong 등

- display: inlin-block

block과 inlin 레벨 요소의 특징을 모두 갖는다.
inline처럼 한 줄에 표시 가능하다
block처럼 width, height, margin 속성을 모두 지정 할 수 있다.

- display: none

해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다.)
이와 비슷한 visibility: hidden은 해당 요소가 공간은 차지하나 화면에 표시만 하지 않는다.

9) Position

- static

: 모든 태그의 기본값(기준 위치)

일반적인 요소의 배치 순서에 따름(좌측 상단)
부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치 됨

- relative

: 상대 위치

자기 자신의 static 위치를 기준으로 이동
레이아웃에서 요소가 차지하는 공간은 static 일 때와 같음

- absolute

: 절대 위치

요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
static이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동(없는 경우 body에 붙는 형태)
원래 위치해 있었던 과거 위치에 있던 공간은 더이상 존재하지 않음
즉, 다른 모든 것과 별개로 독자적인 곳에 놓임

- fixed

: 고정 위치

요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
부모요소와 관계없이 viewport를 기준으로 이동
스크롤 시에도 항상 같은 곳에 위치함