몽키의 코딩작업실

value 속성사용자가 입력한 값을 저장하는 속성readonly 속성읽기 전용 입력 필드를 만들 수 있는 속성 (값은 볼 수 있지만 수정 불가)disabled 속성입력 필드를 비활성화하며, 수정과 폼 전송 시 값이 전송되지 않음maxlength 속성사용자가 입력할 수 있는 최대 글자 수를 제한하는 속성placeholder 속성입력 필드에 안내 텍스트를 제공하는 속성 (입력 시작 시 사라짐)required 속성필수 입력 필드를 설정하는 속성 (폼 제출 전 필수 입력을 요구)autocomplete="on" 속성브라우저가 자동으로 이전 입력 값을 제안하는 기능타입이 달라도 자동완성 데이터 공유name 속성 값이 같으면 자동완성 데이터가 공유됨 (타입에 관계없이)autofocus 속성페이지 로드 시 자동으로 해..

1폼 요소 (form)사용자의 데이터를 입력받는 HTML 요소2체크박스 입력 (type=“checkbox”)여러 개의 선택지를 동시에 선택3라디오 버튼 입력 (type=“radio”)한 그룹 내에서 하나의 선택지만 선택4색상 선택 (type=“color”)색상 팔레트에서 색을 선택5날짜 및 시간 입력날짜와 시간을 선택할 수 있는 입력5.1날짜 입력 (type=“date”)날짜를 선택할 수 있음5.2날짜와 시간 입력 (type=“datetime-local”)날짜와 시간을 함께 선택할 수 있음5.3월 선택 (type=“month”)연도와 월만 선택할 수 있음5.4주 선택 (type=“week”)해당 연도의 몇 번째 주 선택5.5시간 입력 (type=“time”)시간만 입력할 수 있음6숫자 입력 (type=“..

순서 없는 목록 (ul)• 순서가 중요하지 않은 항목들을 나열할 때 사용• 태그 안에 태그로 항목을 나열• 예시: 목록 순서가 중요하지 않은 경우 (예: 쇼핑 목록)순서 없는 목록 순서 없는 목록1 순서 없는 목록2 순서 없는 목록3 순서 있는 목록 (ol)• 항목에 순서가 중요한 경우 사용• 태그로 목록을 만들고, 항목은 태그로 표시• 예시: 준비물 목록, 작업 순서 등순서 있는 목록 순서 있는 목록1 순서 있는 목록2 순서 있는 목록3  설명 목록 (dl)• 특정 용어나 정의를 설명할 때 사용• 태그로 시작하고, 는 설명할 용어, 는 그 용어에 대한 설명을 작성• 예시: 용어집,..

1. 볼드체 태그 (b, strong) 단순히 텍스트를 굵게 표시하는 태그. 의미는 없고, 오직 스타일링만을 위한 태그텍스트를 강조하는 의미를 가진 태그. 시각적으로 볼드체처럼 보이지만, 중요한 내용을 강조할 때 사용검색 엔진이나 스크린 리더기에서는 이를 중요한 문장으로 인식하고, 시각적으로도 중요성을 강조시각장애인에게는 더 크게 읽어줌 2. 이탤릭체 태그 (i, em)단순히 이탤릭체(기울임꼴)를 적용하는 태그. 디자인적인 효과만 있고, 의미가 특별히 부여되지 않음강조된 이탤릭체. 텍스트를 강조하는 의미를 담고 있어. 시각적으로는 이탤릭체지만, 스크린 리더기나 검색 엔진에서는 강조된 텍스트로 해석되며 더 중요한 텍스트로 인식 3. 기타 텍스트 스타일 태그텍스트를 작게 표시형광펜으로 마킹한 것처럼, 중요한..

1. 인라인 스타일 (Inline Style)• HTML 태그 안에 style 속성을 사용해서 스타일을 지정하는 방법• 이 방식은 태그마다 직접 스타일을 적용하므로, 다른 부분에 영향을 주지 않고 해당 태그만 스타일을 수정가능 빨간색 글자입니다.   2. 익스터널 스타일 (External Style)• 외부 CSS 파일을 만들어서 링크하는 방법• 보통 여러 페이지에 동일한 스타일을 적용할 때 이 방법을 사용• HTML 파일과 CSS 파일을 분리하면, 코드 관리가 쉬워지고 유지보수도 간편 CSS 파일 (styles.css):p { color: red;}  3. 인터널 스타일 (Internal Style)• HTML 파일 내 태그 안에  어떤 방식이 좋을까?• 인라인 스타일은 짧은 HTML 문서에서 ..

글로벌 속성draggable = “true” : 요소를 마우스로 끌어서 이동할 수 있도록 설정함화면에서 직관적으로 어떤 요소가 움직이게끔 할 수 있음 파일을 휴지통으로 드래그 하여 삭제할때엑셀에서 컬럼의 위치를 변경할 때lang : 어떤 언어로 텍스트가 구성되어 있는지 검색엔진 등에 알려줌구글이나 네이버 같은 검색엔진에서 검색하고 분석하는 검색봇들이 우리가 만들고 있는 웹사이트를 분석하는데 이렇게 알려주면 좀 더 빠르고 정확하게 웹페이지를 분석할 수 있음.lang = “en” : 해당 HTML 페이지의 주 언어가 영어임을 표시lang = “ko” : 해당 HTML 페이지의 주 언어가 한국어임을 표시활용검색엔진(구글, 네이버 등)이 웹사이트를 분석할 때, 지정된 언어 정보를 바탕으로 페이지를 빠르고 정확하..

HTML 구조와 기본 설정 - HTML5 문서를 선언함  - 다른 나라의 언어를 사용하게 되면 글자가 깨지는 현상이 나타날 수 있는데, 이를 사용하면 모든 국가의 언어를 지원하여 깨지는 현상을 방지할 수 있음   텍스트 관련 태그 ~ - 제목 태그 라고 하며 숫자가 커질수록 크기가 작아짐.- 보통 머리말에 많이 사용함. 머리말1 머리말2 머리말3 머리말4 머리말5 머리말6 - 문단을 나타내고 일반 텍스트를 작성할 때 사용함. 첫번째 문단 입니다. 두번째 문단 입니다. 세번째 문단 입니다.링크 태그 - 화면 이동(링크) 태그- 특정 웹사이트로 이동하기 위해서 || 같은 화면안에서 메뉴를 이동하기 위해서 사용  속성 - href: 이동할 URL이나 페..

공부비율 : HTML 20%  CSS 20%  JS 60%  -> JS를 중점적으로 공부하기 TypeScript ❌(Js 쓰다가 불편한 점을 보완한 언어인데 지금 배우지 않기)HTML, CSS 태그와 기능 달달 암기❌ ➡️ 배운걸 바탕으로 작은 프로젝트 만들어보기 (ex. 달력, 계산기, 퀴즈풀기, todoList)   Js 더 배워야함 1. ES6 문법 익숙해지기2. async , await에 익숙해지기(어려울꺼임. 언젠간 해야하는과정임)3. map, reduce, filter 익숙해지기 이때도 TypeScript ❌  Framework || Library 배우기 React.js 배우기 (Svelt.js는 호기심 생기면 하기, 살짝 주저) Next.js ❌상태관리 배우기 ❌ (Redux vs Mobx ..