▶SEO(Search Engine Optimization) : 검색 엔진 최적화 많은 사람이 이용하길 바라는 서비스를 만들었다면 네이버나 구글 같은 검색 엔진의 상위에 노출시키고 싶을 것입니다. 하지만 이미 시장에는 수많은 경쟁 서비스가 있어 그중에서 검색 결과의 상단에 나오게 하는 것은 매우 어려운 일입니다. 검색 사이트에 상단에 노출시키는 것은 개발의 영역이 아닌 서비스의 인기, 마케팅과 광고의 영역이라 생각할 수 있습니다. 일부는 맞지만, 일부는 아닙니다. 개발자의 몇 가지 노력으로 서비스가 적절한 키워드에 더 많이 노출되도록 할 수 있습니다. 이렇게 우리의 사이트를 찾기 쉽도록 개선하는 여러 노력을 검색 엔진 최적화(SEO, Search Engine Optimization)라고 부릅니다. 구글과 ..
HTML 요소를 어떻게 작성하는 것이 중요할까요? 여러 가지가 있겠지만 제일 중요한 것은 시맨틱(Semantic)하게 작성해야 한다는 것입니다. "Semantic"이라는 단어는 '의미의', '의미론적인'으로 해석됩니다. 즉 의미에 맞는 태그를 사용해 문서를 작성하는 것을 말합니다. 예를 들어 특별한 의미가 없는 태그를 대신해 , , , , 처럼 의미 있는 태그를 상황에 따라 사용하는 것입니다. 시맨틱하게 HTML을 작성하면 요소에 쉽게 의미를 부여할 수 있습니다. 각 요소가 자체적인 의미를 가지기 때문에 개발자 입장에서 가독성이 높아지고 유지 보수가 쉬워집니다. 또한 장치에서 콘텐츠의 계층 구조를 더 쉽게 이해할 수 있습니다. 검색 엔진은 HTML의 계층 구조에 따라 키워드들의 중요도를 파악하기 때문에 ..
골격을 작성하는 것은 문서의 성격과 정보를 정확하게 나타내며 정상적인 페이지 노출에 중요한 역할을 합니다.. ▶DOCTYPE 은 문서의 타입을 지정합니다. DOCTYPE은 html로 지정하면 HTML5로 작정된 문서임을 나타냅니다. 모던 브라우저에서는 DOCTYPE을 명시하지 않아도 HTML5로 작성된 문서로 인식하지만 IE9 이전 버전의 브라우저는 다른 형태의 문서로 인식합니다. 따라서 일관된 렌더링을 위해 DOCTYPE을 반드시 명시하는 것이 중요합니다. ▶html 태그는 문서의 루트 지점을 명시하는 태그입니다. 이 태그를 작성할 때는 lang 속성을 해당 서비스 국가에 맞게 넣는 것이 중요합니다. lang 속성을 지정해 이 문서의 언어가 스크린 리더 등의 장치에서 일관되게 판단되도록 해야 합니다. ..
HTML 요소를 각 특징에 따라 분류해 보려고 합니다, 첫 번째 분류 방법은 HTML 4.01에서 사용하던 방법이며, 두 번째 분류 방법은 HTML5에서 사용하는 방식입니다. 과거의 구분법을 설명하는 이유는 이후 레이아웃을 설계할 때 이해를 돕기 때문입니다. ▶인라인 요소와 블록 요소 인라인 요소와 블록 요소로 HTML 요소를 구분하는 방식은 HTML 4.01에서 사용합니다. 요소가 문서에서 차지하는 영역을 기준으로 구분됩니다. ▷블록(block) 요소 태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작합니다. 너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며 왼쪽에서부터 오른쪽으로 확장됩니다. 나 , 과 같은 요소들이 대표적인 블록요소입니다. ▷인라인(inline) 요소 태그가 할당된 ..
▶HTML이란? HTML은 Hyper Text Markup Language의 약어입니다. 하이퍼텍스트(Hyper Text)는 링크로 연결된 텍스트 페이지를 말합니다. 예를 들어 지금 보고 있는 블로그 페이지도 하이퍼텍스트가 되겠죠? 현재의 포스팅을 끝까지 다 읽어야 다음 포스팅으로 갈 수 있는 것이 아니고, 언제든지 링크를 통해 다른 포스팅이나 내 블로그, 블로그 홈으로 갈 수 있는 것처럼 링크를 통해 자유롭게 이동이 가능하다는 것이 하이퍼텍스트의 가장 큰 특징이라고 볼 수 있겠습니다. ▶HTML 요소 구성 HTML은 다른 언어들보다 느슨한 문법을 가지고 있습니다. 구성에 맞지 않게 요소를 작성하더라도 에러 없이 요소가 제대로 렌더링되고 에러 또한 노출되지 않습니다. 그렇다 보니 표준을 준수하지 않고 코..
- Total
- Today
- Yesterday
- react
- 인프런
- TypeScript
- 자바스크립트
- 딥러닝
- frontend
- testing
- 프론트엔드 기초
- 리액트
- Python
- 프론트엔드 공부
- 리액트 훅
- 머신러닝
- JSP
- 프론트엔드
- 자바
- HTML
- 프로젝트 회고
- 스타일 컴포넌트 styled-components
- react-query
- 자바스크립트 기초
- styled-components
- 파이썬
- 데이터분석
- jest
- 타입스크립트
- rtl
- next.js
- 디프만
- CSS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |