<ol> 속성

<ol> 속성은 ‘order list’를 의미하며 특정 순서로 이루어진 항목이 있는 목록이다 (ex. Monday, Tuesday, Wendesday…)

<ul>속성

<ul> 속성은 ‘unorder list’를 의미하며 순서를 의미하지는 않지만, 서로 관련된 정보가 포함되어 있다. (ex. apple, banana, tomato…)

이러한 목록에 기능을 다 하기 위해 ‘항목(item)’을 더할 수 있으며 <li>태그를 이용하며

이는

 <ol>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wendsenday</li>
    </ol>

    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Tomatoes</li>
    </ul>

와 같이 표현할 수 있다.

728x90

'HTML' 카테고리의 다른 글

웹 사이트에 이미지 추가  (0) 2024.12.11
공유 CSS파일 생성  (1) 2024.12.09
외부 파일에 CSS코드 저장  (1) 2024.12.06
웹페이지에 링크 생성하기  (1) 2024.12.03
HTML 문단 나누기  (0) 2024.12.01

웹사이트에 이미지를 넣고 싶으면 <img> 를 사용할 수 있으며, 이는 '빈 요소(void elements)'라서 닫는 태그를 입력하지 않는다.

예를 들어,

<img src="challenges-tropy.jpg" alt="A trophy">

와 같이 나타낼 수 있으며, 경로는 ‘src’ 요소를 통해서 가져온다.

 

‘alt’ 요소는 이미지를 로드하지 못하였거나 이미지를 인식하지 못하는 사람들이 읽을 수 있는 ‘폴백 텍스트’ 이므로 이미지에 대한 간단한 설명을 적으며 이는 눈에 보이는 정보이므로 <body> 부분에 입력하여야 한다.

728x90

'HTML' 카테고리의 다른 글

<ol> 속성과 <ul> 속성  (0) 2024.12.12
공유 CSS파일 생성  (1) 2024.12.09
외부 파일에 CSS코드 저장  (1) 2024.12.06
웹페이지에 링크 생성하기  (1) 2024.12.03
HTML 문단 나누기  (0) 2024.12.01

웹페이지를 만드는 작업을 하다보면 이미지 파일, css 스타일 등이 더욱 많아져 복잡해지게 되는데,

이러한 경우 작업 폴더 안에 ‘images’, ‘styles’ 와 같은 폴더를 생성한 후에 이미지 파일과 CSS 파일 등을 폴더 안에 넣어서 관리해 줄 수 있다.

이러한 경우 HTML 파일에서 CSS 파일의 경로를 수정해야 하며

CSS 파일이 'styles' 폴더 안에 있다면 HTML 파일의 <link> 태그를 다음과 같이 수정해야 한다:\

<link href="styles/styles.css" rel="stylesheet">

마찬가지로 이미지 파일의 경로도 수정해야 한다. 'images' 폴더 안에 이미지가 있다면 <img> 태그의 src 속성을 다음과 같이 변경해야 한다:

<img src="images/challenges-trophy.jpg" alt="A trophy">

이렇게 폴더 구조를 정리하면 프로젝트가 더 체계적으로 관리되며, 파일을 찾고 수정하는 것이 더 쉬워진다. 또한, 다른 개발자들과 협업할 때도 이러한 구조가 도움이 된다.

이러한 요소는 닫는 태그를 입력하지 않으며, 요소를 닫지 않는 태그를 ‘빈 요소(void element)’라 한다.

 

 src와 alt 같은 요소를 HTML 요소 속성이라 하며 이러한 속성을 통해 링크와 같은 요소를 구성할 수 있다.

728x90

'HTML' 카테고리의 다른 글

<ol> 속성과 <ul> 속성  (0) 2024.12.12
웹 사이트에 이미지 추가  (0) 2024.12.11
외부 파일에 CSS코드 저장  (1) 2024.12.06
웹페이지에 링크 생성하기  (1) 2024.12.03
HTML 문단 나누기  (0) 2024.12.01

하나의 편집기에서 CSS코드와 HTML코드을 한번에 작성할 경우, 굉장히 복잡해질 수 있는데 이는 CSS파일을 따로 저장하여 분리가 가능하다. style 안에 있는 CSS코드를 따로 분리하여 ‘.css’확장자로 저장하면 이는 CSS코드로 인식이 된다.

이러한 파일은 HTML 코드에서 <link> 요소를 사용하여 HTML코드로 불러오기가 가능하며

예를 들면,

<head>
        <link href="link.css" rel="stylesheet">
        <title>name of title</title>
</head>

와 같이 표현 가능하며 <link> 요소는 HTML의 <head> 부분에 위치하여야 한다. 또한, <title> 역시 <head> 내부에 위치하여야 한다.

그러나, <link>로 CSS파일을 연동한다고 해도 자동으로 HTML 파일에 병합되지 않기 때문에 요소 안에 ‘rel=”stylesheet”’ 라는 콘텐츠를 입력하여 해당 요소가 CSS파일 이라는 것을 설명해 주어야 한다.

728x90

'HTML' 카테고리의 다른 글

웹 사이트에 이미지 추가  (0) 2024.12.11
공유 CSS파일 생성  (1) 2024.12.09
웹페이지에 링크 생성하기  (1) 2024.12.03
HTML 문단 나누기  (0) 2024.12.01
웹 폼 (Web Form)  (0) 2024.11.30

문단의 내용에 링크를 설정하고 싶다면 요소 안에<a href=””>내용</a> 요소를 사용하여 입력할 수 있으며, ‘””’안에 연결하고 싶은 링크를 입력할 수 있다.

예를 들어,

<p><a href="https://dev-kanghyun.tistory.com/">개발 블로그</a></p>

와 같이 입력할 수 있으며, 웹 페이지에서 클릭시 해당 링크로 이동한다.

728x90

'HTML' 카테고리의 다른 글

공유 CSS파일 생성  (1) 2024.12.09
외부 파일에 CSS코드 저장  (1) 2024.12.06
HTML 문단 나누기  (0) 2024.12.01
웹 폼 (Web Form)  (0) 2024.11.30
HTML 레이아웃  (0) 2024.11.10

티스토리툴바