[UI/UX] 참고자료 - 인라인(inline), 시맨틱(semantic), 마진(margin)

 

1. 인라인요소

HTML에서 인라인 요소는 텍스트 안에 둘러쌓여 표시되는 요소로, 블록 레벨 요소와 달리 한 줄에 나란히 표시됩니다. 주로 텍스트 스타일링이나 구문 강조 등에 사용됩니다. 일반적인 인라인 요소는 다음과 같습니다

 

인라인요소는 width, height이 적용안된다.

 

1. <span>: 텍스트의 일부분을 그룹화하거나 스타일링하기 위해 사용됩니다.
2. <a>: 하이퍼링크를 만들 때 사용됩니다.
3. <strong>: 텍스트를 굵게 표시하여 강조할 때 사용됩니다.
4. <em>: 텍스트를 이탤릭체로 표시하여 강조할 때 사용됩니다.
5. <img>: 이미지를 삽입할 때 사용됩니다.
6. <br>: 줄 바꿈 요소로, 텍스트를 줄 바꿈하기 위해 사용됩니다.
7. <input>: 사용자 입력을 받는 양식 요소로, 텍스트 입력, 체크박스, 라디오 버튼 등을 생성할 때 사용됩니다.

 

2. 시맨틱태그 (Semantic Tag)

: HTML 문서에서 콘텐츠의 의미나 구조를 설명하기 위해 사용되는 태그입니다. 시맨틱 태그는 특정 요소가 문서 내에서 어떤 역할을 하는지를 명확하게 지정함으로써 웹 브라우저나 검색 엔진이 문서를 이해하고 해석하기 쉽게 돕습니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element 참고

 

1. <article> : 태그는 독립적인 글을 다루는 데 사용하는 태그입니다. 블로그 게시물, 뉴스 기사, 제품 리뷰 등 독립적으로 배포하거나 재사용할 수 있는 독립형 콘텐츠를 정의합니다. 
   
   
2. <aside> : 태그가 주요 콘텐츠와는 독립적으로 추가 정보를 제공하거나 부가 콘텐츠를 나타내는 데 사용되는 방법을 설명하고 있습니다.

   

   
   
3. <details>  : 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그입니다. 사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫을 수 있습니다. 기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가집니다. 
   추가로, <details> 태그와 함께 쓰이는 <summary> 태그는 <details> 에서 보이는 부분을 담당합니다. <summary> 태그는 <details> 태그의 첫 번째 하위 항목이어야 합니다.

   

   
   
   
4. <figure> & <figcaption> :  <figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다. 
   <figcaption> 태그는 <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용됩니다.
   

   

   
   
5. <footer> : 태그는 문서 또는 섹션의 바닥글을 지정하며, 문서의 아래쪽에 위치합니다.
   
   
6. <header> : 태그는 문서나 섹션의 머릿글을 지정하며, 로고, 탐색, 제목 및 기타 소개 정보가 포함된 페이지 상단 부분을 정의합니다.
   
   
7. <main> : 태그는 메인 내용을 담는 태그로, 웹사이트의 텍스트 본문이나 콘텐츠를 나타냅니다. <main> 태그는 문서에서 유일해야 하고, <article>, <aside>, <footer>, <header>, <nav> 등 모든 페이지의 태그 앞에 옵니다.
   
   
8. <nav> :  태그는 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의합니다. 
   
   
9. <section> : 태그는 문서의 부분을 의미하는 태그로, 기본 콘텐츠 내의 특정 주제 또는 부제목과 관련된 주제별 콘텐츠 그룹을 정의합니다.
   
   
10. <legend>, <fieldset> : <fieldset> 태그는 관련된 입력 요소들을 그룹화할 때 사용됩니다. <legend> 태그는 <fieldset> 요소의 제목을 정의합니다.

 

 

 

 

 

 

3. margin 참고

div {
    margin: 10px; /* 모든 방향에 대해 10px의 여백을 지정 */
}

p {
    margin: 10px 20px; /* 위/아래는 10px, 오른쪽/왼쪽은 20px의 여백을 지정 */
}

span {
    margin: 10px 20px 30px; /* 위는 10px, 오른쪽/왼쪽은 20px, 아래는 30px의 여백을 지정 */
}

a {
    margin: 10px 20px 30px 40px; /* 위는 10px, 오른쪽은 20px, 아래는 30px, 왼쪽은 40px의 여백을 지정 */
}

 

 

margin 중복현상

 

1. 형제 요소끼리 margin-top과 margin-bottom이 만났을 경우

2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 경우 > 패딩으로 해결

3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 경우 > 패딩으로 해결

 

 

 

 

 

 

 

 

 

 

 

---

 

https://www.openads.co.kr/content/contentDetail?contsId=11964