# span
span 태그 텍스트 가운데 배치
span태그 텍스트 1을 사진처럼 가운데 배치하려면 > display: inline-block; line-height: 50px; 👉👉👉 CountDiv 높이 text-align: center;
[CSS] span 태그에서 높이, 너비 조정
계산기 만들기 프로젝트를 하는중 span 태그안에서 높이와 너비를 지정하고 싶은데 잘 되지않아 방법을 찾아보았다. 공부한 내용을 한번 더 정리하고 싶어서 남겨놓는다. 📌 span 태그는 기본적으로 인라인(inline) 요소로 동작한다. 인라인 요소는 자신이 포함한 콘텐츠의 크기만큼만 공간을 차지하며, 높이와 너비를 직접 조정할 수 없다. 만약 span 태그의 높이와 너비를 조정하고 싶다면, span 태그를 블록(block) 또는 인라인-블록(inline-block) 요소로 변환해야 한다. 이렇게 하면 span 태그가 일반적인 블록 요소와 같은 방식으로 동작하여 높이와 너비를 조정할 수 있게 된다.
HTML #6 - Area Tag
📍 Area Tag > 영역 태그에는 div와 span이 있다. div ` 태그는 블록 요소`로, 공간 단위로 존재한다. div 태그로 영역 생성 시, 세로로 추가되는 특성을 갖기 때문에 문장 중간에 사용할 수 없다. span 반면 span 태그는 인라인 요소로, 텍스트 단위로 존재한다. span 태그로 영역 생성 시, 가로로 이어져 추가되는 특성을 갖기 때문에 문장 중간에 사용할 수 있다. iFrame 
HTML 기본 03
1️⃣ 글자 크기 조정 할 수 있다. align = left / mille =center / right > 2️⃣ : HTML 코드에서 사용되는 태그로, 텍스트의 색상, 크기, 글꼴 등을 변경하는 데 사용됩니다. size, color , face(글자체) 선택할 수 있습니다. ex 이 텍스트는 빨간색으로 표시됩니다. 이 텍스트는 하늘색+밑줄로 표시됩니다. 이 텍스트는 파란색+이탤릭체로 표시됩니다. 태그는 텍스트를 굵게 표시(bold)합니다. 태그는 텍스트를 아래 첨자로 표시합니다. 예를 들어, H
HTML - Block, Inline
HTML 요소는 일반적으로 block, inline 레벨을 가지고 있습니다. block은 뭐고 inline은 뭘까요?🤔 block block 레벨 요소중 가장 많이 사용되는 div와 p를 살펴볼까요? 어떤가요? 욕심이 얼마나 많은지 한 줄을 전부 차지하는 모습을 확인할 수 있죠? block레벨의 요소는 기본적으로 부모가 허용하고 있는 사용이 가능한 모든 너비를 사용합니다. 그럼 너비를 적게 지정해주면 적게 차지할까요? 10
HTML 기본 태그 (블록과 인라인 요소)
📒HTML5 기본 태그 - 블록 요소 (Block element) >🤔 블록 요소란? 하나의 태그가 브라우저 내에서 좌우공간을 모두 차지하며 독립적인 공간을 가지는 요소 블록 요소의 속성 브라우저의 최대 가로 너비를 사용한다. (기본 100%) 좌우공간 전체를 차지하기 때문에 각 요소들이 y축 정렬 형태로 출력된다. (줄바꿈 현상이 일어남) 크기 값을 가질 수 있어 width, height 너비 조절이 가능하다. 상하좌우 margin, padding 값의 조절이 가능하다. 📌 대표적인 블록 요소 태그 , , , , , , , , ,
유니티 Span<T> 사용하기
들어가며... Span!?! 유니티 2021부터 지원이 시작된 녀석이다. 쉽게 보자면 , 경량 배열쯤으로 기억해두면 좋다. 기본 배열보다 가볍고 빠르며 제약이 조금 있긴 하지만 사용하기 매우 쉽다. 기존 배열과 유사한 면이 많다. 전체 배열을 복사해서 원하는 만큼 잘라서 쓸 수 있다. string.Substring 대체가능 string기능 중 일부를 대체하면 좋다. 메모리 할당도 적고, 빠르다. 유니티에서도 이를 지원한다. 2023 Unity Road Map에 따르면, netStandard2.1 을 비롯한 현대 C#의 기능들을 향후 수년에 걸쳐 지원할 예정이라고 하니 알아두면 좋다. 콕 집어서, .NET의 [핵심에 있는 새로운 유형](https://learn.microsoft.com/en-us/archive/msdn-magazine/2018/january/csharp-a
[HTML]div, span 여백 특징(margin)
div 특징 > - 줄바꿈이 가능하다. 텍스트를 표헌할 때 박스 단위로 구역을 정한다. width, height 지정이 가능하다.(박스단위 구역이기 때문) ** 아쿠아마린 컬러가 div 코랄컬러가 span span의 margin은 양 옆으로만 적용이된다. div의 margin은 4방향 모두 적용이 된다. 위 아래 겹치는 여백은 상쇄됩니다. => 여백의 크기가 2배가 되는 것이 아니고 겹치는 것 
Day 5
컴파일(Compile) : Text Type으로 작성된 소스코드를 컴퓨터에 주입하여 실행하기 위해 BIN(이진수) 코드로 한꺼번에 변환하는 것 ※ 소스코드 : Vscode같은 걸로 볼 수 있는 텍스트 파일을 말한다. 컴파일러(compiler) : 소스코드를 컴파일하여 BIN코드를 만들어내는 소프트웨어 개발도구 인터프리터(interpreter) : Text Type으로 작성된 소스코드를 한 줄씩 실행 자바스크립트나 파이썬같은 언어가 한 줄씩 실행된다. > ### 배열(Array) : 한개의 변수에 다수의 데이터를 보관(저장)하기 위한 설정 : querySelectAll()을 사용하여 tag들이나 class 로 설정된 항목을 가져오면 자동으로 배열이 만들어지고 각각의 요소에 값들이 보관 된다 span[0] -> 만약에 여러 span태그들을 가져왔다고 했을 때 그 태그들 중 하나를 가져올 떄는 [ ] 안에 **0부터 전체개수-1
html 핵심 정리
핵심 요소 정리 1. div 태그 Division의 약어로 블록요소에 해당. 특별한 의미가 없는 구분을 위한 요소이다. 굉장히 많이 사용되고 있음. 2. h1 태그 Heading의 약어. 블록요소에 해당 제목을 의미하는 요소이다. h1~h6까지 있으며 숫자가 작을수록 더 중요한 제목을 정의함. 3. p 태그 Paragraph의 약어. 블록요소에 해당 문장을 의미하는 요소이다. 4. img 태그 Image의 약어. 인라인요소에 해당 이미지를 삽입하는 요소이다. 5. ul 태그, li 태그 Unordered List 와 List Item 의 약어. 둘 다 블록요소에 해당 ul태그는 순서가 필요하지 않은 목록의 집합을 의미하며 li태그는 목록 내 각 항목을 의미한다. 목록 안 각 항목 내용이 객관적인
[html&css] css 기본 개념 정리_6 (id, class, span, div)
`` 분할하다는 뜻의 Division의 준말로, HTML문서 내에서 한 개의 가로 공간(Block)을 만드는 태그이다. 한 줄 전체를 차지하고 있지만 고정적인 공간 사이즈를 가지고 있는 것은 아니라는 뜻. `` 단락, 절이라는 뜻의 Paragraph의 준말로, 주로 문장에 대해서 사용하는 태그이며 역시 한 개의 가로 공간(Block)을 만드는 태그이다. 자체적으로 margin값을 가지고 있어서 p태그 사이에 여백이 존재한다. `` 기간, 폭, 너비의 뜻을 가지고 있는 span태그는 자신에게 주어진 공간만을 차지하는 태그(inline) id, class 속성 모든 태그에는 id 속성과 class 속성을 지정해 줄 수 있는데, 이를 이용
css 적용방식
css 적용하기 내부 스타일 시트 HTML문서 내의 `태그 안에 `태그를 사용하여 css 스타일을 적용 외부 스타일 시트 외부의 css문서를 불러와 HTML문서의 `안에 `태그를 이용하여 스타일 적용 ``태그 span태그는 문장 단위로 텍스트 영역을 지정하는 것인데, 문장의 특정 구역에서 css스타일을 지정할 때 사용함. 안녕하세요!
<pre>, <span>,<hn>,<p>,<br태그
태그 -Preformat > 기본형 텍스트 HTML에서 엔터(Enter), 탭(Tab), 스페이스바(Space)를 써도 Pre를 사용하지 않는 다면 무조건 공백 하나로 인식 소스에 표시한 공백이 브라우저에 그대로 표시됨 웹접근성 고려: 웹문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계는 ``태그가 적용된 부분을 만나면 건너뛰어 버리기 때문에 그 부분의 내용을 알 수 있도록 대체 텍스트를 추가하는 것이 좋음. 태그 -텍스트를 한 줄로 표시하는 태그 > 기본형 내용 단락 안에서 줄 바꿈 없이 일부만 묶어 스타일을 적용할 때 사용 > ` 과 `의 차이 > `` : 한 태그를 나눠 여러 css를 적용하는 태그 (inline tag), 너비나 높이 조절이 불가능. > `` : 여러 태그를 묶어 css를
html video & audio
🖊 용어정리 p : 대 단락을 나눌때 사용 div : 특별한 역할을 하지 않는 영역, display 속성이 block span : 특별한 역할을 하지 않는 영역, display 속성이 inline video, audio, iframe 🖊 실습 > - p tag !codepen[woococo/embed/zYRpEjN?default-tab=css%2Cresult] > - video : mp4 형태의 비디오를 출력 !codepen[woococo/embed/QWQaqxL?default-tab=css%2Cresult] > - audio : (비디오를 넣어도) 오디오만 출력 !codepen[woococo/embed/JjpMrZy?default-tab=css%2Cresult] > - iframe : 유투브 같은 플랫폼 형태의 비디오를 출력 !codepen[woococo/embed/BaYJwVb?default-tab=css%2Cresult]
그리드 소개
🚁 그리드 소개 그리드 소개 image [
🧙🏼 HTML 구조를 나타내는 요소
HTML 구조를 나타내는 요소 1. [div] (https://developer.mozilla.org/ko/docs/Web/HTML/Element/div) : 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 본질적으로 아무것도 나타내지 않음 2. span : 인라인 컨테이너 : 인라인 레벨 요소 : 본질적으로 아무것도 나타내지 않음 : 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용 가능 > 🌵 span (인라인 요소) vs div(블록 요소) (둘이 매우 유사하지만 요소의 차이점 기억하기!) Semantic Web : 요소의 의미를 고려하여 구조를 설계하고 코드를 작성한다. (div, span : non-seman
HTML 의미론
패스트캠퍼스 강의를 정리한 내용입니다. "The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명" div, span 요소의 의미 아무 의미가 없는 태그 의미를 찾지 못했을 때 마지막으로 선택하는 태그 사용 빈도가 높을수록 HTML 태그를 의미 적절히 사용하지 않았다고 해석됨 div를 대체할 만한 요소들 span을 대체할 만한 요소들 Sectioning 요소 hx, hgroup, header, footer : 섹셔닝은 아니지만 함께 쓰는 요소 article, aside, nav, section : 섹셔닝 요소 header, footer : 도입부, 헤딩, 헤딩그룹, 목차, 검색, 로고 : 저자, 저작권, 연락처, 관련 문서 의미 범위 : 섹셔닝 루트(body) 또는 섹셔닝 콘텐츠(article, aside, nav, section) 반드시 필요한 요소는 아니지만 이런 의미일 때 di
HTML <span> Tag
`` 은 inline element. ``은 text 영역만 차지하고 있으므로, `` 태그 내에서 정렬이 불가능.