요소에는 블록요소와 인라인요소라고 하는 개념이 존재한다. 블록요소 블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소도 일부 포함 할 수 있다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있다. 그리고 블록 요소 다음에는 줄바꿈이 이루어진다. 1. 줄 바꿈이 일어남. 2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음. 3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음. (단, 예외도 존재함) 종류 address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figca..

비정렬 목록 태그 : 요소는 정렬되지 않은 목록(unordered list ) 즉, 순서가 중요하지 않은 목록을 나타낼 때 사용한다. 요소 안에 들어갈 항목의 순서를 바꿨을 때 그 목록의 의미도 바뀌게 된다면 이 아닌 태그를 사용하는 것이 바람직하다. 과 의 직계 자식 요소로는 오직! 요소만 올 수 있다. 요소는 밑에서 보다 자세히 다루겠지만, 목록 안의 항목으로, 과 요소는 최소 하나 이상의 요소를 자식으로 가져야 한다. 목록의 항목 태그 : 요소는 목록 안의 아이템(항목)(list item)을 나타낸다. 따라서 반드시 목록을 나타내는 혹은 요소 안에 항목으로서 요소가 위치해야 하는 것이다. 아니 다 알겠는데, 순서가 중요하다는 게 무슨말인데? 라고 하는 사람들을 한번에 이해시켜줄 좋은 예를 가져왔다...

Semantic Elements? 시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다. 비의미적 요소 의 예 : 및 - 내용에 대해 아무 것도 알려주지 않는다. 의미론적 요소 의 예 : , 및 - 내용을 명확하게 정의한다. Semantic Elements in HTML 많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 와 같은 HTML 코드가 포함되어 있습니다. HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 시맨틱 요소가 있습니다. 1. 기계와 사람의 일치 Semantic 하게 마크업을 한다는 것은 적절한 의미의 태그들을 사용하여 문서를 정보 구조에 맞게 마크업한다는 것이다. 좋은 정보구조는 해당 문서를 사람과 기계가 동일하게 이해하도록 도와준다. 사람..

로그인페이지 구현 중 필요했던 특수문자 입력방지 기능 Input 태그란? Form 태그 안에서 추가되는 입력 요소들 중 가장 중요한 태그. 사용자로부터 정보를 받아들이는 용도로 사용되는데 Input 태그의 type이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용한다. 버튼태그 위에는 버튼태그로 만든 버튼이고 아래는 인풋태그로 만든 버튼이다. ( 처음알았어..ㅠㅠ) 속성으로는 type / value / name 을 썼는데, type : 입력태그 유형 value : 입력태그 초기값 ( 사용자가 변경가능 ) name : 서버로 전달되는 이름 ( 서버로 전달되기때문에 협업시 프론트와 백과 소통 후 이름을 정한다) type 속성값 내용 샘플 text 텍스트를 입력하는 창을 생성합니다. password 비..

2022.12.26 - [React 공부] - React 입문 - Component React 입문 - Component 컴포넌트의 기본 구조 // import React from 'react'; function App() { // return ( /* */ ); } // export default App; component는 레고 블럭같은 존재! 컨포넌트를 외부에서 가져올때는 import(컴포넌트 맨 위 코드)를 해줘 olive-jam.tistory.com 이전 포스팅에 컴포넌트에 대해 다뤘는데, 이번에는 리액트 코딩을 해보려고한다. 리액트를 처음 접하는거라 간단하게 버튼만들기 도전 ▶️ 리액트 기본 코딩 import React from 'react'; function App() { // return ..

태그는 꼭 닫아주어야한다. 하나의 Element만 반환할 수 있다. ( 마지막에 태그에 담아주면 된다.) return ( 안녕하세요! 리액트 반입니다 :) ); 위 코드를 실행하면 엘리먼트가 2개라서 에러가 난다. return ( 안녕하세요! 리액트 반입니다 :) ); 이렇게 return안에 맨 앞에 맨 뒤에 태그를 넣어주면 하나로 인식되서 정상 작동 된다! JSX안에서 자바스크립트를 사용하려면 중괄호를 사용해야한다. { } 삼항연산자를 사용할때도 중괄호를 사용해서 하면 된다. class를 사용하지 않고 className을 사용한다. Html태그에 style을 직접 사용할 수 없다. btn // 기존 html에서 사용하던 방식 btn // JSX에서 사용할 수 있는 방식 const styles = { c..