나의 수업일지

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

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

 

'나의 수업일지' 카테고리의 다른 글

인천 일보 아카데미 32일차 -1- 선택자(selector) / 가상 선택자(hover) / hover 사용 - 감추고 보여주기  (0) 2023.04.06
인천 일보 아카데미 31일차 -2- 사용해보며 알아보기 (요소 - 블록,인라인/ link 사용 / font 변경 / 선택자(selector))  (0) 2023.04.06
인천 일보 아카데미 30일차 / 문자 합치기(CONCAT)_자르기 (LEFT , RIGHT , SUBSTR), CASE_END 사용 , View / Index , commit / rollback  (0) 2023.04.04
인천 일보 아카데미 29일차 / 페이징(limit) / 게시판의 구성 / DB의 행동 구조  (0) 2023.04.03
인천 일보 아카데미 28일차 - table 구조 변경 alter / ERD보는법  (0) 2023.03.31
'나의 수업일지' 카테고리의 다른 글
  • 인천 일보 아카데미 32일차 -1- 선택자(selector) / 가상 선택자(hover) / hover 사용 - 감추고 보여주기
  • 인천 일보 아카데미 31일차 -2- 사용해보며 알아보기 (요소 - 블록,인라인/ link 사용 / font 변경 / 선택자(selector))
  • 인천 일보 아카데미 30일차 / 문자 합치기(CONCAT)_자르기 (LEFT , RIGHT , SUBSTR), CASE_END 사용 , View / Index , commit / rollback
  • 인천 일보 아카데미 29일차 / 페이징(limit) / 게시판의 구성 / DB의 행동 구조
GUPING
GUPING
안녕하세요 개발자를 꿈꾸는 GUPING 입니다
GUPING
개발자를 꿈꾸는 GUPING
GUPING
전체
오늘
어제
  • 분류 전체보기 (89)
    • 나의 수업일지 (88)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 로그인form
  • 로그인게시판
  • Paging
  • Ajax
  • 답변 채택
  • 삭제
  • 페이징Controller
  • 수정
  • 여러사진프리뷰
  • 로그인 경고문
  • 버튼2가지이벤트
  • 페이징
  • 버튼 이벤트 함수 변경
  • 개힘드렁
  • pagingAjax
  • 파일이름가져오기
  • 지식인
  • 업로드파일이름출력
  • 버튼 이벤트 변경
  • 틀만들기
  • naver
  • 클래스 이름 변경
  • 파일이름(다중)
  • PAGE
  • 검색
  • 검색결과페이징
  • 다중프리뷰
  • realative
  • 네이버
  • 파일 이름 가져오기

최근 댓글

최근 글

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

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.