많은 개발자가 웹 사이트를 개발할 때 특정 레이아웃을 선호하자, HTML5에서 해당 레이아웃을 아예 태그로 만들어 각 요소의 쓰임을 명확하게 구분하였다. > 이를 시맨틱 태그(Semantic tag)라고 한다. Semantic = 의미론적 시맨틱 태그 = 의미를 가지는 태그 나눠진 구획의 기능을 태그 이름만 보고도 이해할 수 있다. 시맨틱 태그를 사용해야하는 이유 1. SEO Search Engine Optimization 2. 접근성 스크린 리더를 이용하거나 키보드만을 이용해 접근하는 경우에 문제없이 동작하도록 해야함 3. 유지보수 한눈에 구조를 알아보기 쉬워야 유지보수에 좋음 웹 페이지 혹은 의 소개나 제목을 담기 위해 사용하는 요소 와 혼동하지 않도록 유의 내비게이션 역할을 수행하는 요소 페이지 이..
navbar를 만들 때 왜 대체 다들 를 사용하는지 너무 궁금해서 찾아보니까 왜 글을 맞춤법대로 쓰나요 같은 맥락의 의문이었다! 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있다. 하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있다. 이와 같이 ul 과 li 를 쓰게 되면 의미적으로 이것은 목록이라는 것을 사용자에게 알려주게 된다. >그래서 메뉴 navbar를 만들 때 li태그를 사용한다. HTML을 작성할 때는 표현하려는 내용이 무엇을 의미하는지에 따라 태그를 적절히 사용해 코드만 보고도 구조를 파악하기 쉽게 코드를 짜야한다! 시맨틱 태그를 쓰는 이..
figure 태그 요소는 독립적인 콘텐츠를 표현합니다. 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다. 보통 는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표. 코드 조각 등을 맡습니다. cite 태그 요소는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다. 시, 논문, 에세이 등등 다양한 저작물들에 사용 W3C 명세는 요소로 저작물의 출처를 표기할 때 저작자도 표기할 수 있음을 명시하고 있습니다. 그러나 정반대로, WHATWG 명세는 사람 이름을 어떤 상황에서도 절대 포함하지 말아야 한다고 적혀있다는 점을 알아두는 것이 좋습니다. ..
https://www.w3schools.com/css/css_text_spacing.asp CSS Text Indentation and Spacing CSS Text Spacing Text Indentation The text-indent property is used to specify the indentation of the first line of a text: Letter Spacing The letter-spacing property is used to specify the space between the characters in a text. The following example demon www.w3schools.com
https://www.howdy-mj.me/javascript/var-let-const/ var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프 자바스크립트에서 var로 변수 선언이 가능했는데, 왜 const와 let이 나왔으며 이 둘의 사용을 권장할까? 이를 정확하게 알기 위해서는, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아야한다. www.howdy-mj.me https://medium.com/@yeon22/javascript-var-let-const%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-9fab5c264c9c (JavaScript) var, let, const의 차이점 이전 글에서 자바스크립트 스코프에 대해서 알아보았는데요. medium...
CSS transform 속성 CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 변형 가능한 요소만 transform할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다. transform 속성은 키워드 none 또는 하나 이상의 값을 사용해 지정할 수 있습니다. 값 요소에 적용할 하나 이상의 CSS 변형 함수. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.none아무런 변형도 적용하지 않..
- Total
- Today
- Yesterday
- html
- vue
- React
- 파이썬
- 김버그
- git
- map
- 비주얼스튜디오코드
- 스파르타코딩클럽
- 타입스크립트
- 코딩앙마
- Til
- 제이쿼리
- 깃
- 회고
- 코드잇
- Python
- js
- 드림코딩
- CSS
- 자바스크립트
- Typescript
- 제로초
- 구름에듀
- vscode
- scss
- javascript
- TS
- 저스트코드
- 리액트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |