CSS _기초 : CSS란? CSS란? - CSS는 웹 페이지를 꾸며주는 역할을 합니다. CSS로 할 수 있는 것은? 1). 웹 페이지에서 보이는 것을 꾸며줄 수 있음 → 글꼴, 색상, 정렬, 각 요소의 배치 방법 등등 2). 웹의 크기에 따라 화면을 자동으로 바꿔줄 수 있음 → 반응형 웹디자인도 스타일의 역할 😀 CSS를 넣으면 브라우저가 어떻게 바뀌는지 볼까요?😀 [ 스타일이 비활성화된 사이트의 모습 ] [ CSS 적용된 화면 모습 ]

HTML 테이블(Table) 표의 구조 지정해주기 → , , 태그 사용 HTML , , - 표만들었을 때, 테이블에 제목, 본문, 요약의 구조를 지정할 때 사용합니다. - Q : 왜 사용해야할까요? ㄴ 1. 표의 구조를 지정하면 시각장애인분들도 화면 낭독기를 통해 표를 쉽게 이해할 수 있기 때문입니다. ㄴ 2. 표의 영역을 지정해주면 나중에 CSS로 각각 다른 스타일을 줄 수 있습니다. ㄴ 3. 자바스크립트를 활용해 제목은 고정하고 스크롤하는 동작도 구현할 수 있습니다. [ 태그의 뜻 ] : 제목 : 본문 : 요약 ↓↓↓✅그림으로 쉽게 영역을 이해해보세요↓↓↓ 😍 이제 위의 표를 실제로 만들어볼까요?😍 [ 표의 구조 기본 형태 ] 표 제목 제목 제목 내용 내용 내용 내용 [ 실행시 화면 ] ㄴ "색깔이 ..

JavaScript _문법+ (자바스크립트 맛보기) JavaScript - 문법 - 자바스크립트는 로 클로징태그로 닫아줍니다. 즉, 자바스크립트는 사이에 작성되어야한다. - 작성하는 위치는 다음글에서 알려드릴께요! [ JavaScript - 선언문 ] [ JavaScript - 맛보기 ] ㄴ 객체이름("property") → 'Property' 는 속성 이란 뜻으로, JS에서는 객체 내부의 속성을 의미합니다. (↓↓↓alert( )에 대해서는 나중에 자세히 배울테니, "오늘은 아! 자바스크립트에서 alert()는 경고창을 띄우는구나!" 정도만 보시면 됩니다.🤩↓↓↓) [ JavasScript ] [ 실행시 화면 ]

HTML 테이블(Table) 제목 만들기 - HTML - 표만들었을 때, 테이블에 제목이나 짧은 설명을 붙일 때 사용! - ~ 이렇게 클로징 태그를 작성해야합니다. - 아무런 CSS효과를 넣지 않으면 표 가운데 정렬로 위치합니다. - ~ 안에 작성한 내용은 기본적으로 표 위에 위치하지만, 위치를 바꿀 수 있습니다. → (※ CSS의 caption-side로 위치를 정할 수 있습니다.) [ caption 기본 형태 ] 테이블 제목 넣기 표의 제목 위치 제목 제목 내용 내용 [ 실행시 화면 ] ㄴ "색깔이 안들어가 있어서 테이블의 형태가 구분이 잘 안가시죠?" 아래에 css 요소를 잠깐 넣어 테이블 구분만 해볼께요~😀 (↓↓↓css는 나중에 배울테니 지금은 테이블의 영역만 확인하기!🤩↓↓↓) [ table에..

JavaScript _기초 : 자바스크립트란? JavaScript란? - HTML은 웹의 내용을 작성하고, CSS는 웹 페이지를 꾸며주는 역할을 한다면 자바스크립트로는 웹의 요소를 바꾸거나 움직이게 만들어줍니다. - 자바스크립트의 기본 타입(data type)은 객체(object)입니다. ㄴ ※객체란? 이름과 값으로 구성된 프로퍼티(속성)의 정렬되지 않는 집합입니다! JavaScript로 할 수 있는 것은? 1). 웹 페이지의 동작을 구현할 수 있음 → 클릭시 변화하는 기능을 구현할 수 있음 → HTML의 내용, 속성, 스타일등을 변경할 수 있음 → CSS를 변경할 수 있음 2). 애플리케이션을 만들 수 있음 (하지만, 모바일 플랫폼으로 실행시 코드 변환이 필요하다는 어려움이 있음) 3). 다양한 라이브..

HTML 테이블(Table) 만들기 - HTML → 테이블태그를 사용해 표 만들기 - ~ ~ ~ ~ 이렇게 클로징 태그를 작성해야합니다. - 태그가 tr, th, td를 감싸고 있는 형태입니다. - : 표의 행을 만드는 태그입니다. - : 표에서 제목을 만드는 태그 → ※ 태그는 테이블(표)의 첫번 째 행에서 사용되며 각 열의 제목을 만드는데 사용합니다. - : 표의 열을 만드는 태그 [ table 기본 형태 ] 열의 제목1 열의 제목2 열의 제목3 2번째행의 1번째열 2번째행의 2번째열 2번째행의 3번째열 3번째행의 1번째열 3번째행의 2번째열 3번째행의 3번째열 [ 실행시 화면 ] ㄴ "색깔이 안들어가 있어서 테이블의 형태가 구분이 잘 안가시죠?" 아래에 css 요소를 잠깐 넣어 테이블 구분만 해볼께..

(VS Code)HTML 준비과정 - 02. 파일 저장하기 & 폴더 구성방법_비주얼 스튜디오 코드(Visual Studio Code) HTML 준비과정 - 02. 파일 저장하기 + 폴더 만들기 Tip! Visual Studio Code 단축키도 같이 알려드릴께요! [ STEP1. 비주얼스튜디오코드에서 html 파일을 새로 만드는 방법 ] ✔️ 1. 첫 화면에서 New File을 눌러 만들기 → 단축키 : Ctrl + N ✔️ 2. 저장하고 싶은 폴더에 html 문서 만들기 🔸순서 > 1) html 문서를 저장할 폴더를 만들기 → 2) Open Folder를 클릭해 폴더를 열기 → 3) 폴더 선택 → 4) VS Code왼쪽에서 저장하려는 파일 위치에서 옆에 첫 번째 아이콘을 눌러서 파일을 만들어주세요! →..

(VS Code)HTML 준비과정 - 01. 작성 프로그램 준비_비주얼 스튜디오 코드(Visual Studio Code) HTML 하기 전 준비과정 - 01. 작성 프로그램 준비 Visual Studio Code - 마이크로소프트에서 오픈소스로 개발하고 있는 소스코드 에디터로 무료로 사용할 수 있습니다. - 다양한 확장을 지원하고 있으며 Extentions 안에서 바로 검색하고 설치할 수 있습니다. ㄴ 쉽게 설명해 핸드폰에서 어플을 설치하는 것 같은 느낌입니다. (↓ 아래에서 설치하면 좋은 Extentions을 소개해드릴께요💜) - 확장을 통해 100개 이상의 언어를 지원하고 있으며, 마이크로 소프트에서 공식적으로 파이썬 Python, C/C++, C#, 도커 Docker, 고 Go, 파워 셸 Power..

HTML - 다중 입력창 (폼 form 양식) HTML → 박스 형태의 입력창 만들기 - ~으로 클로징 태그를 작성해야합니다. - 사용자가 여러 줄의 데이터를 입력할 수 있는 창을 만드는 것입니다. - rows 속성과 cols 속성을 이용하여 크기를 설정해 작성 영역을 만들수 있습니다. [ textarea 기본 형태 ] ↓ 태그는 전체 선택 항목들을 감싸고 태그는 각 항목을 감싸는 형태입니다. 에서 자주 쓰는 속성 → autofocus, cols, row, required, placeholder autofocus : 자동으로 텍스트를 입력할 영역을 알려주는 속성 cols : 입력할 수 있는 글자수를 의미 (= 입력창의 너비를 결정) → 코드예시) cols="숫자" ← 이 숫자는 작성가능한 숫자를 말한다...

HTML 태그 - 선택박스 (폼 form 양식) HTML → 선택박스 - ~으로 클로징 태그를 작성해야합니다. - 는 선택 옵션 태그로 ~태그 요소를 1개 이상 가지고 있어야합니다. - 전체 항목 안에서 선택된~은 서버로 전송이됩니다. [ select 태그의 기본 형태 ] ↓ 태그는 전체 선택 항목들을 감싸고 태그는 각 항목을 감싸는 형태입니다. 옵션 내용 에서 자주 쓰는 속성 → selected selected : 옵션들 중에서 미리 선택되어지는 옵션을 지정하는 속성으로 selected를 쓴 의 순서와 상관없이 가장 먼저 표시가 됩니다. [ 실전예시 ] 이메일 : @ 직접 입력 naver.com gmail.com nate.com hanmail.com [ 실행시 화면 ]

핸드폰에서 쓰는 이모지 emoji 를 컴퓨터에서도 쓰고 싶다면? ↓ 아래의 사이트에서 ✂️ Copy and 📋 Paste Emoji 제가 자주 들어가는 사이트 2개를 소개해드릴께요! [ 첫 번째 사이트 ] "아래 링크를 누르시면 페이지가 이렇게 되어있어요!" https://emojipedia.org/ 📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍 emojipedia.org [ 두 번째 사이트 ] "아래 링크를 누르시면 페이지가 이렇게 되어있어요! " https://getemoji.com/ 😋 Get Emoji — All Emojis to ✂️ Copy and 📋 Paste 👌 ✂️ Copy and 📋 Paste Emoji 👍 No apps required Emojis a..

HTML 태그 - 폼 양식 HTML 태그 - button 요소는 사용자가 누를 수 있는 버튼입니다. ↓ 버튼 태그의 기본 형태 ~ button에서 자주 쓰는 속성 → type, name, autofocus, onclick type : 입력 태그의 유형을 결정하는 속성 name : 서버로 전달되는 이름을 작성 (※사용자가 임의 지정합니다.) autofocus : 웹 페이지가 로드(load)될 때, 포커스가 되는 속성 onclick : 버튼이 클릭되었을 때 발생되는 이벤트의 속성 [예제] onclick [실행화면] [ 버튼 태그에 자주 사용하는 속성들 ] type의 속성값 → button, submit, reset button : 클릭할 수 있는 버튼 타입. submit : 데이터를 제출, 전송한다는 버튼 ..