-
프론트엔트 기초 - 2023. 04. 12 [DAY 2]공부/회고 2023. 4. 12. 20:26반응형
> 오늘 뭘 배웠는가?
HTML의 기본 구조와 프론트엔드의 기초 개념을 공부했다. HTML은 웹사이트의 전반적인 구조로 틀을 잡고, CSS는 시각적으로 정렬이나 색상 등 디자인을 할 수 있다고 한다. JavaScript는 이를 동적으로 상호작용할 수 있게 한다는데, 아직은 직접 코드를 쳐보지 않아 이해되지 않았다.
> HTML의 가장 기본적인 구조
<html> </html>
<head> </head>
<title> </title><body> </body>
> 자주 사용하는 요소
<div> 한 줄을 통째로 사용
<span> 컨텐츠 크기만큼 사용
<img> 이미지 삽입
<a> 링크 삽입
<ul> & <li> 리스트 삽입 (단일 형식)
<ol> 리스트 넘버링 (1. 2. 3. 형식)
<input>, <textarea>(줄 바꿈 가능) 다양한 입력 폼
ㄴ 라디오버튼 : n개중 하나 (name으로 묶어줘야 함), 체크박스 : 여러 개 선택
<button> 버튼
> 시맨틱 요소란?
의미가 있는 고유 요소로 해석한다.
예를 들어 <div> 와 <span> 을 사용해서 <h1>과 비슷하게 구현할 수 있지만 의미적 가치는 없다. 사용하는 이유는 다음과 같다. 우선 검색할 때 검색 엔진이 좋아한다. 또 여러 개발자가 작업할 때 의미 있는 코드 블록을 찾는 것이 더 편리하고, 요소 안에 채워질 데이터 유형도 예측하기 쉬워진다.
VSCode를 처음 사용해봤다 ㅎㅎ 
VSCode에는 이런 확장 프로그램이 있어 html 파일을 새로고침 하지 않아도 자동 연동된다고 한다. 정말 편함 
하루 배운 것 만으로도 이런 단순한 구현이 가능하다 여담으로 맥북 단축키를 몰랐는데, 아래 키를 자주 사용하면 생산성이 늘어날듯 하다.
커맨드 + 쉬프트 + 3 전체화면 캡처
커맨드 + 쉬프트 + 4 부분 캡처
커맨드 + i 크롬 검사 창
반응형'공부 > 회고' 카테고리의 다른 글
혼자 코딩 - 2023. 04. 17 [DAY 5] (0) 2023.04.17 첫 페어 프로그래밍 - 2023. 04. 14 [DAY 4] (0) 2023.04.14 CSS 실습 - 2023. 04. 13 [DAY 3] (0) 2023.04.13 온라인 부트캠프를 시작하며 - 2023. 04. 11 [DAY 1] (0) 2023.04.11 환영합니다! (0) 2023.04.05