함수 React는 DOM요소를 컴포넌트라는 단위로 쪼개어 프로그래밍 가능하다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있으며 최근에는 함수형 컴포넌트를 사용하는 추세이다. -범위 Local variables : 함수 안에 선언된 지역 변수는 function scope를 가짐. Outer variables: 함수 안에서는 함수 밖에 선언된 변수에 접근 가능 // var func = function (a, b){ // return a + b // } var func = (a,b) => a + b //Arrow function console.log(func(1, 2)) // 3 var func = (a, b, ...c) => { let sum = a + b for(let i of c) { sum +..
JavaScript 기초 자바스크립트 - 웹 브라우저를 프로그래밍적으로 제어하기 위해 사용되는 언어 - 웹 페이지를 동적으로 동작(or interaction) 시키기 위해 사용하는 언어 자바스크립트는 자바와 관련 없음! 자바스크립트 구성요소 -ECMAScript •자바스크립트의 기본 문법, 데이터 타입, 제어문, 반목문, 함수, 기본 라이브러리와 같은 프로그래밍적 요소 •node js를 이용한 서버 개발의 기본 지식 -DOM(Document Object Model) •HTML, XML과 같은 구조화된 문서의 프로그래밍 interface •웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들이 objects 로 구성 -BOM(Browser Object Model) ..
이전 글에서는 container에 적용하는 속성들에 대해 알아봤다. 2023.04.03 - [수업] - 웹프로그래밍 - 4-2 Flexbox란? 웹프로그래밍 - 4-2 Flexbox란? 3/23 수업 container에 적용하는 속성들 display: flex; - 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다. - item을 inline으로 만듦. - height은 container의 높이만큼. display: inline codingtoday.tistory.com 아이템에 적용하는 속성들 1. flex-basis - flex 아이템의 기본 크기 설정 - flex-direction이 row일 때는 너비, column일 때는 높이 - auto: 해당 아이템의 width값..
3/23 수업 container에 적용하는 속성들 display: flex; - 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다. - item을 inline으로 만듦. - height은 container의 높이만큼. display: inline-flex; - container를 inline으로 만듦. 더보기 inline-flex를 사용하지 않고 이전 페이지의 레이아웃을 구현하는 방법? 새로운 div를 만들어서 두 div를 감싼다. css에 display: flex를 추가한다. (felx-wrap : 줄 넘김.) flex-direction : 배치 방향 설정 - row, row-reverse, column, column-reverse flex-wrap: 줄넘김 처리 설정 -..
3/21 수업 시멘틱 태그(Semantic Elements) - 가독성을 높이기 위해 사용하는 메타 정보 -검색 엔진이 중요도를 판단하는 근거 태그 설명 내용을 정의 페이지 콘텐츠를 제외한 콘텐츠를 정의 링크, 광고, 사이드바 표시 등 문서 또는 섹션의 바닥글을 지정한다. 주로 저작권, 연락처 정보 등 내용이 삽입되며 , , 등 다른 레이아웃 사용가능. 문서나 섹션의 머릿글을 지정 문서의 주요 내용을 지정 네비게이션 링크를 정의 , 와 함께 문서의 구역을 정의 안에 을 넣을 수도 있고, 을 이용해 내용을 넣는다. div와 nav는 동일하다.
가상클래스와 가상 요소 가상(pseudo): html 문서에 코드로 명시되어 있지 않지만, 사용자 동작에 반응하는 가상 클래스 표기 설명 :link 방문하지 않은 링크에 스타일 적용 :visited 방문한 링크에 스타일 적용 :hover 웹 요소에 마우스 커버를 올려놓을 때의 스타일 적용 :active 웹 요소를 활성화했을 때의 스타일 적용 :focus 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 UI 요소 상태에 따른 가상 클래스 표기 설명 :enabled, :disabled 요소를 사용할 수 있을 때와 없을 때의 스타일 지정 :checked 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정 구조 가상 클래스 1. :nth-child(n) : 앞에서부터 n번째 자식 요소에 스타일을 ..
다양한 선택자 1. 연결 선택자 1) 연결 선택자 - 요소 간의 관계성을 이용해 특정 요소를 선택 - 특정 요소의 아래에 있는 요소를 선택하는 방법 2) 하위 선택자: 특정 요소 아래에 있는 모든 요소(후손) -> 가장 많이 사용 더보기 - 부모 요소에 포함된 모든 하위 요소에 스타일 적용 - 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용(후손) - 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 씀. ex) section p { color: blue; } 3) 자식 선택자: 자식 요소에 스타일을 적용하는 선택자 더보기 두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분 ex) section > p { color:blue;} 4) 인접 형제 선택자:..
CSS(Cascading Style Sheets) : 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다. 1. 스타일과 스타일 시트 style: 꾸미기 + 요소 배치 style sheet: html에 적용할 스타일들을 일괄적으로 정의한 것 스타일 형식 p { text-align: center; } p : 선택자(스타일 규칙이 적용될 대상) text-align: 스타일 속성 center : 속성 값 (속성/속성 값 쌍이 여러 개일 경우, 세미콜론(;)으로 구분) [ 스타일 지정 방법 ] 화면1을 만드는 3가지 방법이 존재한다. - 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것 html 코드 내부 스타일 시트 1번 2번 3번 ..
