본문 바로가기

Frontend136

[HTML] <map> 태그, <area> 태그, usemap 속성 - 이미지맵 지정하기 하나의 이미지에 여러 개의 링크를 걸 수 있다. 즉, 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열린다. 이것을 '이미지 맵'이라고 한다. 기본형 2021. 9. 21.
[HTML] table 태그 정복하기 , , , 태그 - 기본적인 표 만들기 기본형 제목 내용 표를 나타내는 html 태그 행을 나타내는 과 셀을 나타내는 , 태그 등이 사용됨. - table row - 표 내부에서 행을 나타내는 태그 - table header - header의 cell을 나타내는 태그 - 기본 스타일 : text-align:center, font-weight:bold - table data - 일반적인 칸(cell)을 나타내는 태그 - 기본 스타일 : text-align:left colspan, rowspan 속성 - 행 또는 열 합치기 ※ 이러한 속성들을 적어줄 때 합쳐지는 셀들은 html 상에서 지워줘야 한다. colspan - 가로로 이웃한 셀을 합칠 때 - column이 열이라는 뜻, 열 하나하나를 합치니깐 가로로.. 2021. 9. 21.
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.
반응형

티스토리툴바