본문 바로가기

기초/프론트엔드 종합반 HTML&CSS, JS, React23

1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트5 HTML 핵심 요소 정리 오늘의 날씨 중부 집중호우, 남부는 열대야 : 블록(상자) 요소. 특별한 의미가 없는 구분을 위한 요소. 레이아웃을 작업할때 사용 : 블록(상자) 요소. 제목을 의미하는 요소. h1 ~ h6까지 있음(숫자가 커질수록 글씨는 작아짐) : 블록(상자) 요소. 문장을 의미하는 요소. 문장 구분할때 사용 : 인라인(글자) 요소. 이미지를 삽입하는 요소. src(경로)와 alt(이름) 속성이 필수 속성임. 사과 딸기 복숭아 : 블록(상자) 요소. 순서가 필요없는 목록의 집합을 의미 : 블록(상자) 요소. 목록(list) 내 각 항목(item) 과 는 하나의 세트로 생각해야함 NABER Google : 인라인(글자) 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. href는.. 2022. 12. 29.
1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트4 화면에 이미지 출력하기 - 하나의 프로젝트로 관리할 때 프로젝트 가장 최상위 경로에 index.html파일이 존재해야지만 브라우저가 자동으로 찾아서 투영할 수 있음 img을 쓴채로 Tab을 누르면 자동으로 쓰여짐. src에 경로를 작성하고 alt에 대체 텍스트를 쓰면 됨 alt는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부름. 이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자로 이해하면 됨 상대 경로와 절대 경로 상대경로: 누구의 주변인지 기준에 따라 상대적으로 바뀜. (./)는 생략이 가능해서 (./)가 없어도 주변에서 찾음. (../)는 상위폴더에서 찾게 됨 절대경로: (/)가 의미하는 것은 최상.. 2022. 12. 27.
1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 Doctype(DTD) 브라우저가 기본적으로 프로젝트 단위로 화면이 출력될 때 index라는 이름을 가지고 있는 HTML파일을 우선적으로 찾아서 열게 됨. : 문서(페이지)의 HTML버전을 지정. DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도 현재 HTML5가 표준 우리가 브라우저로 접속하는 각 웹 페이지는 기본적으로 하나의 HTML 파일이 동작하는 것이기 때문에, HTML(특히 index.html)을 하나의 페이지로 이해할 수도 있음 → 2022. 12. 24.
1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 특수 문자 용어 ` : 백틱, 그레이브 # : 샵, 넘버, 우물 정 & : 엠퍼센트 = : 이퀄, 동등 ~ : 틸드, 물결표시 $ : 달러 * : 에스터리스크, 별표 " : 쿼테이션 마크, 큰 따음표 ' : 아포스트로피, 작은 따음표 % : 퍼센트 - : 하이픈, 대시, 마이너스 ! : 엑스클러메이션, 느낌표 @ : 앳, 골뱅이 ^ : 캐럿 _ : 언더스코어, 로대시, 밑줄 : : 콜론 ; : 세미콜론 , : 콤마, 쉼표 . : 피리어드, 닷, 점, 마침표 ? : 퀘스천, 물음표 / : 슬래시 | : 버티컬 바 \ : 백슬래시, 역 슬래시 : 앵글 브래킷, 꺽쇠괄호 () : 퍼렌서시스, 소괄호, 괄호 {} : 브레이스, 중괄호 [] : 브래킷, 대괄호 오픈소스 라이선스 오픈소스란 어떤 제품을 개발하는 과.. 2022. 12. 23.
1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 강의 개요 프론트엔드 개발: HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것. 사용자는 자신이 사용하는 컴퓨터를 가지고 있고 컴퓨터에는 웹페이지를 볼 수 있도록 여러 프로그램들을(크롬, 폭스, 엣지 등) 통해서 특정사이트에 접속하게 되고 접속한 사이트를 사용자가 보는 구조 프론트엔드는 사용자의 앞에 보이는 웹사이트 웹사이트를 프론트 엔드만으로는 만들 수 없기 때문에 실제로 보안을 요구하는 여러 데이터들이나 기타 비즈니스 로직(웹 사이트가 동작하는데 필요한, 핵심 처리를 수행하는 알고리즘 등) 등은 백엔드에서 개발이 됨 프론트 엔드를 개발하는 사람을 프론트 엔드 개발자, 백엔드를 개발하는 사람을 백엔드 개발자, GUI.. 2022. 12. 1.