728x90 반응형 Coding With Jina/HTML13 [HTML] 시맨틱 태그(semantic tag)와 웹페이지 구조(page structure) 1) 시맨틱 태그(semantic tag) semantic markup ① 사용 이유 - SEO(검색엔진최적화) - accesibility(웹접근성) - 개발자들을 위해 ② 종류 - : 웹사이트의 브랜드 로고 및 메뉴 아이템등을 사용시 - : 여러가지 메뉴들이 모아서 사용시 - : 웹사이트 마지막 부가적인 정보 또는 링크 사용시 - : 웹 사이트에서 중요한 컨텐츠 사용시 - : main 안에 컨텐츠와 직접적으로 상관없는 부가적인 내용 사용 시( ex) 광고, 링크 등등 ) - : 내용이 독립적이고 홀로 설 수 있는 내용 사용시 - : 서로 관계 있는 문서를 분리해서 사용시 2) 웹페이지 구조(page structure) 시맨틱태그들을 어떤 위치에서 어떤 구조로 사용하는지 알아두어야한다. 2022. 1. 17. [HTML] 파비콘 생성하기 결과 2021. 2. 16. [HTML] a 태그 속성 - target - 태그의 target 속성은 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시 속성값 설명 _blank 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함. _self 링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. 기본값으로 생략 가능. _parent 링크된 문서를 현재 프레임의 부모 프레임에서 오픈함. _top 링크된 문서를 현재 윈도우 전체에서 오픈함. 프레임 이름 링크된 문서를 명시된 프레임에서 오픈함. [출처] tcpschool.com/html-tag-attrs/a-target 2021. 2. 15. [HTML] HTML의 자동완성기능 Emmet 며칠 전 강의를 듣다가 완전 쿨한 기능을 보았기에 잘 배웠다가 써먹으려고 한다 이런 거 잘 쓰면 뭔가 멋있어 보이고 편하고 아주 좋으니까ㅎㅎ Emmet 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 주는 플러그인 1) > 는 자식요소를 가진 구조를 생성할 수 있다. div>ul>li*3을 입력하면 이렇게 자동으로 코드가 생성됨(완전 멋지다😍) 2) + 는 형제요소를 가진 구조 즉 각각의 엘리먼트 생성 가능 div+a+p를 입력하면 이런 Emmet 문법이 엄청 많지만 일단은 오늘 배운 것만 적어두고 하면서 배운것들 다시 더 적어놓은 예정 3) ul>li*5>a{$}를 입력하면 이렇게 숫자도 생성이 가능하다. 1 2 3 4 5 2020. 5. 14. [HTML] ID & Class id - 태그에 부여 가능한 고유 명칭 - id의 이름은 태그당 하나만 지정가능 - id명 중복으로 사용 불가 - id명은 자유롭게 지으면 되지만 숫자로 시작해서는 안됨 - 표기 방식은 #id명 - 사용 방식은 class - 태그에 부여 가능한 그룹 명칭 - class의 이름은 태그당 하나만 지정 가능 - class명 중복으로 사용 가능 - class명은 자유롭게 지으면 되지만 숫자로 시작해서는 안됨 - 표기 방식은 .class명 - 사용 방식은 * 한 태그 안에 id와 class 둘 다 사용 가능 2020. 5. 12. [HTML] Sematic & Non Semantic Tags 1) Sematic Tag - 의미가 있는 태그 - 태그를 통해 확실한 영역을 알 수 있는 태그 - 제목, 문단, 내비게이션 등등 뭔가 뜻이 있는 태그 - 예를 들면 h1 / section / article / header 2) Non-Semantic Tag - 아무 의미가 없는 태그 - 태그를 봐도 어디영역인지 모르는 태그 - 아무 지칭하는 바가 없는 , 의미 없는 태그 - 예를 들면 div / span 2020. 5. 12. 이전 1 2 3 다음 728x90 반응형
