나의 수업일지

인천 일보 아카데미 31일차 -1- / frontend_간단한 구성요소 / html - 문법 /html - 파일 구조 / 요소 - 블록 , 인라인 / 상대경로,절대경로 / 선택자(selector)

GUPING 2023. 4. 5. 16:15
  • 프론트엔드(frontend)의 큰 목차?

프론트엔드 개발자

웹 디자이너 : 말그대로 디자인하는사람이고

웹 퍼블리셔 : 디자이너가 디자인한 웹을 작동 가능하게 만들어 주는 사람이다

 

 

  • 프론트(fromnt) 간단한 구성요소

HTML : 구조를 정의 (HTML은 프로그램 언어라고 하기는 힘들고 마크업 언어라고 한다)

CSS : 꾸미는 용도

JAVASCRIPT : 동적기능을 담당

 

 

  • 파일의 형식

.html 파일은 웹으로 실행한다 ( 대표적으로 크롬의 크로니움이라는 엔진이 있다 )

( java를 실행하기 위해서 jdk가 필요한것과 같다 )

 

 

  • html 문법

<body> - 시작 태그
	div,p 태그는 모두 body 태그에 소속됨
    <div>
    	div 태그에 소속된 부분
    </div>
    <p>
    	p 태그에 소속된 부분
    </p>
</body> - 종료 태그

종료 태그가 따로 없는 태그도 있음
	대표적으로 <input>태그

 

id 속성에 id1이라는 속성값을 적용
<div id = "id1">

</div>

class 속성에 class1 이라는 속성값을 적용
class 속성 적용
<div calss = "class1">

</div>

<input type="text"name="member_email" id = "member_email">

 

 

  • html 파일 기본 구조

 

 

  • 블록(block)요소(태그)  , 인라인(inline) 요소(태그)

 

 

  • 상대경로,절대경로

.. / : 현재 폴더가 있는 상위폴더로 올라감

. / : 현재 폴더 안의 다른 폴더를 찾음

 

 

  • 선택자(selector)

  • 태그 선택자

  • id 선택자

  • class 선택자

 

 

  • 자투리 - vscode tools
 

비주얼 스튜디오 코드 익스텐션 28개 추천 / 확장 프로그램 설치 및 웹 개발 환경 설정 (Visual Studio

목차 오늘은 흔히 웹 공부를 할 때 사용하는 텍스트 에디터인 '비쥬얼 스튜디오 코드(Visual Studio Code)의 확장프로그램'을 소개할 것이다. 나도 매번 개발하는 컴퓨터와 노트북, 개발 환경이 계속

parkjh7764.tistory.com