TIL(20.03.02) HTML,CSS

이민택·2020년 3월 2일

CSS JavaScript TIL html

TIL

목록 보기

14/44

HTML

HTML이란 HyperText Markup Language 의 약자로 웹페이지 문서를 작성하기 위해 사용하는 마크업 언어이다

Tag

HTML은 Tag를 이용해서 문서를 작성할 수 있다 대표적인 태그는 아래와 같다

head : html문서의 부수적인 정보를 담고 있는 태그
body : html문서의 메인내용을 담고 있는 태그
div : 단락을 구분하는 태그
span : 태그가 감싸고 있는 컨텐츠 만큼만 공간을 차지 하는 태그
img : 이미지를 담는 태그
a : 링크를 삽입하는 태그
ul&li : 리스트를 나타내는 태그
input : 입력란을 사용하는 태그
textarea : text를 입력할 수 있는 태그
button : 사용자로 부터 입력을 받을 수 있는 태그

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>제목</title>
    </head>
    <body>
        <div>이 태그는 div</div>
        <span>아 태그는 span</span>œ
        <div>
            <img src="https://image.dongascience.com/Photo/2018/01/15159739972169[1].jpg"/>
        </div>
        <div>
            <a href="https://www.naver.com" target="_blank">네이버 링크</a>
        </div>

        <ul>
            <li>Item 1</li>
            <li>Item 1</li>
            <li>Item 3
                <ul>
                    <li>Item 3-1</li>
                </ul>
            </li>
        </ul>

        <div>
            <input type="text" placeholder="type here">
        </div>
        <div>
            <input type="password" name="" id="">
        </div>
        <div>
            <input type="checkbox" name="" id=""> 다음의 들어올 때 아이디 기억하기
        </div>
        <div>
            <input type="radio" name="choice" id="">옵션 A
            <input type="radio" name="choice" id="">옵션 B
        </div>

        <textarea name="" id="" cols="30" rows="10">줄바꿈이 됩니다</textarea>

        <div>
            <button>Submit</button>
        </div>
    </body>
</html>

class,id

각 태그 별로 고유한 값을 지정할 수 있는데 이것을 class,id를 이용해서 할 수 있다 일반적으로
class는 댓글,게시물,버튼등 여러번 반복하는 태그들을 종합적으로 관리할 때 사용한고 id는 그 태그만 가지고 있을 수 있는 고유한 값을 나타 낼 때 사용한다

  <div>
        <a  id ="naverLink" href="https://www.naver.com" target="_blank">네이버 링크</a>
  </div>

        <ul>
            <li class="listContent">Item 1</li>
            <li class="listContent">Item 1</li>
            <li class="listContent">Item 3
                <ul>
                    <li>Item 3-1</li>
                </ul>
            </li>
        </ul>

javascript 코드 사용법

html문서에서 자바스크립트를 사용하는 방법은 3가지 이다

html문서 내부에 작성하는 방법

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
</head>
<body>
    <script>
        alert('javascript alert');
    </script>
</body>
</html>

html문서 외부에 작성하는 방법 아래와 같이 작성하고 main.js 파일에서 alert함수를 호출하면 똑같이 작동한다

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

CSS

CSS는 Casecading Style Sheet 의 약자이고 HTML문서의 디자인을 나타내기 사용한다 원래는 태그의 속성을 태그에 style 속성에다 작성하지만 css를 사용하면 이 각 태그마다 속성을 한번에 적용할 수 있다
사용법은 2가지가 있다 각 태그에 속성을 정하기 위해서 일단

html 내부에서 사용하는 방법
이 방법은 간단한 스타일을 별도 파일 생성없이 적용할 수 있다 이 css에서는 태그를 이용해서 속성을 부여하고 있다

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: linen;
        }

        h1 {
            color: maroon;
            margin-left: 40px;
        }
    </style>
</head>

<body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

</body>

</html>

html 외부에서 사용하는 방법
이 방식은 새로운 css파일을 만들어서 적용하는 방식이고 css내부에서 class를 호출하여 속성을 부여하느 것을 볼 수 있다 class의 경우 . dot 을 이용하여 호출이 가능하고 id는 #을 이용하여 호출이 가능하다

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css연습</title>
        <link rel="stylesheet" type="text/css" href="myFirstStyle.css"/>
    </head>
    <body>
        <div class="impact red">
            <div>
                <span><h1>Supreme</h1></span>
                <span><h1>Supreme</h1></span>
                <span><h1>Supreme</h1></span>
                <span><h1>Supreme</h1></span>
                <span><h1>Supreme</h1></span>
            </div>
        </div>
    </body>
</html>

css파일

h1{
    color:white; 
    box-sizing: border-box;
    background-color: red;
    text-align:center;
    width: 180px;
    float: left;
    border:3px solid white; 
    
}
div{
    width: 100%;
}
.impact{
    font-style: italic;
}