HTML 이해하기

▶ 상대경로와 절대경로

상대경로 - 현재 위치한 곳을 기준으로 한 경로. 바뀔 수 있는 경로.

- ./: 주변에서 찾는 개념 (생락가능)

- ../: 상위 폴더로 이동

절대경로 - 웹페이지나 파일이 가지고 있는 고유한 경로

- http (https): 각각의 웹 페이지가 가지고 있는 주소.

- / (//): 최상위 경로, 루트, 프로젝트 전체, 각각의 파일들의 위치와는 전혀 상관없이 출발부터 시작해서 도달하는 경로가 모두 일치함.

<body>
  <a href="/">Home</a>
  <a href="https://www.naver.com">NAVER</a>
  <a href="/about/index.html">About</a>
  <a href="/login">Login</a>
</body>
href=" "에 루트경로인 "/"만 명시해 놓으면 자동으로 index.html 파일로 접근한다.

"index.html" 로 파일명을 명시해 놓으면 "/login" 처럼 뒤에 파일명을 따로 명시하지 않아도 화면이 출력된다.

▶ 부모와 자식 관계의 이해

<div> <!-- 부모 요소 -->
  <div> <!-- 자식 요소 -->
  
  </div> <!-- 자식 요소 끝 태그 -->
</div> <!-- 부모 요소 끝 태그 -->

부모 요소: 나를 감싼 한단계 상위요소
자식 요소: 내가 둘러싼 한단계 하위요소
부모와 자식 태그는 줄바꿈과 들여쓰기로 구분한다.
협업자와 협업하고, 유지보수를 생각해서 코드를 잘 정리하는 것이 좋은 코드 작성 법이다.

▶ 빈 태그

닫는 태그 </태그>가 없는 태그
<태그>: 편리함, 닫는 태그를 찾는 경우가 있을 수 있음, HTML 1/2/3/4/5
<태그/>: 안전함, 빈 태그라는 것을 한번에 알 수 있음, 엄격함, 명확함, XHTML/HTML5, 권장!
내용을 채울수 없는 비어있는 태그이기 때문에 대부분 속성과 값을 이용해서 태그의 기능을 온전하게 사용한다.
ex) <meta />, <input />, <link />, <img />

▶ 글자와 상자

요소가 화면에 출력되는 특성

인라인(Inline) 요소

<!-- 대표적인 인라인요소. 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. -->
<span>Hello</span>

<!-- 인라인 요소 내에 블록요소 X-->
<span><!-- 인라인 요소 -->
  <div><!-- 블록 요소-->
  
  </div>
</span>

<!-- 인라인 요소 내에 인라인 요소 O -->
<span> <!-- 인라인 요소 -->
  <span> <!-- 인라인 요소 -->
  
  </span>
</span>

- ex) <span></span>, <img />, <a></a>, <br />, <label></label>

* 인라인 블록(inline-block) 요소
- 글자 요소이기는 하지만 상자 요소가 가지고 있는 몇가지 특성을 추가적으로 사용할 수 있는 요소
- 인라인 요소의 특징인 수평으로 쌓이는 특징을 가지고 있지만 가로, 세로 너비 지정 / 모든 여백이 사용 가능한 블록 요소의 특징도 가지고 있다.
- ex) <input />

* 테이블(table) 요소
- 표 요소, 행(Row)과 열(Colume)의 집합.
- 엄밀히 따지면 블록요소
- ex) <table></table>

블록(Block) 요소

<!-- 대표적인 블록요소. 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. -->
<div>Hello</div>

<!-- 블록 요소 내에 블록요소 O-->
<div><!-- 블록 요소 -->
  <div><!-- 블록 요소-->
  
  </div>
</div>

<!-- 블록 요소 내에 인라인 요소 O -->
<div> <!-- 블록 요소 -->
  <span> <!-- 인라인 요소 -->
  
  </span>
</div>

- ex) <div></div>, <h1></h1> / <h2></h2> / <h3></h3> / <h4></h4> / <h5></h5> / <h6></h6>, <p></p>, <ul></ul>, <li></li>

▶ 이미지 출력하기

<body>
  <!-- 다운받은 이미지를 불러온 로고 -->
  <img src="/images/logo.png" alt="로고">
    
  <!-- url로 불러온 로고 -->
  <img src="https://heropy.blog/css/images/logo.png" alt="로고">
</body>

alt(alterate): 이미지가 출력되지 못하는 경우 대신 출력할 대체 텍스트. 불러온 이미지 경로가 잘못되거나 네트워크가 불안정한 경우 등 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 텍스트이다. 반드시 명시해야 한다.

저작자표시 비영리 변경금지 (새창열림)

'Front-End > HTML' 카테고리의 다른 글

HTML 시작하기 (0)	2022.09.18

'Front-End > HTML' 카테고리의 다른 글

검색 태그

티스토리툴바