HTML 기초 - 1

비에·2021년 12월 28일

CSS html

web-publishing

목록 보기

1/10

<본 글은 code it (코드잇)의 웹 퍼블리싱(HTML/CSS 시작하기) 강좌를 정리하였습니다.>

- 수업소개

HTML?

HyperText Markup Language, 웹사이트에 들어갈 내용을 담당한다.

CSS?

Cascading Style Sheets, 웹사이트의 스타일을 담당한다.

HTML과 CSS가 내용, 스타일을 담당한다면, JS는 인터랙션을 담당한다.

인터랙션(interaction)은 사용자가 어떤 동작을 가했을 때, 여러 요소들이 동적인 효과와 같은 반응을 하는 것이라고 생각하면 됨.

01. 나의 첫번째 웹사이트!

< ! DOCTYPE html>

웹브라우저에게 HTML 버전을 알려주는 역할
(이렇게 쓰면 자동으로 html5 사용)
HTML 파일을 쓸 때는 가장 먼저 선언을 써야한다.

HTML 태그(HTML 요소)

<태그> : 시작태그 -내용- </태그> : 종료태그

ex) <title> 코드잇 - 온라인 프로그래밍 스쿨 </title>

<title>내용</title> : 웹사이트의 제목, 브라우저의 탭이나 방문 기록에 나와 있는 제목이 이 곳에 들어간다.
<h1>내용</h1> : 가장 큰 머리말 (heading 1)
<h2>내용</h2> : 두번째로 큰 머리말 (heading 2)
~ <h6>내용</h6>까지 작성할 수 있다. 
<p>내용</p> : 문단(paragraph), <p> 태그 위,아래에는 기본적으로 여백이 조금씩 있다.(물론 직접 설정할 수 있다.)

02. 굵게 쓰기, 날려 쓰기

b태그 : 굵게 쓰기

<b></b>

i태그 : 날려 쓰기

<i></i>

⭐ b태그와 i태그는 시멘틱 의미가 없어서 최근에는 많이 쓰이지 않는다.

Phrase Tags

b태그, i태그와 달리 시각적인 특징 뿐만 아니라 의미도 담고 있는 태그.

strong태그 : 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적이다. 겉보기에는 b태그와 같아보이지만, 스크린리더가 글을 읽어줄 때 strong은 강조해서 읽어준다.

<strong></strong>

em태그 : strong태그와 같이 강조하는 것이 목적이다. em은 'emphasized'의 줄인말이다.

<em></em>

03. 한글이 깨져요

한글을 지원하는 인코딩 방식을 사용해야함.
<meta charset = "utf-8">

이 태그는 head 태그 내에 위치하는 것을 권장함.
body 태그 내에 써도 동작은 할 수 있을 수도 있지만, 일부 브라우저에서는 잘못 출력될 수 있음.

04. CSS 기초

CSS 문법

h1 { 
	font-size : 64px;
    text-align : center;
}

h1: 스타일링 하고 싶은 요소
font-size, text-align : 속성
64px, center : 속성값
font-size : 폰트 크기 ( 주로 픽셀(px) 이용 )
text-align : 텍스트 정렬 ( left, right, center )
color : 텍스트 색
margin : 요소 사이의 여백 설정 ( 피셀(px) 단위로 설정 )

파일에 적용했을 때

<style>
/* 여기에 CSS 코드 */
h1 { 
	font-size : 64px;
    text-align : center;
}

h3 { 
	margin-top: 100px;
}

p i {
	font-size : 48px;
}
</style>

p i : p태그 안에 있는 i태그

⭐ p태그 안에 i태그가 여러개 있는 경우 : nth-of-type 이용

p i:nth-of-type(1) { }

05. head, body, html 태그

head, body, html 태그는 '옵셔녈 태그'이다. 이 태그의 사용 여부는 개인적인 작업 시 직접 결정하면 되고, 팀 작업 시 상의 후 정하면 된다.

body 태그

페이지에 나올 내용을 감싸준다. ( 브라우저에 보여주고자하는 것들을 넣으면 된다. )

head 태그

제목, css, javascript, title 등 내용 외 많은 것들이 들어간다. ( 브라우저에 직접적으로 보여주지 않으면서 문서 안에 필요한 데이터들을 모아둔다. }

html 태그

처음부터 끝까지 다 넣어주면 된다.

html {
    head {
    }
    body {
    }
}

들여쓰기 방법, HTML 주석 사용 방법

💡 드래그 후 들여쓰기 단축키 : ctrl + }
드래그 후 들여쓰기 해제 : ctrl + { 💡

💡 html에서의 주석 사용 방법

<!-- 
여기에 하고 싶은 코멘트 작성 
-->

06. 링크

하이퍼링크 (Anchor) -> a 태그
<a href="가고 싶은 링크"> 내용 </a>

ex) 
📁 intro
	📁 folder1
    	📁 folder2
        	📒 page2.html
            📒 page3.html 
        📒 page1. html
    📒 index.html
         
index -> page1 
<a href="forder1/page1.html"> page1 </a>

index -> page2
<a href="forder1/forder2/page2.html"> page2 </a>

page1 -> index
<a href="../index.html"> index </a>

page2 -> index
<a href="../../index.html"> index </a>

07. 이미지

이미지는 img 태그를 사용하고, img 태그는 src를 제공한다.
img 태그는 종료 태그가 없다.

인터넷에서 가져온 이미지의 경우

<img src="사진 주소" width="673" height="300">

갖고 있는 이미지를 사용할 경우

ex)
📁 images
	🗺 ice_cream.jpg 

<img src="images/ice_cream.jpg">

ex)
📁 intro
	📁 folder1
    	📁 folder2
        	📒 page2.html
            📒 page3.html 
        📒 page1. html
    📒 index.html
	📁 images
		🗺 ice_cream.jpg

page1에서 ice_cream.jpg 불러오기 
<img src="../images/ice_cream.jpg">

이미지 가운데 정렬 방법

<style>
	img {
    	display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

08. 사이즈 설정

픽셀

HTML에서 무언가의 크기를 설정할 때는 기본적으로 '픽셀(px)'단위를 사용한다.
폰트크기가 24px로 설정되어 있으면 폰트의 세로 길이가 24px이라는 뜻이다.

퍼센트

길이를 px말고 퍼센트(%)로 설정할 수도 있다.
<img src="https:// ~~~.jpg" width="50%">

⭐ %의 기준 : 부모태그를 기준, 부모태그의 width가 주어지지 않은 경우 브라우저의 크기에 따라 결정된다.

비에

기록하고 더 나아가기를

다음 포스트