HTML 기초

📌 개인적인 공간으로 공부를 기록하고 복습하기 위해 사용하는 블로그입니다.
정확하지 않은 정보가 있을 수 있으니 참고바랍니다 :😸
[틀린 내용은 댓글로 남겨주시면 복받으실거에요]

HTML : HyperText Markup Language

Wireframe: 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임

HTML TAG

: **HTML은 tag들의 집합이다.**

태그	설명
<div>	Division
	Span
	Image
	Link
<ul>&<li>	Unordered List & List Item
	Input(Text,Radio,Checkbox)
	Multi-line Text Input
	Button

1. <div>와 <span>
   1. div tag는 한 줄을 차지
   2. span은 컨텐츠의 크기만큼 공간을 차지

   3. 예제

       <div>div 태그는 한 줄을 차지합니다 </div>
       <div>division 2</div>
       <span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다</span>
       <span>span2</span>
       <span>span3</span>
       <div>division 3</div>
      

      

2. <img> 이미지 삽입

    <img src="http://file3.instiz.net/data/file3/2018/03/13/9/1/8/918ceef7e1f5a96b28e254e7910fc9cd.gif">
   

3. <input>
   1. 예제 1 : text

      1. 만 사용 시

         텍스트 입력하지 않았지만 커서도 들어가고 텍스트도 입력 가능

         

      2. 입력 시에도 동일

      3. 
   2. 예제 2 : radio

      1. <input type=”radio”/>

         

      2. a

         

   3. 예제 3 : checkbox

      1. 

4. <a> : link 삽입

   [ - HTML: Hypertext Markup Language | MDN (mozilla.org)](https://developer.mozilla.org/ko/docs/Web/HTML/Element/a)

    <a href="http://www.naver.com" target = "_blank">네이버</a>
   

5. button
6. <link rel=”stylesheet” href =”style.css”>
   1. <link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징
   2. rel 속성에 stylesheet를 추가, href 속성에는 파일의 위치를 추가
   3. 지금 작성한 두 파일은 한 폴더 내에 있으므로 파일 이름만 입력하면 됨. 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있음.
   4. 해당 예제코드는 style.css 파일과 html을 연결해줌,

7. ol vs ul

   ol

   

   li 사용시

   

   

   ul=Unorderd List

   

   li 사용

   

   

li는 단독으로 사용할 수 없고 ol과 ul의 요소 내에서 사용되어야 한다.

시멘틱 요소

시멘틱 요소를 쓰지 않아도 구조는 똑같고 구현할 수 있음,

검색엔진에 높은 점수를 받아서 사이트를 노출시키기 위함

1. 시멘틱 요소
   1. 시멘틱 웹(semantic web)이 중시되면서 여러 시멘틱 요소(semantic element)가 새롭게 만들어짐
   2. 사용 이유
      1. 첫째, 검색 엔진이 시멘틱 요소를 더 좋아하기 때문 - 시멘틱 요소를 잘 써야 검색엔진 최적화
      2. . 즉, 시멘틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다
      3. 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문
   3. 시멘틱 요소의 종류
      1. <article> : 독립적이고 자체 포함된 콘텐츠를 지정
      2. <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용
      3. <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용

         1. 네이버 footer

            시멘틱을 쓰는건 아니고 footer라는 이름을 적용한 것.

            

      4. <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있음
      5. <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용
      6. <main> : 문서의 주된 콘텐츠를 표시

ID와 Class

1. id :고유한 (unique)한 이름을 붙일 때, css에서는 #으로 표현
2. class : 반복되는 영역을 유형별로 분류할 때, css에서는 . 으로 표현

ID와 Class 사용하여 페이지 만들기 예제

1. id로 이름 붙여서 스타일링 적용하기

   1. ex) html 요소 중 하나인 <h4>에 색상 적용

       h4 {
         color: red;
       }
      

      

      

      1. 의도와는 다르게 navigation뿐만 아니라 aside에도 적용됨
      2. <h4> 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있음
      3. id가 있는 요소를 선택할 때는 #기호를 이용

      4. html에 적용

          <h4 id="navigation-title">This is the navigation section.</h4>
         

      5. CSS에 적용

          #navigation-title {
            color: red;
          }
         

2. Class로 스타일을 분류하여 적용 : 하나의 class를 여러 요소에 적용

   1. navigation section의 자식 <li> 요소에 밑줄치기

      li {
        text-decoration: underline;
      }
      

      1. 모든 li 요소에 밑줄 적용됨

         

   2. navigation section의 모든 <li> 요소에 id를 추가하고 CSS를 적용

      <!-- 잘못된 예제 -->
      <ul>
        <li id="menu-item">Home</li>
        <li id="menu-item">Mac</li>
        <li id="menu-item">iPhone</li>
        <li id="menu-item">iPad</li>
      </ul>
      

      1. id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 함. 따라서 이 예제는 id를 잘못 사용한 예제

   3. navigation section의 모든 <li> 요소에 class를 추가하고 CSS를 적용

      1. 여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용

          <!-- 바른 예제 -->
          <ul>
            <li class="menu-item">Home</li>
            <li class="menu-item">Mac</li>
            <li class="menu-item">iPhone</li>
            <li class="menu-item">iPad</li>
          </ul>
         

      2. class menu-item을 선택하여 밑줄을 적용

          .menu-item {
            text-decoration: underline;
          }
         

3. 여러 개의 class를 하나의 엘리먼트에 적용하기
   • 요소를 만들거나, 요소에 스타일링을 적용할 때는 항상 이름과 목적이 일치하는지 확인
     1. 하나의 요소에 여러 class를 적용하는 방법

       <li class="menu-item selected">Home</li>
     

   1. 특정 클래스(selected)를 통해 요소를 스타일링하는 모습

       .selected {
         font-weight: bold;
         color: #009999;
       }
      

      왜 menu-item selected가 아닌지 궁금했는데.menu-item selected는 존재하지 않는 후손 태그를 가리키는 잘못된 형태이고, .menu-item.selected나 .selected를 사용해야 함

html-css 카테고리 내 다른 글 보러가기