[D+15] HTML / CSS

D+15

- HTML / CSS -

(HTML, CSS, Style)

HTML (Hyper Text Markup Language)

•HTML은 웹 페이지의 틀을 만드는 마크업 언어로 이때 마크업 언어는 구조를 표현하는 언어라고 할 수 있다.

• 부등호(<>)로 묶인 HTML의 기본 구성요소인 태그들의 집합들로 구성되어 있다.

•html 확장자를 사용한다.

• 여는태그(opening tag)가 있으면 닫는 태그(closing tag)도 있다.

트리구조

HTML은 자식태그가 있으면 부모 태그고 있고 부모 태그가 있다면 자식 태그도 존재한다.

이렇게 HTML은 여러 태그들이 엮이고 엮여 트리구조를 이룬다.

SELF-CLOSSING TAG

보통 HTML은 여는 태그가 있으면 닫는 태그도 존재하지만

어떠한 태그는 여는태그와 닫는 태그를 사용하지 않고 입력할 수 있다.

이것이 바로 셀프클로징태그로 대표적으로 <img>가 있다.

<img src = "abc.png">

시맨틱 웹

HTML의 구조가 설득력 있게 잘 작성된 웹으로 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.

자주 사용하는 태그들

태그	이름	설명
<div>	Division	한 줄을 차지하며 단락을 묶어준다
<span>	span	줄바꿈 없이 영역을 묶어준다
<img>	image	이미지를 삽입한다
<a>	link	링크를 삽입한다
<ul> & <li>	Unordered List & List Item	순서 없는 목록을 만들때 사용한다
<ol> & <li>	Ordered List & List Item	순서 있는 목록을 만들때 사용한다.
<input>	input	사용자에게 입력받기 위해 사용한다.
<textarea>	Multi-line Text Input	여러줄 작성 가능한 텍스트 영역
<button>	Button	버튼

시맨틱 태그 (semantic tag)

태그 자체에 의미가 있어 태그 이름만 보고도

문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있게 하는 것이다.

• <header> : 머리말 지정

• <nav> : 동일한 사이트 안의 문서나 다른 사이트의 문서를 연결하는 내비게이션 링크

• <section> : 주제별 콘텐츠 영역 나타내기

•<article> : <section> 안 콘텐츠 내용 넣을 때 주로 사용한다.

• <aside> : 본문 이외의 내용 표시

• <iframe> : 외부 문서 삽입

• <footer> : 제작 정보와 저작권 정보 표시

• <address> : 사이트 제작자 정보, 연락처 정보등을 넣을 때 사용

CSS (Cascading Style Sheets)

• 웹 페이지 구성요소의 스타일을 정의하는 언어

CSS를 적용시키는 방법

• INLINE

HTML의 특정 태그에 직접 스타일을 적용시킨다.

// 빨간색 글자로 만들어줘
<div style = "color: red">안녕하세요</div>

• HTML 내부에 스타일 시트를 작성

<head>태그 안에 <style> 태그를 만들어 규칙(Selector)에 따라 일괄 적용시킨다.

// 아이디가 hello인 글자 색을 빨간색으로 만들어줘
<head>
	<style>
    	div#hello { color : red; }
    </style>
</head>

• HTML 외부에 스타일 시트를 작성

css확장자로 저장된 파일을 외부에서 가져오는 것으로 <a> 태그를 이용해 가져온다.

<link rel = stylesheet type = "text/css" href = "stylesheets.css" />

CSS SELECTOR

•CSS에서 요소를 선택하는 규칙

방법 1) 각각의 element에 고유한 ID를 부여

- id 속성을 이용하며 '#'을 이용해 고유한 id를 선택한다.

방법 2) 종류(Class)를 만들고 element CLASS부여

- 각기 다른 색의 특성을 가진 종류를 만들고, 해당 element에 적용하며

여러 태그에 중복 부여가 가능하다.

- 점(.)을 이용해 클래스를 선택한다.

Style 간단 정리

박스 모델

•margin

다른 태그와의 거리 간격을 조절한다.

외부 여백

•border

테두리

•padding

border과 content 사이의 간격 조정

내부 여백

•content

태그가 차지하는 공간

실질적으로 내용이 들어가는 공간

너비와 높이

•width : 너비

•height : 높이

도형의 위치 표현하기

top, left, bottom, right로 표현이 가능하며 숫자가 커질수록 벽에서부터 거리가 멀어진다.

배치방법 지정

•static

요소를 문서의 흐름에 맞추어 배치 (기본값)

•relative

이전 요소에 자연스럽게 연결해 배치하되 상대적인 위치 조정이 가능

•absolute

부모 중 기준점이 있는 경우, 그 기준으로 위치를 지정할 수 있다.

•fixed

브라우저 화면의 좌상단을 기준으로 지정한 위치에 고정시킨다.

•sticky

relative처럼 작동하지만, 스크롤 영역을 벗어나면 fixed처럼 작동한다.

box-sizing

박스모델의 사이즈를 content-box 기준으로 너비를 정할지

border-box를 기준으로 너비를 정할지 설정할 수 있다.

z-index

요소를 쌓은 순서를 설정하는 것으로 작은 숫자를 입력할 수록 가장 밑에 위치하게 된다.

float : 배치기준 설정

•left

왼쪽으로 배치

•right

오른쪽으로 배치

•none

어느 쪽으로도 배치하지 않음

font -*

font-style	이탤릭체 등의 글꼴의 스타일 지정
font-weight	글자 두께
font-variant	글꼴 변형 (소문자를 대문자로 바꾸는 등)
font-size	글자 크기
line-height	줄 간격
font-family	글꼴 설정

background -*

background-color	배경 색
background-image	배경 이미지
background-repeat	배경 이미지 반복 여부
background-position	배경 이미지 위치

저작자표시

'시도 > Code-States' 카테고리의 다른 글

[D+17] JSON에 대해서 (feat. 😿) (0)	2020.09.23
[D+16] DOM (0)	2020.09.22
[D+14] 둘째 주 후기 (0)	2020.09.20
[D+13] 개인 공부 (0)	2020.09.19
[D+12] 끝없는 삽질... 그리고 성공! (0)	2020.09.18

IT Information Notebook

[D+15] HTML / CSS

D+15

- HTML / CSS -

(HTML, CSS, Style)

HTML (Hyper Text Markup Language)

트리구조

SELF-CLOSSING TAG

시맨틱 웹

자주 사용하는 태그들

시맨틱 태그 (semantic tag)

CSS (Cascading Style Sheets)

CSS를 적용시키는 방법

CSS SELECTOR

Style 간단 정리

박스 모델

너비와 높이

도형의 위치 표현하기

배치방법 지정

box-sizing

z-index

float : 배치기준 설정

font -*

background -*

'시도 > Code-States' 카테고리의 다른 글

댓글

티스토리툴바

[D+15] HTML / CSS

D+15

- HTML / CSS -

(HTML, CSS, Style)

HTML (Hyper Text Markup Language)

트리구조

SELF-CLOSSING TAG

시맨틱 웹

자주 사용하는 태그들

시맨틱 태그 (semantic tag)

CSS (Cascading Style Sheets)

CSS를 적용시키는 방법

CSS SELECTOR

Style 간단 정리

박스 모델

너비와 높이

도형의 위치 표현하기

배치방법 지정

box-sizing

z-index

float : 배치기준 설정

font -*

background -*

'시도 > Code-States' 카테고리의 다른 글

관련글

댓글

티스토리툴바