HTML&CSS 첫 수업 기록

HTML&CSS 첫 수업 기록

2020. 10. 27. 17:43ㆍHTML & CSS 💙/웹퍼블리셔 수업기록

Visual studio code 사용하여 첫 수업 진행.
오늘은 정식 수업은 아니고 선수업 단계이다. 오늘 2시간, 다음 2시간 후에 본수업 시작이 된다.
수엄이 어려워서 못 따라갈까봐 미리 연습했던 것들이 많은 도움이 되었다.
역시 유튜브... ㅠㅠ 갓튜브..

선생님이 열심히 기본구조 설명하실 때
혼자 배운 것들을 연습해 보았다.
역시 안 보고 혼자 하려니까 허접하구만..

<!---html 문서에 주석 달기, 웹문서에 나타나지 않으며, 개발자들끼리 설명 달아주기 태그 --->
<!-- ctrl +/ 주석 단축키 현재의 문서가 웹표준으로 만들어진 문서임을 선언 -->
<!-- 
    hyper text markup language 
    html은 웹문서에 마크업(coding)하는 언어
    어디가 이미지이고 어디가 text인지 표시하는 것을 마크업이라고 한다.
    마크업할 때 사용하는 언어를 태그(tag)라고 한다.
-->
<!DOCTYPE html>


<html>
     <!-- head에는 문서와 관련된 정보 -언어, 제목, 외부파일 연결 등을 함. 
    meta태그는 언어를 표시하는 태그로, 닫는 태그가 없다. 인코딩 방식으로 한글 영어 뿐 아니라 모든 언어를 표시함. 
    title태그는 문서에 제목을 붙여주는 태그 -->
    <!-- alt L / alt o 누르면 웹페이지로 코딩한 화면이 보인다 -->
    <!-- ctrl / 주석 태그 -->

    <head>
        <meta charset="utf-8">
        <title>01-html기초</title>

        <style>
            div { width:300px; background-color: darkorchid; margin: 0 auto; font-weight: bold;}
            div p: :hover {color:green; font-size:2em;}
            * {text-align: center;}
        </style>

    </head>
     <h1>오늘의 메뉴</h1>
     <h3>오늘 저녁은 뭐먹을까?</h3>
     <div>
         <p>아이스 아메리카노</p>
         <textarea>요구사항 넣기</textarea>
         <select>
            <option>아아</option>
            <option>여린잎녹차</option>
            <option>망고쉐이크</option>
            <option>밀크티</option>
         </select>
     </div>

    <body>

    </body>

</html>

이 것은 오늘 수업에서 배운 것들이다.
어제까지 혼자 연습했던 것들을 하루에 다 배운다..
이미 혼자 공부한 것들을 다시 복습하는 느낌이라 쉽고 재미있다는 느낌이 들면서도
혼자 시간낭비 한 것이 아닐까... 살짝 씁쓸..ㅎㅎ
그래도 선생님 설명이 머릿속에 쏙쏙 들어와서 다행이다.

그나마 영타가 빨라서 코딩할 때 속도는 빠른 편이당 ㅎㅎ 그것도 다행..
많이 많이 연습해야겠다~!!

<!---html 문서에 주석 달기, 웹문서에 나타나지 않으며, 개발자들끼리 설명 달아주기 태그 --->
<!-- alt L / alt o 누르면 웹페이지로 코딩한 화면이 보인다 -->
<!-- ctrl / 주석 태그 (html문서 안의 주석)-->

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>01-html기초</title>
        
        <!-- 내부 CSS 문서 작성 -->
        <style>
            /* (CSS안의 주석) h1태그를 선택해서 중괄호 안의 스타일을 적용해라. */
            /* 태그선택자 {속성:속성값;} */
            /* (* {})은 전체 선택자, 모든 태그를 선택 */
            /* 모든 태그는 기본적으로 여백을 갖고 있다. 이걸 없애야 내맘대로 위치를 정할 수 있다. */

            * {margin: 0; padding: 0;}
            /* 여백을 없애주는 태그이며, default 값으로 항상 써야 하는 태그 / margin 바깥여백 */

            body {text-align: center;}
            /* 스타일을 상속한다 - 부모한테 스타일을 적용했을 때 자식개체들에게 적용됨. */

            h1 { 
                color:aquamarine; 
                text-align: center;
                /* text-align은 크기가 정해지면 더이상 먹히지 않기 때문에 border, margin으로 스타일 설정을 해야 한다.  */
                font-size: 50px; 
                background-color: cadetblue; 
            }

            p {
                color: rgb(0, 68, 194);
                background-color: rgba(169, 169, 169, 0.397);
            }

            h2 {
                width: 500px; 
                height: 200px;
                /* 가로크기 100%가 기본값 */
                border-width: 2px;
                border-style: solid;
                border-color:rgb(187, 0, 56);
                /* border:1px solid rgb(187, 0, 56) 이렇게 한꺼번에 쓰는 것이 간편함 */
                margin:20px auto 20px auto; 
                /* 시계방향으로 바깥쪽 여백을 20 20 20 20 이렇게 줘도 된다.  */
                /* 위, 아래는 auto가 안 먹는다. */
            }


        </style>

    </head>
     

    <body>
        
        <!-- web browser 화면에 표시될 내용  -->
        <h1>HTML5란?</h1>

        <!-- title 태그인 h1태그는 한 번만 쓸 수 있다. h1~h6까지 있다. -->
        <!-- p tag: 텍스트 단락을 삽입하는 본문 태그 -->
        <!-- br tag: 줄바꿈태그이며, 닫는 태그가 없다 -->
        <!-- 현재 p태그입장에서 br태그는 자식이다. -->

        <p>웹에는 텍스트 뿐만 아니라 이미지, 링크 등 여러 요소들이 있다. <br />
            이런 요소들을 모두 다루고 표시할 수 있는 문서가 html(hypertext markup language)이다. <br />
            이러한 문서를 작성하는데 필요한 문서가 html이다. <br> 
            html로 작성된 문서를 사용자에게 보여주는 프로그램이 웹 브라우저이다.</p>

        <h2>웹 브라우저의 종류</h2>
        <h3>마이크로 소프트 엣지, 익스플로러</h3>
        <h4>애플- 사파리</h4>
        <h5>모질라-파이어폭스</h5>
        <h6>구글- 크롬</h6>

        <select>
            <option>엣지</option>
            <option>익스플로러</option>
            <option>크롬</option>
            <option>사파리</option>
        </select>

    </body>

</html>

저작자표시 비영리 변경금지

Maryable Day

Maryable Day

태그

최근글

댓글

공지사항

아카이브

티스토리툴바