상속(Inheritance) 개념과 계단식 상속(Cascading logic)

 

상속(Inheritance)

특정 개념이 자손(하위 항목)에게도 적용된다.

부모-자식 요소

요소 안에 다른 요소가 포함된다면 위에 설정된 요소는 부모 요소이며 그 안에 포함된 요소는 자식 요소라고 한다.

또 자식 아래에 요소가 포함된다면, 이는 자손 요소라고 한다.

이러한 상위-하위 관계에 있는 요소를 부모-자식 요소라고 한다.

 

계단식 상속(Cascading logic)

하나의 요소에 여러 규칙을 적용할 수 있으며, 동일한 규칙이나 속성이 두 개 이상 있을 경우 특정 선택자에 대하여 가장 최신 규칙이 우선적으로 적용된다.

728x90

'CSS' 카테고리의 다른 글

색상 설정  (0) 2024.12.16
선택자와 결합자(selectors & Combinators)  (0) 2024.12.14
이미지 스타일의 변경  (1) 2024.12.10
텍스트의 크기, 굵기와 글꼴 설정  (0) 2024.12.08
가상 선택자(Pseudo Selectors)  (0) 2024.12.07

<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

티스토리툴바