본문 바로가기

전체 글

 (109)
HTML 기본 문법 <li>, <ul>, <ol> 태그 & 부모 자식 태그 태그 : 목차를 표현할 때 사용하는 태그 (list의 li) 태그 태그: li와 같은 항목들은 어디서부터 어디까지가 서로 연관된 항목인지를 경계를 짓기 위한(grouping 하기 위한) 부모 태그가 필요 -> li 태그는 반드시 부모 태그인 ul 태그를 갖고 있다 & ul 태그는 반드시 자식 태그인 li 태그를 갖고 있다. 이렇게 html 태그 중에는 부모 자식 관계가 고정되어 붙어다니는 태그 쌍이 있다. 태그 태그: 순서가 있는 목록을 나타내고 싶을 때 사용하는 태그 ol 태그를 사용하면 자동으로 숫자가 넘버링 - ol: Ordered List - ul: Unordered List
HTML 기본 문법 - 속성 & <img> 태그 HTML 속성 (HTML attribute) 속성(attribute)은 태그의 동작을 제어하기 위해 여는 태그 안에 사용 속성은 요소 유형의 기본 기능을 수정하거나, 아니면 스스로 기능하지 못하는 특정한 요소 유형에 기능을 제공한다. * HTML 문법에서 속성은 HTML 시작 태그에 추가 태그 웹페이지에 이미지를 추가하고 싶다면 태그를 이용하면 됨 태그 만으로는 원하는 이미지를 불러올 수 없기 때문에 src라는 속성을 이용하여 이미지를 불러올 수 있다. ex) 또는 width 속성을 이용하여 사진의 크기를 설정해줄 수도 있다. ex) ▼ 태그를 이용한 예시 코드
HTML 기본 문법 - 태그(TAG)란? <strong>, <u>, <h1>~<h6>, <br>, <p> TAG란? - 일반적인 의미에서의 태그: 식별, 구별 또는 인식을 위해 짧은 크기로 붙여 놓은 것 - 프로그래밍에서의 태그: 표현이나 어떤 기능의 수행을 지시하는 짧은 낱말과 같은 것 ex) hello world : hello world라는 글씨를 진하게 표시 열리는 태그 닫히는 태그 * 닫히는 태그에는 / 를 붙인다 글자를 진하게 표시하여 강조하는 태그 글씨에 밑줄을 그어 강조하는 태그 (underline의 앞글자 u를 땀) ~ ~ : 제목(heading)을 나타내는 태그 숫자가 올라갈수록 글씨가 작아짐 일반적인 텍스트보다 글씨가 두껍고 줄바꿈이 됨 줄바꿈 태그 HTML에서는 공백, 탭, 엔터를 아무리 많이 써도 하나의 공백으로만 표시되므로 br 태그를 사용해서 줄을 바꾸어주어야 함 다른 태그들은 열리..
List, Key를 이용해 출석부 출력하기 실습 [처음 만난 리액트 #29] 10강. Lists and Keys [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 1. VS Code로 create-react-app을 이용해 만든 프로젝트 열기 2. chapter_10이라는 이름의 폴더를 생성 3. 만든 폴더에 AttendanceBook.jsx라는 이름의 파일을 새로 만들고, 아래 코드처럼 AttendanceBook이라는 이름의 함수 컴포넌트를 만든다. AttendanceBook 컴포넌트는 students 배열로부터 학생 정보가 담긴 객체를 받아 학생들의 이름을 목록 형태로 출력하는 컴포넌트 배열을 렌더링하기 위해 map() 함..
Lists and Keys (리스트, 키) / 여러 개의 컴포넌트에 렌더링하기 [처음 만난 리액트 #28] 10강. Lists and Keys [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com List List: 목록 컴퓨터 프로그래밍에서는 같은 아이템을 순서대로 모아놓은 것이 리스트에 해당됩니다. 리스트를 위해 사용하는 자료구조가 Array(배열)입니다. Array : JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것 const numbers = [1, 2, 3, 4, 5]; ▲ JavaScript에서의 배열 리액트에서는 배열을 사용해서 리스트 형태로 element들을 렌더링할 수 있습니다. Key Key: 열쇠 열쇠의 특징? 열쇠는 모두 ..
조건부렌더링을 사용하여 로그인 여부를 나타내는 툴바 만들기 실습 [처음 만난 리액트 #27] 9강. Conditional Rendering [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 1. VS Code로 create-react-app을 이용해 만든 프로젝트 열기 2. chapter_09이라는 이름의 폴더를 생성 3. 만든 폴더에 Toolbar.jsx라는 이름의 파일을 새로 만들고, 아래 코드처럼 Toolbar이라는 이름의 함수 컴포넌트를 만든다. Toolbar 컴포넌트는 사용자의 로그인 여부를 나타내는 isLogedIn이라는 값을 props로 받아서 조건부 렌더링을 사용해 환영메세지를 표시하거나 감추고 로그인, 로그아웃 버튼을 보여주는..
Conditional Rendering의 정의, JavaScript의 Truthy와 Falsy, Element Variables의 개념, Inline Conditions [처음 만난 리액트 #26] 9강. Conditional Rendering [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com Conditional Rendering이란? - Condition은 영단어로 조건이라는 의미입니다. - Conditional Rendering은 조건에 따른 렌더링이라는 뜻 → 조건부 렌더링 : 어떠한 조건에 따라서 렌더링이 달라지는 것 * 여기서 조건이란? 프로그래밍에서 사용하는 조건문을 말합니다. 조건문의 결과는 true아니면 false가 나오는데, 이 결과에 따라서 렌더링이 달라지는 것을 조건부 렌더링이라고 합니다. ex) True이면 버튼을 보여주고..
개발자 학습 로드맵: 개발 분야, 공부법 [스파르타 코딩클럽 - 개발자 취업 준비의 모든 것 #2] ▼ 강의 수강 링크 개발자 취업 준비의 모든 것 | 스파르타코딩클럽 무료특강 비전공자인데, 개발자로 취업이나 이직을 고민하고 계시나요? 스파르타 CTO가 1시간 동안 가감없이 알려드립니다! spartacodingclub.kr 개발 분야 웹 개발자 프론트엔드 엔지니어 백엔드 엔지니어 풀스택 엔지니어 모바일 애플리케이션 개발자 게임 개발자 데이터 사이언티스트 AI 개발자 SI/SM 등의 전산시스템 개발자 데브옵스(DevOps) 엔지니어 보안 엔지니어 → 수요가 많고 비전공자들이 성공할만한 커리어를 쌓을 수 있는 분야는 웹 개발자 개발 트렌드를 보려면 대표 IT 기업의 채용 공고를 보면 됨 프론트엔드 vs 백엔드 vs 풀스택 - 프론트엔드: 이용자의 눈에 보이는 부분 프론트엔드 개발은 주로 웹 및 모바일 솔루..

티스토리툴바