src
- script
- img
단일 태그: <img>, <>
href
hypertext reference
<a>
하이퍼링크
| <a href="이동할 링크">표시할 텍스트</a> |
| 경로 참고 |
경로1) 상대 경로- - ./ - ../ ※ 상위 폴더로 이동 2) 절대 경로 - http - https - / ※ 최상위 경로(root)로 이동 - // |
※ Setting에 들어가서 Tab Size를 설정할 수 있다.
예시 사이
element.style은 CSS의 인라인 선언 방식으로 스타일이 삽입됩니다.
자세한 내용은 CSS 선언 방식 파트에서 다룸.
CSS 선택자(Selector)는 CSS 스타일을 어떤 요소에 적용할지를 선택하는 일종의 규칙입니다.
icons라는 요소는 UL이라는 태그는 class가 "icons"
ul이라는 태그를 선택해서 그 부분에 어떠한 css 스타일을 이렇게 입력함.
중앙선이 그어져 있는 부분: 실제로 적용이 되지 않은 부분
ul 태그는
display: flex고 flex를 통해서 그 안에 들어있는 각각의 li라는 3개의 태그를 수평정렬할 수 있는 구조를 가지게 만든 것.
aline-items: center: 각각의 아이템들을 위아래 가운데에 정렬을 하겠다.
크롬에서 제공하는 개발자 도구라는 기능으로 대부분의 웹 사이트 HTML과 CSS를 분석할 수 있다.
그러나 JS는 보통 비즈니스 로직이 들어가기 때문에 난독화 과정을 거쳐 분석하기 매우 어렵게 설정된 경우가 많아, 보통 큰 흐름을 유추하는 정도로만 이해하는 편이다.
:hov(호버)는 CSS 선택자 파트에서 학습하는 여러 가상 클래스 선택자에 관한 내용을 임시로 적용해 볼 수 있는 메뉴이다.
[Styles] 탭과 [Computed] 탭
codepen.io/pen/
원래 존재하던 프로젝트에 코드를 일부만 추가해서 테스트해보고 싶다면 똑같은 프로젝트를 복사할 필요 없이 코드펜이라는 사이트로 접속하면 바로 확인할 수 있다.
※ 이 사이트의 HTML 부분은 .html 파일의 <body> 파트에 해당한다.
※ 톱니바퀴
추가 옵션을 설정할 수 있다.
'FE' 카테고리의 다른 글
| [FE][06] HTML 개요: 요소, 속성, 태그, 내용, 속성 (0) | 2024.07.09 |
|---|---|
| [FE][05] 브라우저 스타일 초기화, Emmet (자동완성) (0) | 2024.07.09 |
| [FE][03] HTML 이미지 출력, 경로 (0) | 2024.07.06 |
| [FE][02] HTML 기본 태그 (0) | 2024.07.06 |
| [FE][01] Visual Code 기본 세팅 및 단축키 (0) | 2024.07.06 |