웹 퍼블리싱_[토픽1] HTML/CSS 시작하기_HTML/CSS 시작하기

나의 첫 번째 웹사이트

<!DOCTYPE html>  # 웹브라우저에게 HTML 버전을 알렺는 역할 (이렇게 쓰면 자동으로 html5 사용)

<title>My First Website</title>  # 웹사이트 제목

<h1>My First Page</h1>  # 가장 큰 머리말 (heading 1)

<h2>I love HTML!</h2>  # 두 번째로 큰 머리말 (heading 2)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tepor incididunt ut labore et delore magna aliqua.</p>  # 문단 (paragraph)

HTML 태그 (HTML 요소)

<태그> 내용 </태그>

<태그> : 시작 태그
</태그> : 종료 태그

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

기본 HTML 태그 정리

앞선 강의에서 아래와 같은 코드를 보았습니다.

<!DOCTYPE html>

<title>My First Website</title>

<h1>My First Page</h1>
<h2>I love HTML!</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<!DOCTYPE> 선언

HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야 합니다. 이전의 html 버전을 사용하려면 <!DOCTYPE>을 복잡하게 써야 하지만, 그냥 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면 됩니다:

<!DOCTYPE html>

<title> 태그

페이지의 제목은 <title> 태그에 써주면 됩니다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이곳에 들어갑니다.

<title>My First Website</title>

<h1>~<h6> 태그

한 페이지에 여러 개의 머리말이 있을 수 있는데요. 그중 가장 중요한 머리말은 <h1>(heading 1), 그다음으로 중요한 머리말은 <h2>(heading 2). 이런 식으로 <h6>(heading 6)까지 작성할 수 있습니다.

<h1>머리말 1</h1>
<h2>머리말 2</h2>
<h3>머리말 3</h3>
<h4>머리말 4</h4>
<h5>머리말 5</h5>
<h6>머리말 6</h6>

각 머리말의 크기는 나중에 마음대로 설정할 수 있지만, 따로 설정해주지 않으면 <h1>부터 순서대로 작아집니다.

<p> 태그

보통 문단은 <p>(paragraph) 태그 안에 넣습니다. 물론 직접 설정할 수도 있지만 <p> 태그 위, 아래에는 기본적으로 여백이 조금씩 있습니다.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

굵게 쓰기, 날려 쓰기

텍스트를 굵게 (bold) → <b> 태그

<p>이 부분은 <b>굵게</b> 써주세요.</p>

텍스트를 날려서 (italic) → <i> 태그

<p>이 부분은 <i>날려서</i> 써주세요.</p>

<b> 태그, <i> 태그 정리

<b>태그

텍스트를 굵게 쓰고 싶으면 'bold'의 약자인 <b> 태그를 사용하면 됩니다.

Hello <b>World</b>!

Hello World!

<i>태그

텍스트를 날려 쓰고 싶으면 'italics'의 약자인 <i> 태그를 사용하면 됩니다.

Hello <i>World</i>!

Hello World!

Phrase Tags

<b> 태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 <i> 태그는 그냥 텍스트를 '이탤릭체'로 만들어줍니다. 둘 다 '시각적인 특징'만 갖고 있는 태그인데요. HTML에서는 시각적인 특징뿐만 아니라 의미도 담고 있는 phrase tag가 있습니다.

<strong> 태그

Hello <strong>World</strong>!

Hello World!

<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적입니다. 지금 겉보기에는 두 태그가 똑같지만, 스크린리더(컴퓨터의 화면 낭독 소프트웨어: 시각 장애인, 학습/인지 장애인, 노인, 다문화 가정의 웹 접근성을 지원해주는 목적)가 글을 읽어줄 때 <strong>은 강조해서 읽을 수 있겠죠?

<em> 태그

Hello <em>World</em>!

Hello World!

<i> 태그는 그냥 시각적으로 날려쓰는 것이 목적이라면, <em> 태그는 강조하는 것이 목적입니다. em은 'emphasized'의 줄임말입니다.

한글이 깨져요

<!DOCTYPE html>

<title>My First Website</title>

<h1>My First Page</h1>
<h2>I love HTML!</h2>
<h3>안녕 세상!</h3>  # 특정 브라우저에서는 한글이 깨져서 보일 수 있음

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tepor incididunt ut labore et delore magna aliqua.</p>

<!DOCTYPE html>

<title>My First Website</title>
<meta charset="utf-8">  # utf-8은 한글을 지원하는 대표적인 인코딩 방식

<h1>My First Page</h1>
<h2>I love HTML!</h2>
<h3>안녕 세상!</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tepor incididunt ut labore et delore magna aliqua.</p>

CSS 기초

HTML : 내용
CSS : 스타일

CSS 기본 문법

h1 {  # 스타일링 하고 싶은 요소
  font-size: 64px;  # 속성과 속성 값
  text-align: center;
}
# h1의 폰트 사이즈를 64px로 설정
# h1의 글을 가운데 정렬

<!DOCTYPE html>

<title>My First Website</title>
<meta charset="utf-8">

<h1>My First Page</h1>
<h2>I love HTML!</h2>
<h3>안녕 세상!</h3>

<p>Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit,
sed do eiusmod <i>tempor</i> incididunt ut labore et delore magna aliqua.</p>

<style>
h1 {
  font-size: 64px;
  text-align: center;  # align : 정렬
}

h3 {
  margin-top: 100px;  # margin : 여백
}

p i {  # p 태그 안에 있는 i만 스타일링 해주겠다는 뜻
  font-size: 48px;
}
</style>

기본 CSS 속성 정리

사이트에 CSS 스타일을 입혀주기 위해서 <style> 태그를 사용할 수 있습니다.

<!-- 여기에 html 코드 -->

<style>
/* 여기에 CSS 코드 */
</style>

아주 기본적인 CSS 속성 몇 가지만 봅시다. 그냥 간단하게 사용할 수 있는 정도로만 보고, 이후 섹션에서 각 속성을 더 자세히 살펴보겠습니다.

폰트 크기

CSS에서 폰트 크기를 표현할 수 있는 단위 몇 가지가 있는데, 그중 픽셀(px)이 가장 많이 사용됩니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<style>
h2 {
  font-size: 72px;
}
</style>

텍스트 정렬

글은 왼쪽, 가운데, 또는 오른쪽으로 정렬할 수 있습니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1 {
  text-align: left;
}

h2 {
  text-align: right;
}

h3 {
  text-align: center;
}
</style>

텍스트 색

글에 색을 입히고 싶으면 color 속성을 사용하면 됩니다. CSS에서 색을 표현하는 방식 몇 가지가 있는데, 나중에 살펴보도록 합시다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1 {
  color: lime;
}

h2 {
  color: hotpink;
}

h3 {
  color: blue;
}
</style>

여백

margin 속성을 사용하면 요소 사이의 여백을 설정할 수 있습니다. 여백의 크기도 픽셀(px) 단위로 설정해주시면 됩니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1 {
  margin-bottom: 80px;
}

h3 {
  margin-left: 50px;
}
</style>

실습과제: 텍스트 꾸미기 연습

HTML 태그를 직접 사용해봅시다.

홈페이지가 아래 그림처럼 구현되도록, 비어있는 style 코드를 채워주세요.

<h1> 태그는 가운데로 정렬하고, lime 색깔로 칠해주세요.
<h2> 태그는 오른쪽으로 정렬하고, hotpink 색깔로 칠해주세요.
<h3> 태그는 오른쪽으로 정렬하고, blue 색깔로 칠해주세요.
<p> 태그에는 ‘웹사이트’라는 단어가 두 번 나오는데요, 이 단어를 굵게 써주세요.
<p> 태그에 있는 글자 중 <i> 태그로 감싸진 ‘HTML’과 ‘JavaScript’ 글자의 폰트를 64px로 바꾸고, green 색깔로 칠해주세요.

<!DOCTYPE html>
<!-- 한글이 깨지지 않도록 코드 추가 -->
<meta charset="utf-8">

<title>Codeit</title>

<h1>내 첫 <i>HTML</i> 프로젝트</h1>
<h2>이름: 이윤수</h2>
<h3>이메일: yoonsoo@codeit.kr</h3>
<p>나는 <i>HTML</i>을 좋아한다. 앞으로 이 강의를 듣고, 나만의 <b>웹사이트</b>를 만들어볼 계획이다. 코드잇과 함께라면 무엇이든 가능하리라 믿는다. 아자아자 화이팅!</p>
<p>이번 <i>HTML</i> 수업 뒤에는 무엇이 기다리고 있을까? 설레는 마음으로 이번 과정을 끝낸 후, 다음 <i>JavaScript</i> 수업을 들어 <b>웹사이트</b>를 더 역동적으로 만들어봐야겠다!</p>

<style>
/* 여기에 CSS 코드 추가 */
h1 {
  text-align: center;
  color: lime;
}
h2 {
  text-align: right;
  color: hotpink;
}
h3 {
  text-align: right;
  color: blue;
}
p i {
  font-size: 64px;
  color: green;
}
</style>

head, body, html 태그

<!DOCTYPE html>

<title>My First Website</title>
<meta charset="utf-8">

<h1>My First Page</h1>
<h2>I love HTML!</h2>
<h3>안녕 세상!</h3>

<p>Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit,
sed do eiusmod <i>tempor</i> incididunt ut labore et delore magna aliqua.</p>

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

h3 {
  margin-top: 100px;
}

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

↓

<!DOCTYPE html>

<html>
  <head>
    <title>My First Website</title>
    <meta charset="utf-8">
    <style>
      h1 {
        font-size: 64px;
        text-align: center;
      }

      h3 {
        margin-top: 100px;
      }

      p i {
        font-size: 48px;
      }
    </style>
  </head>
  
  <body>
    <h1>My First Page</h1>
    <h2>I love HTML!</h2>
    <h3>안녕 세상!</h3>

    <p>Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit,
    sed do eiusmod <i>tempor</i> incididunt ut labore et delore magna aliqua.</p>
  </body>
</html>

<body></body> 태그는 우리 페이지에 나올 내용을 감싸 주는 역할을 한다.

<head></head> 사이에는 제목(title), CSS, JavaScript 등 내용 외 많은 것들이 여기 들어간다.

<html></html> 사이에는 전부 넣어주면 되는데, 이 사이에 있는 건 모두 html 코드라는 의미이다.

옵셔널 태그, 꼭 서야 할까?

이제 <html>, <head>, <body> 태그를 배워봤는데요. 이전에 이 태그들을 쓰지 않아도 별 문제없었죠? 이 세 태그는 사실 필수가 아니라 '옵셔널 태그'입니다.

그럼 이 태그들은 꼭 써야 할까요?

의견이 분분합니다.

이 강의에서 저는 정리(organization)의 목적으로 세 태그를 모두 사용하겠습니다. 요소들을 <head>와 <body>에 묶어주면 html 파일의 구조가 눈에 더 잘 들어온다고 생각하기 때문이죠.

하지만 세 옵셔널 태그의 사용을 권장하지 않는 의견들도 있습니다. 심지어 구글 HTML/CSS 스타일 가이드에서도 옵셔널 태그를 생략하라고 나와 있습니다.

개인적인 작업을 할 때는 직접 결정하시면 되고, 팀으로 작업을 할 때는 상의 후 정하시면 됩니다!

링크

다른 페이지로 가는 링크를 만들기 위해서는 a 태그를 사용하면 된다.

하이퍼링크(Anchor) → <a> 태그

HTML 태그에는 속성을 추가적으로 써 줄 수 있는데, 예를 들어서 a 태그는 href라는 속성을 갖는다. 여기에는 주소를 값으로 지정해 주면 된다. 그리고 평소처럼 태그를 닫아주고 그 사이에 내용을 써주면 된다.

<a href="가고 싶은 주소"> 내용 </a>
   속성     속성 값

<a href="https://google.com">구글로 가는 링크</a>

<a href="https://google.com" target="_blank">구글로 가는 링크</a>

target="_blank"를 추가하면 새 탭에서 페이지가 열리는 것을 확인할 수 있다.

이번에는 우리 사이트 내부적으로 왔다 갔다 하는 방법을 보자.

여러 파일을 여러 번 왔다 갔다 해야 하므로 Sublime Text를 통해 intro라는 폴더를 연 다음 folder1, folder2, page1, page2, page3를 생성한다.

intro 폴더 안에 folder1과 index
folder1 안에 page1과 folder2
folder2안에 page2와 page3

먼저 index에서 page1으로 가려면 어떻게 해야 될까?

index는 intro 폴더 안에 있다. 그리고 page1은 intro 폴더 안에 있는 folder1에 있다.

<a href="folder1/page1.html">page 1</a>

page2는 intro 안에 있는 folder1 안에 있는 folder2에 있기 때문에 다음과 같이 써 준다.

<a href="folder1/folder2/page2.html">page 2</a>

그러면 page1에서 index로 돌아가는 건 어떻게 해야 할까?

page1에서 index로 가기 위해서는 오히려 상위 폴더로 가야 된다. 상위 폴더로 가기 위해서는 ../ 이렇게 쓰면 된다.

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

그리고 page1에서 page2로 가기 위해선 다음과 같이 쓴다.

<a href="folder2/page2.html">page2</a>

페이지2에서 index로 가기 위해서는 폴더를 2번 타고 올라가야 한다.

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

그리고 page1으로 가기 위해서는 한 번만 타고 올라가면 된다.

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

page3는 page2와 같은 폴더에 있다.

<a href="page3.html">page3</a>

이미지

img는 src라는 속성을 갖는다.

# 인터넷에서 이미지를 가져올 때
<img src="이미지 주소" width="300" height="300">

intro 폴더에 images 폴더를 만들고 이미지 picture를 넣으면 다음과 같이도 쓸 수 있다.

# 폴더에 가지고 있는 이미지를 넣을 때
<img src="images/picture.jpg" width="300">

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

이미지를 가운데로 정렬하는 코드는 위와 같다.

사이즈 설정

픽셀

HTML에서 무언가의 크기를 설정할 때는 기본적으로 '픽셀(px)' 단위를 사용합니다.

픽셀은 화면을 구성하는 기본 단위입니다. 아래 이미지를 보세요.

별 이미지의 일부를 확대해서 보니까 작은 정사각형 단위로 되어 있죠? 각 정사각형을 픽셀이라고 부릅니다. 만약 어떤 이미지의 가로 길이가 100px로 설정되었다면, 가로로 저 작은 정사각형 100개가 있다는 거죠.

폰트 크기

폰트 크기도 픽셀로 설정하는 경우가 많은데요. 폰트 크기가 24px로 설정되어 있으면 폰트의 세로 길이가 24px이라는 뜻입니다.

퍼센트

길이를 픽셀 말고 퍼센트(%)로 설정할 수도 있습니다.

# HTML
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="100%">
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="50%">
<img src="https://i.imgur.com/CDPKjZJ.jpg" width="25%">

# CSS
img {
  display: block;
}

실습과제: 프로필 페이지

프로필 페이지

기본적인 HTML 태그 몇 가지를 배웠으니, 간단한 프로필 페이지 정도는 만들 수 있겠죠? 가장 좋아하는 유명 인물을 소개하는 사이트를 만들어보세요!

아래의 순서대로 요소를 넣어주세요:

title 태그에 인물 이름
h1 태그에 인물 이름
img 태그에 인물 사진 (인터넷에 올라와 있는 이미지)
p 태그에 간단한 설명 (b 태그와 i 태그 하나씩 포함시켜주세요.)
이 인물과 연관 있는 사이트로의 링크 (a 태그) 한 개

나의 답안

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"
  <title>유재석</title>
</head>
<body>
  <h1>유재석</h1>
  <img src="https://img.hankyung.com/photo/202107/03.21269352.1.jpg" width="300">
  <p><b>직업</b> : <i>개그맨</i></p>
  <a href="https://www.hankyung.com/entertainment/article/202107148935H" target="_blank">관련기사로 이동</a>
</body>
</html>

'~2023.02 > 웹퍼블리싱' 카테고리의 다른 글

웹 퍼블리싱_[토픽1] HTML/CSS 시작하기 _ 어떤 섹션 & 꿀팁 (0)	2021.09.18

<!DOCTYPE> 선언

<title> 태그

<h1>~<h6> 태그

<p> 태그

<b>태그

<i>태그

Phrase Tags

<strong> 태그

<em> 태그

폰트 크기

텍스트 정렬

텍스트 색

여백

그럼 이 태그들은 꼭 써야 할까요?

픽셀

폰트 크기

퍼센트

프로필 페이지

나의 답안

'~2023.02 > 웹퍼블리싱' 카테고리의 다른 글

티스토리툴바