# section
CSS selector
CSS selector class selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일 적용 가능 id selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일 적용 가능 tag selector는 p { 스타일- } 이렇게 적을 수 있고 모든 태그에 스타일 적용 가능 > 셀렉터의 우선순위 class, id를 동시에 가지는 html에서 스타일이 겹칠 경우 우선순위가 존재한다. 대략 (점수가 높을수록 우선순위) > selector 문법 중 공백 navbar과 li사이의 띄어쓰기 공백은 ~안에 있는 모든자식 이라는 뜻을 가진다. navbar과 li사이의 띄어쓰기 >은 ~안에 있는 직계자식 이라는 뜻을 가진다. > selector 문법 중 콤마 selector에서
section 태그와 article 태그의 사용 용도가 무엇인가요?
section 태그와 article 태그의 사용 용도가 무엇인가요? ` 태그와 ` 태그는 HTML5에서 도입된 의미론적인 요소로, 웹 페이지의 구조와 콘텐츠를 더 명확하게 정의하는 데 사용됩니다. 각각의 사용 용도에 대해 설명해드리겠습니다: `` 태그: `` 태그는 독립적인 구획(section)을 정의할 때 사용됩니다. 페이지의 주제나 콘텐츠의 일부를 그룹화하여 의미론적인 구획으로 나눌 수 있습니다. 일반적으로 ` 태그는 제목(-`) 요소와 함께 사용되어 그룹화된 콘텐츠를 식별합니다. 예를 들어, 웹 페이지의 서론, 메인 콘텐츠, 부가 정보, 연락처 정보 등은 각각 독립적인 `` 요소로 정의할 수 있습니다. `` 태그: **`` 태그는 독립적인 콘텐츠 조각(artic
시맨틱 태그 구조
Why Semantic? 왜 시맨틱하게 코딩해야하는지에 대해선 나의 github에 올려두었다. 이미지를 여러가지 찾아보았으나 기본적인 구조는 비슷하고 article과 section의 차이만 있을 뿐이었음. 그래서 그 둘의 차이점을 알아보겠다. Section과 Article의 차이점 section과 article이 헷갈렸다. HTML5 시멘틱 구조로 제시된 구조들을 살펴보니 article과 section을 독립적으로 쓰기도 하고, section 속에 article 여러개를 넣기도 하고, section 없이 article을 독립적으로 쓰거나, article없이 sec
Semantic web, Semantic tag
✅Semantic web / Semantic tag > Semantic web : 기존 웹을 확장하여 컴퓨터가 잘 이해할 수 있는 의미를 기반으로 의미적 상호운용성을 실현, 다양한 정보들을 컴퓨터 스스로 처리, 자동화, 재활용 등을 할 수 있도록 하는 것이 목표 > Semantic tag : 시맨틱 태그가 나오기 전 웹 페이지는 구조를 만들기 위해 대부분 코드에 &nb
HTML - Semantic Web
HTML 문서를 작성할 때 시맨틱하게 혹은 시맨틱한 코드를 작성하라는 말을 많이 듣는데 이게 도대체 무엇을 의미하는 걸까요?🤔 Semantic 먼저 Semantic이라는 단어의 뜻을 알아봅시다! > 형용사 1.(언어·기호의) 의미의, 어의의 > 2.의미론의 > 👉 파파고 의미의 뜻을 가진 semantic은 프로그래밍에서도 코드가 어떠한 목적을 가지고 있는지와 같은 코드의 의미에 대한 것을 나타냅니다. 이전에 다루었던 텍스트 관련 요소중 strong을 예로 들면, 해당 요소는 내용을 두껍게 보여지게 하는 효과에 초점을 두는 것이 아니라, 요소가 가지는 목적, 즉 내용을 강조하는 것에 초점을 두고 사용하는 것을 말하는 것이라고 볼 수 있겠죠?👍 div, section, article 제일 많이 사용하지만 항상
TIL) 0325 재현쌤의 HTML, CSS 특강
1. article과 section 구분 1) article 독립적으로 존재할 수 있는 구획, 다른 페이지에서 느닷없이 나와도 괜찮다. 네이버 페이지를 예로 들자면, 메인 페이지가 아닌 다른 페이지에 있어도 이상하지 않은 것 (보통 위젯 같은 것을 만들 때 article로 만든다. 날씨 위젯, 다크모드로 보기 위젯 등) 2) section 연관성 있는 문서의 구획을 나누고자 할 때 쿠팡 페이지를 예로 들자면, 오늘의 발견, 오늘의 쇼핑제안, 오늘의 판매자 특가 등과 같이 연관성 있으면 section을 쓴다. 
HTML 기본 01
HTML5 기본구성 결과 : nav 요소 문서 내비게이션 역할을 하는 요소로, 일반적으로 웹 페이지 상단에 위치하여 사용자가 사이트 내에서 필요한 정보를 쉽게 찾을 수 있도록 합니다. ex 웹 사이트의 메뉴 부분 article 요소 독립적인 콘텐츠 블록을 나타내며, 뉴스 기사, 블로그 게시물 등과 같이 하나의 주제에 대한 내용을 담고 있는 구성 요소입니다. ex 해당 메뉴에서 선택된 항목의 내용 section 요소 문서의 구획을 나타내는 요소입니다.
[9] 03/24 자바스크립트 수업
시맨틱 태그 semantic : 의미론적인, 의미적인 머리, 옆구리, 네비게이션, 발바닥, 등 이름만 가지고 어느 역할을 하며, 웹에서 어느 위치에 있는 태그인지 쉽게 파악 가능. 시맨틱 태그는 기능은x. div와 동일한 역할. 태그에 의미가 있기 때문에, 검색을 할 때 자료를 쉽게 찾게 해주거나 시각장애인에게 도움을 주기도 함. header 문서 상단에 위치하며 사이트의 로고, 검색창, 프로필 등등이 있음. nav 네비게이션. 운영하는 서비스롤 연결해주는 링크 역할. aside 사이드. 옆구리. 옆쪽에 있는 작은 메뉴를 의미함. section 문서의 구역을 나눌때 사용한다. article 잡지, 기사. 해당 구역 안에서 나타내는 콘텐츠. main 그 페이지에서 가장 메인이 되는 내용을 쓰는 곳. 한 번밖에 못씀. footer 발바닥. 화면 맨 밑에 위치하며 사이트를 요약해놓은 곳. 저작권 정보, 사업자, 연
[TIL] Semantic Tag : Section VS Article
시맨틱 태그를 사용하다가 과 를 사용하던 도중 안에 을 넣어도 되는가? 안에 을 넣어도 되는가? 에 대한 궁금증이 생겨 그에 대한 정보를 찾아보게 되었다. 일단! 시맨틱 태그(semantic tag)란 무엇인가? MDN 문서가 말하는 HTML 시맨틱 태그란? >HTML은 채워질 데이터를 나타내도록 코딩해야합니다. 기본 프리젠테이션 스타일기반이 아니라요. 프레젠테이션(어떻게 보여져야만 하는가)은 CSS만의 단독 역할입니다. , 처럼 태그들이 어떤 의미로 쓰여질 것인지, 어떤 의미가 있는 element인지 명시할 수 있어야한다고 한다. article의 설명을 먼저 체크해 보았다. 각각의 을 식별할 수단이 필요합니다. 주로 제목() 요소를 의 자식으로 포함하는 방법을 사용합니다. 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 요소 안에 중첩한 로 나타낼 수
콘텐츠 모델, 왜 중요한데?
⭐ HTML5의 특징, 콘텐츠 모델 지금의 웹 표준 기술로서 HTML5가 채택되었기 때문에 우리는 HTML5의 특징을 자세히 알고 넘어갈 필요가 있다. HTML5의 가장 큰 특징이라 함은 아무래도 콘텐츠 모델 개념의 등장일 것이다. 이번 글에서는 콘텐츠 모델을 구체적으로 살펴보고, 그 중에서도 HTML5에서 새로 추가된 태그들이 다수 포함된 섹셔닝 콘텐츠를 비중 있게 다루고자 한다. 🤔 콘텐츠 모델이 그렇게 중요해? 먼저 콘텐츠 모델을 간략하게 설명하면 콘텐츠 모델은 기존에 block 요소와 inline 요소로 태그를 구분하던 방식에서 벗어나서 태그를 특성에 따라 7가지로 카테고리화한 것이다. 그렇다면 콘텐츠 모델이 중요한 이유는 무엇일까? 그 이유는 바로
[HTML5] 섹션 관련 요소
log 2015. 5. 8. 11:40 섹션요소 section : 장,절 nav : 내비게이션 article : 독립된콘텐츠,배포 aside : 관련이적은콘텐츠 h1~h6 : 제목태그 hgroup : 제목그룹 header : 페이지의머리글,섹션의머리글 footer : 페이지의바닥글,섹션의바닥글 address : 연락처정보 section 새로 추가된 요소 장 또는 절등의 단위로 사용 스타일을 위해 이 요소를 사용하면 안된다. 스타일을 위해 사용시 division 요소 사용 nav 새로 추가된 요소 페이지나 사이트의 주요 네이게이션에 사용 요소의 특성으로 제목을 억지로 넣을 필요 없다 페이지에서 2~3개까지 사용 가능하다 하나는 사이트 전체의 네이게이션 [header]부분에 포함한다 aside 새로 추가된 요소 기사내용과 관련한 이미지 등 특종과 같은 경우는 aside요소에 해당하지 않는다. 사이드바, 신문등에서 강조
semantic semantic image [
[HTML] Content categories (컨텐츠 카테고리) / Sections
Content categories (컨텐츠 카테고리) / Sections > HTML5 이전에는 HTML 태그 요소를 inline(인라인) 요소와 block(블록) 요소를 구분하는 정도로만 분류했었다. > HTML5 이후부터는 요소별로 공통 특성을 공유하는 것끼리 그룹화하여 카테고리를 나누었다. 이렇게 그룹화한 것들을 Contents Model (컨텐츠 모델) 이라고 한다. > 아래의 그림과 같이 요소의 특성에 따라 총 7개의 카테고리로 분류한다. Metadata Content Flow Content Sectioning Content Heading Content Phrasing Content Embedded Content Interacitve Content [
<fieldset>은 <form>안의 <section>?
` 태그를 쓸 때 `를 쓰면서 처음으로 비호감인 태그라고 생각했다(미안ㅠ) 꼭 같이 써줘야 하는 예쁘지도 않아 다 숨겨버려야 하는 `` 태그가 왜 있는지도 의문이었다 (fieldset 안에서 header태그를 쓰면 되는 거 아닌가?!) 그래도 알아보자! `` 필드셋 태그는 label들을 묶어줄 때 사용한다. form 내부에 어떤 기준으로 label들이 묶일 수 있다면 fieldset으로 묶어준다. section이랑 같은 기능을 하는 것인가? 하고 멘토님에게 여쭈어봤다. > 🦁 : fieldset이 form 안에서 연관된 요소(ex. label, input..)들을 묶을 때 사용하지만 section과는 다릅니다! fieldset은 플로우 콘텐츠이고, section은 구획 콘텐츠인데 이 차이에 대해서 찾아보시면 될 것 같습니다 일단 section은 하나의 작은 html이라고 항상 말씀해주신 것처럼 그 안에
🧙🏼 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
Kernel Section
Kernel Section Mismatch 에러 발생 원인 커널 링킹 타임에 발생하는 에러 에러로그 .init.text 섹션(init) 의 함수는 임시로 사용되고 해제 된다. 부팅시 한번 호출된다. 따라서 일반 .text 섹션의 함수가 .init 섹션의 코드나 데이터를 접근할때 링킹 에러가 발생한다. 가령 위의 예에서 checkcmdline() 함수가 ofgetflatdt_root() 함수를 호출하는데 이 함수는 init 지시자가 있는 .init.text섹션에 존재하는 함수다. 반면 checkcmdline는 아니다. 그래서 checkcmdline 함수가 해제 되어버린 함수를 호출하게 되므로 섹션 mismatch가 발생하는것이다. 추가 궁금증: __init section에 등록된 함수에서 text섹션에 있는 함수 호출시 에러 발생한다면, 그럼 서로다른 섹션간의 함수 호출은 전혀 못하는지? 참고: http://rousal
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
<section>, <article>, <div> 용도에 맞게 사용하기!
섹션 구분을 조금 더 의미 있게 div가 아닌 section 혹은 article을 사용할 수 있다. `` HTML `` tag는 플로우 컨텐츠를 위한 통용 컨테이너다. CSS로 꾸미기 전에는 컨텐츠나 레이아웃에 어떤 영향도 주지 않는다. `` 요소는 "순수" 컨테이너로서 아무것도 표현하지 않는다. 대신 다른 요소 여럿을 묶어 class, id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시하는 등의 용도로 사용할 수 있다. div는 division의 약자입니다. 별도의 의미가 없고, 그냥 정말 어떤 내용이든 담을 수 있는 박스라고 생각하면 된다. 사용방법
시맨틱 웹/태그
시맨틱 웹 'semantic'이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다. 시맨틱 마크업 사용 장점 검색 엔진은 시맨틱 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하여 SEO(Search Engine Optimize)에 영향을준다. 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 시맨틱 마크업을 푯말로 사용할 수 있다. -의미가 없는 div태그들을 탐색하는 것보다, 의미있는 코드 블록을 작성하는게 나중에 보기도 편하고 찾기도 쉽다. 개발자에게 태그안에 채워질데이터 유형을 제안할 수 있다. 시맨틱 태그 종류 및 특징 header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 예시로는 제목(페이지 제목, 글 제목), 로고, 검색 폼, 작성자 이름 등의 요소를 포함한다. header태그 안에 header태그 또는 footer 태그를 넣을 수 없다.
과제 리뷰_11/3
🚩11/3 오늘은 어제의 과제 리뷰로 시작했다. 실제로 있는 홈페이지라서 이론상의 내용과는 조금 달랐지만, 구체적으로 구현된 모습을 볼 수 있어서 좋았다. (물론, github에 올린 코드에서는 내용을 다지웠다!) 링크텍스트 중요한 리뷰 h1 태그는 문서에 한개만 있어야 한다. 웹접근성을 높이기 위해 section에는 heading이 있어야 한다. br태그가 문장안에 있는 형태는 지양하자. footer에서는 구획을 나누지 않는 것이 좋다. 전화번호나 메일은 클릭을 했을때 전화,메일이 될 수 있도록 a 태그를 쓴다. 약관에 동의합니다. 와 동의하지 않습니다. 가 있는 경우, 1) 동의하지 않습니다.가 기본값으로 가있어야 한다. 2) 둘 다 체크 되