본문 바로가기

전체 글83

(기초) HTML 이란? (구성과 특성) HTML : HyperText Markup Language 개발자가 사용자(유저)에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어 놓은 문서이다. 사용자 (유저) 브라우저 ( 크럼, 웨일, 등등) ㅡ 구성 ( tag ,컨텐츠, 주석 등 ) DOCTYPE html> tag를 열고 닫아서 컨텐츠를 입력 ㅡ 특성 tag들은 계층적으로 이루어져 있다! ( 부모 > 자식 관계 등) 부모태그 닫기 전에 자식태그를 작성해야함. ㅡ비주얼코드 에서 HTML 선언하기 DOCTYPE html> Document 2023. 12. 13.
[IT] 프론트엔드 개발자와 백엔드 개발자 차이 1. 프론트엔드(Frontend)가 뭐예요? 2. 프론트엔드 개발자는 백엔드 개발자랑 뭐가 달라요? 3. 프론트엔드 개발자가 되려면 어떻게 공부해야 해요? 프론트엔드(Frontend)가 뭐예요? 프론트엔드는 화면과 관련이 깊은 단어예요. 사용자(User)가 직접 보고 있는 화면과 상호작용하는 일이거든요. 지금 보고 있는 홈페이지나 링크를 클릭하는 것도 모두 프론트엔드 개발에 포함돼요. 쉽게 말해서 웹페이지를 설계하는 기술이라고 생각하면 좋아요. 보통 프론트엔드 관련 코드는 사용자와 바로 접촉하는 경우가 많아요. 그렇다고 사이트를 디자인하는 일이라고 생각하면 안 돼요! UIUX 디자이너가 사용자에게 좋은 경험을 제공하는 디자인을 가져오면, 프론트엔드 개발자가 디자인을 활용해서 실제 웹 페이지를 구현하는 거.. 2023. 12. 13.
(입문) 비주얼 스튜디오(Visual Studio) 기본 확장자( 확장팩 ) 설치 먼저, 왼쪽아이콘의 가장 밑단 블럭아이콘 클릭해서 검색후 [확장] 설치하기. 기본 확장자에는 아래의 4가지가 있다. 1. Live Server : 실시간으로 실행시켜주는 확장팩 2. CSS Peek : CSS코드를 보다 간편하게 보여줌. 3. Prettier : 자동 줄맞춤 (Beautify 가 삭제되서 대체 사용함) 4. Material Theme : 속성마다 색상이 다름. 구별하기 쉬움. >> 아주 다양한 확장팩들이 있다. 사용해 보다가 확장팩 추가하는 재미도 있음 [ 비주얼코드 단축키 ] 단축키 명령어 tab으로 생성함 p.title 클래스생성 p#heading 아이디생성 p*5 p태그 5개 생성 등등 2023. 12. 13.
응용) CSS (반응형 웹 만들기, 가변성, 단위em,rem,vw,vh) - 반응형 웹이란 : 유저의 웹 브라우저 사이즈에 따라 크기가 유동적으로 맞춰지는 것. - 키포인트 : 가변성 !! 단위 ( px, em, rem, vw, vh , % ) 에 대해 알아보자. - 단위 px : 절대 길이 단위 (가변성x) >>단순히 부모 크기 기준으로 결정. (가변성o) 패딩,마진 값에 em,rem적으면 본인 글꼴크기 기준으로 설정됨. em : 부모 요소의 글꼴 크기 rem : 루트 요소의 글꼴 크기 >>가변단위 : 뷰포트(기준의 100분의 1 크기) 기준으로 크기를 결정. (가변성o) . 유저가 보는 브라우저 기준 vw : 브라우저 가로 기준 vh : 브라우저 세로 기준 vmin : 너비를 기준으로 함. 너비가 높이보다 더 좁아지면 높이 기준으로 함. vmax : 너비와 높이 중에 더 .. 2023. 11. 27.

티스토리툴바