SMALL
안녕하세요~ 보라해바라기입니다. 오랜만이죠?
저는 요즘 알바도 하고 어제부터 프론트엔드 수업을 본격적으로 듣기 시작했습니다.
복습의 일환으로 수업 내용을 바탕으로 한 여러 웹 페이지를 만들어 볼 예정입니다.
저의 주제는 제가 좋아하는 영화 시리즈 중 하나인 토이스토리!
html의 구조와 여러 태그를 활용해 토이스토리 소개 페이지를 만들었습니다.
1. html
<!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>ToyStory</title> <!--웹페이지의 제목-->
<link rel="stylesheet" href="toystory.css"> <!--toystory.css 파일과 연결해 css파일의 속성을 적용할 수 있도록-->
</head>
<body>
<h1>토이 스토리</h1> <!--제목-->
<img src="./images/toystory1.jpg"> <!--이미지 삽입. 상대경로 활용-->
<p> <!--단락 구분-->
<b>토이스토리</b>는 1995년 월트 디즈니 컴퍼니가 배급하고 픽사 애니메이션 스튜디오가 제작한 장난감을 다룬 3D 애니메이션이다.
<!-- b : 글씨 굵게 -->
</p>
<p>
픽사의 최초의 <em>장편 애니메이션</em>이고, 전세계 최초의 <em>풀 CG 3D 애니메이션 영화</em>이다.
<!-- em: 글씨 강조 -->
</p>
</body>
</html>2. css
img {
width: 300px;
height: 400px;
}
/*높이가 400px이고 너비가 300px인 이미지*/3. 결과
예전에 html과 css를 독학한 적이 있어 첫 수업 내용은 무난하게 마무리했습니다.
*핵심*
- img 태그에는 상대경로와 절대경로가 있다.
- 절대경로는 경로 그대로를 src에 쓰는 것
- 상대경로는 지금 파일을 기준으로 src에 쓰는 것
- 절대경로는 파일을 다른 컴퓨터로 옮겼을 때, 경로 자체가 의미없어져버리기 때문에 잘 사용 X
- 상대경로에도 두 가지 표현 방법이 존재
- . (점 하나)는 현재 폴더 기준, ..(점 두 개)는 현재 폴더보다 상위에 있는 폴더를 기준으로 파일 불러오기!
728x90
'HTML & CSS' 카테고리의 다른 글
| [FrontEnd1] 4월 3째주 한 페이지 개념 정리 (0) | 2022.04.19 |
|---|---|
| [FrontEnd1] 여러 태그 (a, img 응용, br, div, ul, ol, li, style)과 내부 속성(style 속성) / 토이스토리 게시판 형태 만들기 (0) | 2022.04.15 |
| [HTML & CSS] 기본 개념 정리 (0) | 2022.01.21 |
| [HTML & CSS] 모각코 활동 후기 :) (0) | 2021.12.01 |
| [HTML & CSS] 모각코_3주차 (0) | 2021.11.27 |
댓글