코누나님 - HTML, CSS / Chapter 2- 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>Document</title>
    <style>
        table, th, td {
            border : 1px solid #111;
        }
    </style>
</head>
<body>
    <!-- html:5 타이핑 후 enter => 템플릿 자동완성 -->
    <h2>자기소개서</h2>
        <p>안녕하세요 제 이름은 <strong>김하연</strong>입니다.</p>

    <h3>좋아하는 음식</h3>
        <ul>
            <li>사천식 닭날개</li>
            <li>야채곱창</li>
            <li>소곱창</li>
        </ul>

    <h3>좋아하는 가수</h3>
        <img src="https://img.vogue.co.kr/vogue/2019/06/style_5d10844730af1.jpg" style="max-width: 100%; height: auto;">
        <p>TWICE</p>
        <a href="https://www.youtube.com/channel/UCzgxx_DM2Dcb9Y1spb9mUJA">TWICE 유튜브 보러가기</a>

    <h3>좋아하는 노래</h3>
    <audio controls>
        <source src = "https://docs.google.com/uc?export=open&id=1hL-XYS37KIYjxx73lLE5u_bLykGbxnLT" type="audio/mp3">
    </audio>

    <h3>인적사항</h3>
    <table> 
        <!-- style 태그에 table, th, td 어쩌구 써놓긴했는데 그냥 table border ="1"로 하면 된다. -->
        <tr>
            <th>질문</th>
            <th>답변</th>
        </tr>
        <tr>
            <td>사는 곳</td>
            <td>하남시</td>
        </tr>
        <tr>
            <td>나이</td>
            <td>23살</td>
        </tr>
    </table>
    <p>테이블 쓰는 방법을 모르겠다고? <u>그럼 검색해봐!</u></p>
    
    <h3>연락 & 문의</h3>
    <input type="text" name="qna" placeholder="궁금한 사항을 써주세요">
    <input type="submit">
    <footer style="height:100px">
    </footer>
</body>
</html>

지난 여름방학 때 현장실습하면서 회사 홈페이지 디자인을 해보면서

html, css, js 파일을 조금 작성해봤었는데 (사실상 js파일은 거의 복붙대잔치였다...)

그 이후로 또 기말고사 때 jsp 파일 작성하면서 또 하긴했는데 아무튼

내가 자바스크립트에 너무 약해서 다시 기초를 다지는 겸 코누나님의 html, css 강의를 듣기 시작했다.

이거 다듣고 자바스크립트도 들을 예정 (이미 구매는 했다.)

나머지는 그래도 무난히 했는데 정작

table에 저런식으로 테두리 넣는걸 싫어해서 그냥 border = 1하면 저렇게 되는지 전혀 몰랐다.

혼자 table style = "border : 1px;" 이따구로 했는데 안먹혀서 걍 모양이라도 흉내내려고 어휴...

그리고 audio 태그 특히 구글드라이브 링크를 어떻게 해야할지 애먹었었는데

이 링크를 참고했다. https://ojji.wayful.com/2018/02/How-to-Embed-MP3-audio-from-Google-Drive-to-website-Blog.html

구글 드라이브 사용법: MP3 오디오 파일을 웹페이지 블로그에 올리는 방법과 꾸미기 (오디오 재생

구글 드라이브에 있는 MP3 오디오 파일을 웹페이지나 블로그에 올리고 플레이어를 보이게 하는 방법을 설명합니다

ojji.wayful.com

마지막으로 애먹었던 것.

input 태그... 이번 기말 과제 제출하면서 많이 썼는데도 그걸 고새 또 까먹었다... 어휴

input 안에 있는 속성들은 type, name, placeholder 등이 있는데 자세한건 여기를 참고하도록 하고...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

이번 경우에는 placeholder를 사용했는데, placeholder는 실제 value는 아니지만 input에 입력하기 전에 보여지는 text로

얘를 까먹어서 죽어라 헤맸다.

제출 버튼은 type = "submit" 만 넣어주면 끝.

'html, css' 카테고리의 다른 글

코누나님 - HTML, CSS / Chapter 7 - 반응형 웹사이트 만들기 Bootstrap (0)	2022.05.16
코누나님 - HTML, CSS / chapter 6 - Spotify 웹사이트 만들기 (0)	2022.05.15
코누나님 - HTML, CSS / chapter 5 - HTML을 좀 더 쉽게 움직이는 방법 (0)	2022.02.16
코누나님 - HTML, CSS / Chapter 4 - 구글 웹사이트 만들기 (0)	2022.02.07
코누나님 - HTML, CSS / Chapter 3 - CSS 웹사이트 꾸미기 (0)	2022.02.06

hykim

코누나님 - HTML, CSS / Chapter 2- HTML 웹사이트 뼈대

'html, css' 카테고리의 다른 글

티스토리툴바

코누나님 - HTML, CSS / Chapter 2- HTML 웹사이트 뼈대

'html, css' 카테고리의 다른 글

'html, css' Related Articles

티스토리툴바