저번에 포스팅한 도메인 구매 및 웹호스팅에 이어 기본적인 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를 이용하여 반응형이 되게끔 조절하였다.

위에서 사용한 속성 외에도 다양한 속성이 있으니 잘 사용하면 좋겠다.

+ Recent posts