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은 다른 언어들보다 느슨한 문법을 가지고 있습니다. 구성에 맞지 않게 요소를 작성하더라도 에러 없이 요소가 제대로 렌더링되고 에러 또한 노출되지 않습니다. 그렇다 보니 표준을 준수하지 않고 코..
우리가 이전까지 공부했던 numpy, pandas, 데이터전처리, matplotlib를 총합해서 직접 프로젝트를 진행해보겠습니다 :) 1) 사용할 데이터셋 간단 설명 - 온라인 리테일 사이트의 2010/12-2011/12까지의 주문 기록 데이터 - 약 500,000건의 데이터 2) 라이브러리 불러오기 import numpy as np import pandas as pd 3) csv 파일 불러오기 retail = pd.read_csv('OnlineRetail.csv') 4) 파일 정보 알아보기 reatil.info() out:::: - 총 541,909개의 entries # InvoiceNo : 주문번호 # StockCode : 아이템 아이디 # Description : 상품 설명 # Quantity : ..
이전 글에서 수행한 전처리 파일을 matplotlib 라이브러리를 활용해서 시각화를 해봅시다 :) [matplotlib 라이브러리] - 파이썬 기반 시각화 라이브러리 - import matplotlib.pyplot as plt - 파이썬 표준 시각화 도구라고 불릴만큼 다양한 기능을 지원 - pandas와 연동이 용이함 - 한글에 대한 지원이 완벽하지 않음 - 세부 기능이 많으나 사용성이 복잡하다고 느낄 수도 있음 - https://matplotlib.org/ Matplotlib — Visualization with Python seaborn seaborn is a high level interface for drawing statistical graphics with Matplotlib. It aims ..
- Total
- Today
- Yesterday
- Python
- jest
- next.js
- 프로젝트 회고
- 데이터분석
- react
- 스타일 컴포넌트 styled-components
- TypeScript
- JSP
- 딥러닝
- HTML
- 자바스크립트
- 프론트엔드 공부
- rtl
- frontend
- 머신러닝
- 타입스크립트
- 리액트 훅
- 디프만
- 리액트
- 자바스크립트 기초
- 파이썬
- CSS
- testing
- 프론트엔드
- 인프런
- react-query
- styled-components
- 프론트엔드 기초
- 자바
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |