오늘도 삽질중

HTML 본문

HTML,CSS

HTML

해빋 2021. 8. 27. 11:17 
   <ul>
        <li>커피</li>
        <li>바나나</li>
        <li>토마토</li>
    </ul>

HTML

 

HTML은 HyperText Markup Language의 약자로 웹페이지를 구성하는 마크업 언어이다. 글자 그대로, HTML은 프로그래밍 언어가 아니다. HTML은 웹 페이지를 구성하는 뼈대가 된다. HTML은 구조를 표현하는 언어이기 때문에 HTML의 구조를 잘 짜 놓으면, 자바스트립트로 개발을 할 때 더욱 직관적인 코드를 작성할 수 있다. 

 

-html은 태그들의 집합

-TAG: 부등호 (< >)로 묶인 HTML의 기본 구성 요소

-HTML확장자 사용

 

  • HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
  • HTML이 Markup language라는 것을 이해할 수 있다.
    • "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
  • HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
    • Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
  • 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
    • div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
    • ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
    • input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
  • 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
    • 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
    • id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
    • HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
<!DOCTYPE html>                        이 문서가 html, 문서임을 명시
<html>                                 html 시작 태그로, 문서 전체의 틀을 구성
<head>                                 head 태그는 문서의 메타데이터를 선언
    <title>Document</title>            문서의 제목, 브라우저의 탭에 보여짐
</head>                                </태그이름>은 해당 태그가 끝났음을 의미
<body>                                 body태그는 문서의 내용을 담는 곳
    <h1>hello world</h1>               heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
    <div>contents here                 content division을 의미하며 줄바꿈됨
    <span>here too</span>              줄바꿈이 없는 content컨데이너
    </div>                             div태그가 끝났음을 의미
</body>                                body 태그가 끝났음을 의미
</html>                                html태그가 끝났음을 의미

SELF - CLOSING TAG

- 태그 내부에 내용이 없다면,(<tag></tag>와 같이 표현되는 경우)   <tag /> 와 같이 표현가능

<img src = "포도기영.png"></img>

<img src = "포도기영.png" />

참고로 src는 속성, 포도기영.png는 속성에 대한 값이라고 지칭한다.

 

 

빈번하게 사용되는 HTML TAG

 

 

div 와 span

- div 태그는 한 줄을 차지한다.

-span태그는 컨텐츠 크기만큼의 공간을 차지한다.

<사진>

 

a: link 삽입

<a href = "사이트주소" target = "_blank"> 안녕 </a>

cf) target = "_blank" 추가하면 새창이 브라우저가 뜬다. 

 

ul(unordered list) ol (ordered list)

   <ul>
        <li>커피</li>
        <li>바나나</li>
        <li>토마토</li>
    </ul>
    
    
    <ol>
            <li>커피</li>
            <li>바나나</li>
            <li>토마토</li>
        
     </ol>

input, textarea : 다양한 입력 폼

 

<div>
    ID<input type = "text" placeholder = "type here">
    </div>
    <div>
    PASSWORD<input type = "password"> 
    </div>
    <div>
        <input type = "checkbox"> html 마스터 했니?
    </div>
    <div>
        <input type = "radio" name = "choice" value = "여자"> 여자
        <input type = "radio" name = "choice"  value = "남자"> 남자
    </div>
    <div>
        <input type = "radio"> 여자
        <input type = "radio"> 성인
    </div>
    <div>
     <textarea></textarea>
     </div>
     <div>
     <button>로그인</button>
    </div>

 

 

- 라디오 박스와 체크 박스의 차이

   라디오 박스는 둘 중 하나만 체크가능(name 속성으로 그룹 설정 가능,그룹 설정 안해주면 여러개 체크 가능), 체크 박스는 여러개 체크가능(그룹설정 불가능)

 

- textarea: 줄바꿈이 된다.

'HTML,CSS' 카테고리의 다른 글

css(시맨틱태그,em/rem,css내용분해,class/id,background)  (0) 2021.08.30
inline  (0) 2021.08.30
css(margin, border, padding)  (0) 2021.08.25
CSS (Blocks and Inlines)  (0) 2021.08.24
css(파일넣는곳, selector, cascading)  (0) 2021.08.24
'HTML,CSS' Related Articles more
Comments