웹프로그래밍 3월 16일 목요일 수업

Jimin·2023년 3월 16일
웹프로그래밍
0

웹프로그래밍

목록 보기
1/5
post-thumbnail

dl, dt, dd태그

정의 리스트

dl

definition list의 약자로,
사전처럼 용어을 설명하는 목록을 만든다.

dt

definition term의 약자로,
정의되는 용어의 제목을 넣을 때 사용한다.

dd

definition description의 약자로,
용어를 설명하는 데 사용한다.

출처

Css display 속성
inline, block, inline-block

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다.

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
대표적인 inline 엘리먼트로 <span> 이나 <a> , <em> 태그 등을 들 수 있다.

inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것이다.
→ 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다.

또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
대표적인 block 엘리먼트로 <div> 이나 <p> , <h1> 태그 등을 들 수 있다.

block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영된다.

inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작한다.
기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만,
block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.

다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이다.

대표적인 inline-block 엘리먼트로 <button> 이나 <input> , <select> 태그 등을 들 수 있다.

div 태그

span 태그

  1. 주로 <div> 와 <p>태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용된다.

  2. <span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰인다.

  3. <div> 태그와의 차이점은 display속성이 block 이 아닌, inline 이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있다.
    → 이 둘의 차이를 쉽게 설명하자면, <div> 는 줄 바꿈이 되지만, <span> 은 줄 바꿈이 되지 않다는 점이다.

  4. <span> 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span 태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당된다.

p 태그

<p></p> 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰인다.

address 태그

<address> 태그는 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시할 때 사용한다.

<body> 요소 안에 존재하는 <address> 요소는 해당 문서의 연락 정보를 나타내며, <article> 요소 안에 존재하는 <address> 요소는 해당 글에 대한 연락 정보를 나타낸다.

이러한 <address> 요소의 텍스트는 주로 이탤릭체(italic)로 표현되며, 대부분의 브라우저들은 <address> 요소의 위쪽과 아래쪽에 약간의 공백을 자동으로 삽입하여 다른 텍스트와 구분한다.

style 태그

https://m.blog.naver.com/hobak486/221694104143

<style>
	#contact ul li span{
		color: brown;
  }
</style>

<div id="contact">
            <p>If you have any questions or comments,
              please don't hesitate to reach out to us.
            
                <address>
                    <ul>
                        <li><span>Phone</span>: (555) 555-5555</li>
                        <li><span>Email</span>: info@ourrestaurant.com</li>
                        <li><span>Address</span>: 123 Main Street, Anytown USA</li>
                    </uls>
                </address>
                
            </p>
    </div>

HTML 4 → HTML 5 으로 변경

footer 태그

<footer> 태그는 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용한다.

푸터(footer)는 보통 <footer> 요소가 포함되어 있는 문서나 섹션에 대한 아래와 같은 정보를 포함한다.

  • 저자(author) 정보
  • 저작권 정보
  • 연락처
  • 사이트맵(sitemap)
  • 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
  • 연관 페이지 등

하나의 HTML 문서에는 여러 개의 <footer> 요소가 포함될 수 있다.

profile
Jimin
https://github.com/Dingadung
다음 포스트

웹프로그래밍 3월 23일 목요일 수업

0개의 댓글