저번에 포스팅한 도메인 구매 및 웹호스팅에 이어 기본적인 html 문법에 대해 공부하였다.
웹 호스팅 및 웹 개발 시작하기
웹 개발 공부를 하기 위해서 웹 호스팅을 찾아보았다. 그 중 호스팅 전문 업체인 dothome에서 도메인 구매시 할인 및 무제한 웹호스팅 제공 이벤트를 해서 dothome에서 도메인을 구매하였다. 1년 구매시 13500원..
blog.lockcept.kr
간단하게 플레이하는 게임인 리그오브레전드 관련 자료를 이용하여 구현해보았다.
웹의 모습과 코드는 다음과 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>록셉은 오공을 잘할까?</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="../lockcept2_white-alpha.ico">
</head>
<body>
<div>
<a href="https://www.op.gg/summoner/userName=%EB%A1%9D%EC%85%89"><img src ="opgg.png"></a> <br>
<img src="https://ddragon.leagueoflegends.com/cdn/9.18.1/img/champion/MonkeyKing.png" /> <p> this is wukong </p>
<img src="https://ddragon.leagueoflegends.com/cdn/4.18.1/img/champion/MonkeyKing.png" /> <p> this was wukong </p>
<div style="position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0;">
<iframe width="320" height="180" src="https://www.youtube.com/embed/k1zAhC5aeQs" frameborder="0" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
</div>
</body>
</html>
|
cs |
1. 사진 넣기
<img src="이미지경로" alt="이미지설명" height="세로길이" width ="가로길이">
이미지 경로에는 opgg.png와 같이 상대경로에 존재하는 서버 파일이나, https:// ~~ 와 같이 웹상의 사진 모두 사용할 수 있다.
2. 링크 걸기
html의 링크는 <a> 태그로 만든다.
기본적으로 href 속성의 값에 이동할 위치를 넣는다. 예를 들면,
<a href="lockcept.kr> 홈페이지 </a>
코드의 예시와 같이 텍스트가 아닌 이미지에 링크를 걸 수도 있다.
그 외에 자주 사용하는 속성으로는 target, download가 있다.
target은 링크를 어떻게 열지 정하는 속성인데, 새 탭으로 열게 하거나 현재 페이지에서 열게 하는 등의 선택지가 있다.
download는 링크를 다운로드할 지 결정할 수 있다.
3.유튜브 영상 넣기
유튜브에서 소스코드 첨부를 눌러 복사 붙여넣기 하면 된다.
이 때에, 추가적으로 div를 이용하여 반응형이 되게끔 조절하였다.
위에서 사용한 속성 외에도 다양한 속성이 있으니 잘 사용하면 좋겠다.
'개발 인생 > Web' 카테고리의 다른 글
| Typescript / Javascript 환경에서 메르센-트위스터 [MT19937] 알고리즘 사용하여 난수 생성하기 (0) | 2023.12.06 |
|---|---|
| [웹개발] lockcept-world (2) | 2021.02.27 |
| Bootstrap 반응형 Container & Grid (0) | 2019.12.30 |
| 웹 Bootstrap 적용하기 (0) | 2019.12.29 |
| 웹 호스팅 및 웹 개발 시작하기 (0) | 2019.10.06 |