[CSS] display - block-level, inline, none, hidden

display : 요소가 화면에 보여지는 방식을 지정 html 태그 : 컨테이너. 칸 전체 코드 : 텍스트 일부분. 특정 단어나 특정 부분 코드 css 속성 block-level element : 항상 새로운 line에서 시작 : 요소들이 각각 라인을 차지(자동 줄바꿈) span { display: block; } inline element : 필요한 만큼만 공간 차지(줄바꿈 직접 해야 함) span { display: inline; } display : none : 화면에 보여지지 않음. 공간 차지 X span { display: none; } visibility : hidden : 화면에 보여지지 않음. 공간 차지 O span { visibility: hidden; }

• format_list_bulleted Front-end/CSS
• · 2023. 11. 11.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (3) - <figure>, <figcaption>, <audio>, <source>, <embed>

태그 - 이미지, 일러스트레이션, 다이어그램, 코드 조각 등의 미디어를 캡슐화 태그 - 미디어를 설명하는 데 사용 This picture shows characters from Overwatch. 태그 - 오디오 콘텐츠를 문서에 포함하는 데 사용 controls : 재생 및 음소거와 같은 오디오 컨트롤을 브라우저에 자동으로 표시 autoplay : 자동 재생 태그 - 요소나 요소, 요소에서 사용할 수 있는 다중 미디어 자원을 정의할 때 사용 src : 오디오 파일의 URL을 지정 태그 - 외부 소스의 비디오, 오디오 파일, GIF를 포함한 모든 미디어 콘텐츠를 포함 - 자체적으로 닫는 태그 - 거의 안 쓰임

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (2) - <section>, <article>, <aside>

태그 - 제목 또는 동일한 주제를 가진 문서의 영역을 정의 Facts About Dogs Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times. 태그 - 해당 문서나 페이지와는 완전히 독립적으로 구성할 수 있는 요소를 정의 - 주로 포럼, 블로그 포스트, 보도 기사, 논평 등이 포함 Fun Facts About Cricket A single match of cricket can last up to 5 days. 태그 - 페이지의 다른 콘텐츠들과 ..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (1) - <header>, <nav>, <main>, <footer>

시맨틱 태그(Semantic tag) - 의미가 부여된 태그 - 여는 태그와 닫는 태그 사이의 내용에 대한 정보를 제공 - 장점 : 접근성, 검색엔진 최적화, 이해하기 쉬움 태그 - 문서나 특정 섹션의 헤더(header)를 정의 - 주로 하나 이상의 제목 요소(h1 ~ h6), 네이게이션 정보, 로고(logo)나 아이콘(icon), 저자(author) 정보 포함 Navigational Links Home Posts Contact 태그 - 메뉴 및 목차와 같은 탐색 링크 블록을 정의 Navigational Links Home Posts Contact 태그 - 웹페이지 내에서 주요 콘텐츠를 캡슐화 Types of Sports Baseball The first game of baseball was played..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 텍스트 영역 태그 - <textarea>

태그 - 사용자가 더 많은 텍스트를 작성할 수 있도록 더 큰 텍스트 필드 생성 rows : 행의 길이 결정 cols : 열의 길이 결정 Anything else you want to add?

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 드롭 다운 목록 태그 - <select> & 데이터리스트 태그 - <datalist>

태그 - 드롭 다운 목록 생성 - 목록을 스크롤하여 하나의 옵션을 선택할 수 있도록 함 태그 - 목록에 들어갈 요소 추가 목록1 목록2 목록3 What type of cake would you like? Choco Cheese Mango 태그 - 데이터리스트 생성 - 전체 목록을 띄워 하나의 옵션을 선택할 수 있도록 함 - 일치하는 목록이 없더라도 사용자가 새로운 목록 입력할 수 있음 What type of sauce would you like?

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] UI 요소 라벨 태그 - <label>

태그 - UI 요소와 연결된 설명 텍스트를 나타내는 데 사용 - 해당 라벨을 클릭하면 연관된 폼 요소에 포커스가 맞춰 for: 레이블이 어떤 폼 요소와 연관되어 있는지 명시. for 속성의 값은 연관된 요소의 id 속성 값과 일치해야 함 내용 Username

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms