[💻 코드스테이츠 FE 44기] 부트캠프 - 웹 개발 이해, HTML

JiEun·2023년 2월 14일

html 부트캠프 코드스테이츠 프론트엔드

부트캠프[코드스테이츠 FE 44기]

목록 보기

2/81

✔️ 시작

오늘 부터 수업 시작이다. 강사님이 수업하는 방식이 아닌 자기주도적 학습으로 처음 진행할 경우 어려움이 있을 수 있다. 미리 선행 학습을 하고 시작하는걸 추천 한다.

웹 개발의 이해와 HTML에 대해 배웠다.
예전 업무했던 바탕으로 그리 어렵지 않았지만 이론적인 부분을 좀 더
세세하게 알 수 있었던 거 같다.

학습한 부분 + 인터넷 서치를 통해 정리한 내용이다.

📍 웹 개발 이해

✔️ HTML(Hyper Text Markup Language)

웹 브라우저에 표시되도록 설계된 문서의 표준 마크업 언어이다.
구조적 의미를 표시하고 구조화된 문서를 만드는 수단이다.

예시) 캐릭터를 만들 경우 우선 캐릭터의 뼈대를 만든다.

✔️ CSS(Cascading Style Sheet)

마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어
HTML에 주로 사용되며 W3C의 표준이고, 레이아웃과 스타일을 정의할 때 자유도가 높다.

예시) 만들어진 뼈대에 머리, 옷 등의 디자인을 한다.

✔️ Javascript

객체 기반의 스크립트 프로그래밍 언어이다.
웹 브라우저내에 주로 사용되고 다른 응용프로그램의 내장 객체에도 접근 할 수 있는 기능을 가지고 있다.

예시) 디자인이 완성된 캐릭터에게 움직임을 넣어준다.

📍 HTML 기초

<,>(꺾쇠 괄호)로 작성된 태그로 구분한다.
<div>, <span>, <li>, <img>, <a> 등이 있다.
<body> 태그 내부에 작성한다.

기본 구성(닫는 태그가 없는 경우도 있다.예)input )
<태그 속성="값">Hello!</태그>

✔️ 주로 사용되는 태그 몇가지

✔️ div

콘텐츠 영역을 잡을 때 사용하는 태그

해당 컨텐츠 길이 상관없이 한 줄을 차지한다. (블록 요소)
<div>보여질 내용 작성</div>

✔️ span

본질적으로 아무 의미가 없는 태그

해당 컨텐츠 영역까지만 잡아준다. (인라인 요소)
<span>보여질 내용 작성</span>

✔️ img

이미지를 삽입하는 태그

src(경로), alt(이미지 대체 텍스트)의 속성을 필수로 넣어줘야한다.
alt의 경우 웹 접근성으로 작성하는게 좋다.
<img src="이미지 경로" alt="이미지 설명문">

✔️ a

페이지 이동시 사용하는 태그

href(페이지 경로), title(링크 설명문),target(페이지를 어디에 열지)의 속성을 넣어줘야한다.
<a href="페이지 경로" title="링크 설명" target="_blank">새 탭으로 페이지 열기</a>
<a href="페이지 경로" title="링크 설명">해당 페이지로 열기</a>