본문 바로가기

분류 전체보기155

SEO란? (html 문서를 시맨틱 태그로 작성해야하는 이유) SEO Search Engine Optimization의 약자로 말그래도 검색엔진 최적화라는 의미다. 검색엔진에 잘 노출될 수 있게끔 다양하게 문제를 해결하고 기존의 아이디어들을 개선하는 작업이다. 이 작업 중 하나가 시맨틱 태그를 이용해 html 문서를 만드는 것이다. 검색 엔진은 html 코드 만으로 그 의미를 인지해야 하기 때문에 시맨틱 요소를 해석하게 된다. 특정한 태그에 의미를 부여해서 웹페이지를 만드는 것을 시맨틱 웹이라고 하고 시멘틱 태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다. 2021. 9. 19.
[HTML] 텍스트를 한 줄로 표시하는 태그 태그, 태그 - 굵게 표시하기 두 태그 모두 눈으로 보기에는 차이가 느껴지지 않는다. 하지만 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문이다. 화면 낭독기에서 이게 진짜 강조된 부분인지, 아니면 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별을 할 수 있게 해줘야 한다. - 굵게 강조할 텍스트 경고나, 주의 사항처럼 중요한 내용이어서 강조해야할 때 사용한다. - 굵게 표시할 텍스트 문서의 키워드처럼 단순히 굵게 표시할 때 사용한다. 즉, 중요한지 아닌지에 따라서 구분한다. 태그, 태그 - 이탤릭체로 표시하기 텍스트가 비스틈히 이탤릭체로 표시된다. - 이탤릭체로 강조할 텍스트 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용한다. - 이탤릭체로 표시할 텍스트 마음 속의 생각이나 꿈, .. 2021. 9. 19.
[HTML] 텍스트를 덩어리로 묶어 주는 태그 태그 - 제목 표시하기 제목 텍스트는 일반 텍스트보다 굵고 진하게 표시된다. ~ 까지 표현할 수 있으며 가장 큰 제목이 이고 이 가장 작은 크기의 제목이다. h1 h2 h3 h4 h5 h6 결과값 : 태그 - 단락 만들기 태그는 paragraph의 줄임말로, 텍스트 단락을 만든다. 여기서 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다. 태그를 두개 삽입해서 텍스트 단락인 것처럼 보이게 할 순 있으나 실제로 웹 브라우저가 이것을 텍스트 단락으로 인식하기 어렵다. 태그 - 줄 바꾸기 줄바꿈을 하기 위해 사용한다. break의 줄임말이며 닫는 태그가 없다. 태그 - 분위기 전환을 위한 수평줄 넣기. horizontal의 줄임말로 수평 줄을 삽입할 때 사용한다. 보통 여러 개의 텍스트 단락을 나열하는 도.. 2021. 9. 19.
[CSS] css 기본 , 인접형제 , 일반형제 , 자식 선택자 전체선택자 페이지에 있는 전체 전체 요소를 대상으로 한다. 주의 : 실전에서는 사용하지 말 것을 권함. 브라우저에 과부하가 걸릴 수 있음. * { margin:0; padding:0; } 타입 선택자 h1, p, div, span 등 html 요소(Element)를 선택하는 선택자. 클래스 선택자(.) 특정 값을 class 속성의 값으로 갖는 요소를 선택한다. .abc{ color:red; } p.abc{ color:blue; } /*클래스 값으로 abc를 갖는 p 요소를 선택*/ 인접형제선택자(X+Y) 0 1 2 3 4 div + p{ color:red; } 등위 선택자로 동등한 위치에 있는 태그를 선택하여 css속성을 지정할 수 있다. 지정한 요소의 바로 다음에 위치하는 요소만 선택한다. 그래서 바로.. 2021. 9. 15.
[CSS] css 속성 선택자 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있다. [attribute] 해당 속성을 가진 태그를 지정. a[target]{ color:red; } /*a링크 중 target 속성을 가진 태그를 선택*/ [target]{ color:#fff; } /*target 속성을 가진 태그를 선택*/ [attribute="value"] 속성명과 속성값이 동시에 일치하는 요소를 선택자로 지정하는 기능. [class="tomato"]{ background-color:blue; } /*속성명이 class이고, 속성값이 tomato인 요소를 선택자로 지정.*/ p[class="tomato"]{ background-color:red; } /* p 태그 중에서 속성명과 속성값이 일치하는 요소를 선택자로.. 2021. 9. 15.
[CSS] CSS 가상 요소 ::first-line 요소의 첫 번째 줄을 선택한다. 안녕하세요 반갑습니다 안녕하세요 반갑습니다 p::first-line{ color:red; } 결과값 : ::first-letter 요소의 첫 번째 문자를 선택한다. p::first-letter{ color:red; } 결과값 : ::before, ::after 내용의 앞과 뒤에 콘텐츠를 추가하고, 이 콘텐츠는 content=""라는 속성으로 정의한다. 인라인 요소이다. 홈페이지 헤더나 푸터에 구분선을 삽입할 때 컨텐츠 주변의 디자인적 요소를 추가할 수 있을 때 ::before, ::after 태그 활용 가상 요소를 이용해 헤더 푸터의 구분선을 넣거나, 꾸미는 용도로 사용할 수 있다. ::selection 마우스로 드래그 했을 때 선택한 텍스트의 스타.. 2021. 9. 15.
반응형

티스토리툴바