짱짱해커가 되고 싶은 나

[HTML/CSS] 기본 정리 본문

Web

[HTML/CSS] 기본 정리

동로시 2021. 3. 3. 00:44

<!DOCTYPE html>

웹브라우저에게 HTML 버전을 알려주는 역할 ( 버전을 따로 안쓰면 가장 최근 버전을 자동으로 사용html5 )

<meta charset="utf-8">

한글을 지원하는 인코딩이 필요하기 때문에 설정 필요

 

<title>

웹 사이트의 제목

<h1> 에서 <h6> 까지 머리말의 글자 크기 존재

<b> bold체

<i> 이탤릭체

<storng>

bold체와 겉보기에는 비슷해보이나 해당 텍스트가 중요하다고 표시하는 것이 목적, 스크린리더가 강조해서 읽을 수 있다.

<em>

이탤릭체와 겉보기에는 비슷해보이나 해당 텍스트를 강조하는 것이 목적.

 

<style>

css 코드를 작성하기 위한 태그

<link>

- href=""

- rel="stylesheet" //페이지와 파일 간의 관계 지정

 

css에서 폰트 크기를 표현할 수 있는 단위가 몇 가지 있는데 px 단위를 가장 많이 사용

<p> 안의 <i> 된 부분을 편집하고 싶을 경우에는 p i 로 하면 된다.

 

<html>

<head>

<body>

이 세가지는 옵셔널 태그로 권장하는 곳도 있고 권장하지 않는 곳도 있다.

 

<a>

- href = "참조 주소" //상위 폴더는 ../

- target ="_blank" //새 탭으로 열기

 

<img>

사진의 주소를 이용 //종료 태크 없음

- src

- width

- height

 

<html> class=""

<style> .class_name

클래스는 중복 클래스가 가능하다. (여러 요소 스타일링용)

class="big blue" 와 같이 big 클래스와 blue 클래스를 한 요소가 모두 가질 수 있다.

 

<html> id=""

<style> # id_name

아이디는 중복 아이디가 불가능하다.

id="best style" 는 불가능하다.

 

<div>

요소들을 묶어주는 태그 (위치에 영향o)

<span>

요소들을 묶어주는 태그 (위치에 영향x)

 

<!-- 코멘트 --!> (html)

/* 코멘트 */ (css)

커멘드 슬래시를 누르면 자동으로 코멘트 처리.

 

font-size : 글자 크기

> 폰트크기는 절대적인 방법(px, pt)과 상대적인 방법(em, %)으로 설정할 수 있다.

font-weight : 글자 두께 (100, 200, 300 과 같은 단위만 지원하기 때문에 이 외의 110 같은 값을 쓰면 기본 두께로 됨)

> normal = 400, bold = 700

text-align : 글자 정렬

text-decoration : 밑줄(underline, overline, line-through)

line-height : 줄 간격 조절 (context area에 영향x)

font-family : 폰트 스타일 설정 (여러 개 지정 가능. 앞에 폰트가 사용자 컴퓨터에 없으면 다음 거, 마지막은 폰트 종류)

> 폰트는 5종류로 나눌 수 있다. (serif, sans-serif, monospace, cursive, fantasy)

 

폰트 파일을 사용할 때는 아래와 같은 형식으로 폰트 이름을 지정해서 그 이름으로 사용한다.

@font-face{

  src:url{};

  font-family: "폰트 이름 지정"

}

 

+ 사이트 추천

w3schools : 태그/속성

jsfiddle.net :html, css, js 코드 작성 + save 기능 존재

fonts.google.com : 구글 폰트

 

여담..

css에서 정해준 색만 140개가 존재한다고 한다.

'Web' 카테고리의 다른 글

01. Git  (0) 2021.03.25
[HTML/CSS] 쇼핑몰 구현  (0) 2021.03.09
[HTML/CSS] 포지션  (0) 2021.03.09
[HTML/CSS] Display  (0) 2021.03.09
[웹 프론트엔드]  (0) 2021.03.07
'Web' Related Articles more
Comments