1. 새로운 stylesheet 또는 CSS파일을 생성한다.
2. 생성한 CSS파일에 HTML속 style내용만 복사 붙여넣기 한다.
3. HTML에서 style 부분을 완전히 제거하고 해당 코드를 추가한다. (href 부분은 파일명과 동일하게 수정)
<link rel="stylesheet" type="text/css" href = "mystyle.css">
| 부트스트랩과 원하는 폰트로 주문 화면 만들기 (0) | 2021.07.26 |
|---|---|
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |
<!--이런식으로 처리되는 곳도 있고...-->
<style>
*{
/* 이런식으로 처리되는 곳도 있다..*/
}
</style>
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |
| HTML의 기초 (0) | 2021.07.16 |
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. 위 링크에서 원하는 폰트를 누릅니다.
2. '+ Select this style' 버튼을 누릅니다.
3. 우측에 보면 Use on the web이라는 곳에 코드가 2개 있습니다. 우선 위에있는 link코드를 html 헤더 title 아래에 넣어줍시다.
4. 다음으로 link코드 아래에 있는 CSS 코드를 style에 넣어줍니다.
* { }는 모든 태그에 저 효과를 넣어준다는 이야기 입니다.
5. 확인하면 폰트가 적용된 것을 확인할 수 있습니다.
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |
| HTML의 기초 (0) | 2021.07.16 |
강철의 연금술사 BROTHERHOOD 소개
4부작 (64화)
피가 많이 나와서 청불, 후방주의 장면은 없음
판타지, 감동, 성장, 로맨스 등
★★★★★
(주관적인 별점 기준)
***별점 매우 짜게 줍니다***
***2점 이상은 다 볼만합니다***
0점 : 개 쓰레기 애니
1점 : 시작은 했으니 억지로 본 애니
2점 : 딴짓하면서 틀고 볼만한 애니
3점 : 나름 재밌었던 애니
4점 : 지인들에게 강력 추천할만큼 재밌는 애니
5점 : 세상에 알려야 할 애니
강철의 연금술사는 오리지널과 리메이크판인 브라더후드 2종류의 애니가 있습니다.
- 오리지널: 중반까지는 만화책(원작)내용을 따라가다가 만화책보다 연재가 빨라져서 결말을 애니에서 지은 작품
- 브라더후드: 만화책 내용을 충실하게 담은 작품
오리지널과 브라더후드 모두 명작 소리를 듣긴 하지만 오리지널은 결말과 악당들이 만들어진 이유를 아쉽게 풀어나갔다는 의견이 있습니다. 그래서 원작을 충실하게 따라가는 브라더후드를 추천합니다!
초반 스토리
주인공인 엘릭형제는 아버지를 닮아 어렸을때 부터 연금술에 재능이 있었습니다. 어린나이에 저런 연성진을 그리면서 공부하는 것만 봐도 차원이 달라보입니다!
어느날 어머니까지 잃게된 엘릭형제는 어머니를 살리기로 결심합니다. 정확히는 형인 에드워드가 살리자고 합니다. 하지만 연금술로 인체연성을 하는 일은 금지된 일이라고 책에 써있었습니다.
연금술은 등가교환의 법칙을 가지고 있기 때문에 엄마를 살리기 위해, 인간의 몸을 구성하는 성분과 영혼의 정보인 본인들의 피를 넣고 인체 연성을 도전합니다...
(옛날에는 이 장면으로 웃긴 패러디를 많이해서 저는 강철의 연금술사가 이상한 애니라고 생각했었습니다..)
하지만 결과는 참혹했습니다. 형인 에드워드는 금지된 연금술을 사용한 대가로 다리를 잃고 동생 알폰스는 몸 전체를 잃었습니다.
심지어 어머니가 생겨야 할 자리에는 알수없는 괴물이 탄생해버렸습니다. (무서울수도 있어서 접은글로 넣었습니다)
어머니를 살리기 위해 했던 행동으로인해 동생을 잃게되어버린 에드워드는 동생의 영혼을 넘어져있는 갑옷에 넣기위해 연성진을 그립니다.
눈이든 심장이든 다 줄테니까 하나뿐인 동생을 돌려달라고 절규하는 장면은 정말 가슴을 찢어지게 합니다...
결국 동생의 영혼을 갑옷에 정착시키고 등가교환의 대가로 에드워드는 팔 한쪽까지 잃었습니다. 그래도 소꿉친구인 윈리의 도움을 받아 다리와 팔에 오토메일을 장착하여 신체처럼 사용할 수 있습니다.
에드워드는 연금술의 능력을 인정받아 국가연금술사가 되어 '강철의 연금술사'라고 불리게 됩니다. 하지만 동생인 알폰스의 외형이 너무나도 강철의 연금술사처럼 보여서 오해를 사곤합니다 ㅎㅎ
이렇게 '강철의 연금술사'인 에드워드와 동생 알폰스는 자신들의 몸을 되찾고 어머니를 되살리기는 방법을 찾기 위해 여행을 떠납니다!
후기
진짜 정말 재밌습니다. 저는 명작충이라서 명작이라는건 다 봐야 속이 후련해지기 때문에 일단 시작은 했는데.. 64화가 너무 길어서 다 볼 수 있을지 걱정을 하며 봤습니다.
뭐 그런 생각은 애니 3화정도 보니까 싹 날아갔습니다. 역시 애니는 3화까지 보고 판단하라는 말이.. 그냥 있는 말이 아닙니다! 스토리도 정말 잘 짜여져있고 무엇보다도 흡입력이 장난아닙니다. 일부로 매 편마다 아쉽게 끝내는 것도 아닌데, 다음화를 계속 누르고 있는 자신을 볼 수 있습니다.
처음에는 그림체도 요즘 애니와 다른 느낌이라 조금 끌림이 덜 했고 왓챠에는 더빙판만 있어서 조금 아쉽다고 생각을 했습니다. 그런데 애니를 보면 압니다.. 그림체 나름 진짜 예쁘고 에드워드가 보면 볼수록 너무 멋져져서.. 반해버릴 수 있습니다 ^^ 그리고 더빙판 성우분들이 연기를 너무 잘해주셔서 저는 자막판 이제 못봅니다.
더빙판 알폰스.. 목소리 너무 귀여워요.. ㅠㅠ
스토리는 말 할게 없습니다. 나름 애니를 많이 봤지만 이렇게 모든 떡밥을 회수하고 결말까지 완벽한 애니는 처음 봅니다. 저는 '코드기어스'를 정말 좋아하는데 결말은 정말 반전있었지만 솔직히 스토리는 답이 없거든요... 요즘 떠오르는 '귀멸의 칼날'도 인기가 참 많습니다만, 원작 결말보면 참 아쉽습니다. 원나블은 말 할것도 없지요....
악당들도 정말 매력적입니다. 저는 악당들도 악당이 된 이유가 있다며 신파를 만들기위해 슬픈장면을 꾸역꾸역 넣는 애니를 정말 싫어합니다. 강연은 이런 요소를 적당하게 넣어서 재미있게 볼 수 있었습니다. 저 대머리 악당.. 처음에는 이상해보이는데 나중가면 너무 귀여워요 ㅋㅋㅋ
그리고.. 러브라인이 명확합니다. 저는 하렘, 역하렘물을 선호하지 않는편이라 명확한 러브라인이 있는 애니를 좋아합니다. 누가봐도 얘네가 러브라인이다 싶어야 둘을 덕질하기 때문이죠.. 그런점에서도 만점을 주고싶습니다!!
제가 제일 좋아하는 장면중 하나인데요.. 에드워드가 끌려나가는 도중에 동생인 알폰스한테 구하러올테니 가디라리고 하는 장면입니다! 엄청난 스포가 될 수도 있는 장면이지만 이렇게 말씀드리면 기억 못하니 괜찮아요 ㅋㅋ 정말 에드 너무 멋져요..
마지막으로.. 강연은 안보시더라도 오프닝 중 하나인 'rain'은 꼭 들어보시는걸 추천해요! 아마 애니 좀 봤다 하시면 이 노래 들어본적이 있을수도 있어요 ㅎㅎ 저도 애니 보기전에 이 노래는 너무 좋아서 알고있었거든요! 이젠 1일 1rain이 아니면 안되는 몸이 되어버렸ㅇ...
그래도 노래만 듣지말고 강연 꼭 봅시다!! ㅎㅎ
| 늑대와 향신료 후기(스포 X) (0) | 2021.10.10 |
|---|---|
| 마법소녀 마도카 마기카 후기(약 스포 O) (0) | 2021.10.10 |
| 스즈미야 하루히의 우울 후기 (약 스포 O) (0) | 2021.10.09 |
[CSS]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<!--각 명찰은 head안의 style에서 꾸며줍니다-->
<style>
.mytitle{
color: red;
}
</style>
</head>
<body>
<!--h1은 제목으로 하나씩 사용해줍시다-->
<!--class는 각 태그를 지징하는 명찰의 역할을 합니다-->
<h1 class="mytitle"> 로그인 페이지</h1>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>전에 작성했던 간단한 로그인 화면을 활용하였습니다.
- class는 각 태그를 지칭하는 명찰의 역할을 합니다.
- 명찰은 head 안에서 꾸며줄 수 있습니다. style안에다가 명찰의 이름을 적고 꾸며줍니다.
로그인 화면 꾸미기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<!--각 명찰은 head안의 style에서 꾸며줍니다-->
<style>
.mytitle{
background-color: green;
width: 300px;
height: 200px;
color:white;
text-align: center;
background-image:url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top:20px;
}
.wrap{
width: 300px;
margin:auto;
}
.mybtn{
display: block;
margin: auto;
}
.red-font{
color: red;
font-size: 38px;
}
</style>
</head>
<body>
<div class="wrap">
<!--div는 구역을 나눠줍니다-->
<div class="mytitle">
<!--h1은 제목으로 하나씩 사용해줍시다-->
<h1> 로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>뭔가 뭉탱이로 코드를 적어버렸지만 자세히 살펴봅시다.
mytitle: 사진과 함께 화면에 대한 설명을 하는 영역
wrap: body 전체를 묶고있는 영역 (화면 전체를 중앙정렬 하고 싶다)
mybtn: 로그인 버튼입니다. 이건 영역이나 블럭이 아니라 '글'로 취급되기 때문에 정렬방식이 특이합니다.
red-font: 글자를 빨간색으로 지정합니다. 한 태그에 여러 스타일을 지정할 수 있다는 것을 보여드리기 위해 만들었습니다.
ex) 버튼에 mybtn과 red-font를 같이 적용하기
<button class="mybtn red-font">로그인하기</button>
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| HTML의 기초 (0) | 2021.07.16 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>러아니푸의 HTML 공부</title>
</head>
<body>
안녕하세요. html공부 열심히 해봐영 ^^7
</body>
</html>- <title> </title> 과 같은 것을 태그라고 부른다
- 태그 사이에 값을 넣으면 화면에 반영이 된다
- title은 말 그대로 웹사이트 타이틀과 같은 페이지 이름을 의미한다
- body 부분은 사용자가 가장 많이 사용하고 보는 화면의 부분을 의미한다
자주 사용되는 HTML 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>- 다 외울 필요는 없지만 자주 쓰게 되는 태그는 외우는 것이 좋을듯 하다. 처음 개발할 때는 보면서 가져다 쓰고 익숙해지면 점점 외워질 듯 싶다.
로그인 화면을 만들어 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<!--h1은 제목으로 하나씩 사용해줍시다-->
<h1> 로그인 페이지</h1>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>- 전체를 드래그하고 ctrl+alt+l 을 누르면 자동으로 정렬해준다. 그런데 조금 마음에 안들게 정렬될 수 있음..
- h1은 꼭 화면당 하나씩 넣어주자... 구글 검색에 도움이 될 수 있다
- p는 줄바꿈 할때 사용한다
- button을 사용하여 버튼을 만든다
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| CSS의 기초 (0) | 2021.07.17 |