본문 바로가기

HTML CSS JS21

자바스크립트 입출력, 변수 (JavaScript input, output, variable) 자바스크립트 입출력, 변수 (JavaScript input, output, variable) script 태그 안에 작성 스크립트 문법은 body 태그 가장 하단 (추천) html태그들 보다는 밑에 두기 F12 개발자 도구 → console탭 1. 출력문 콘솔창에 출력 : console.log() 에러창에 출력 : console.error() 팝업창에 출력 : alert() console.log('콘솔창에 출력하기') console.error('에러 확인하기') alert('팝업창을 통해 출력하기') 2. 입력문 confirm : 확인 질문 (확인, 취소) → 리턴 타입 boolean prompt : 입력 확인 → 리턴 타입 String var dinner2 = prompt('어떤 메뉴 드셨나요?') c.. 2023. 1. 11.
CSS 선언 방식 CSS 선언 방식 인라인 방식 요소 내에 직접적으로 스타일 작성 우선 순위 높음, 긴급 시 사용 외부 방식 head태그 안에 link태그 이용 rel : 관계 설정, href : 연결할 파일 위치 내부 방식 html내 head태그 안 style태그를 만들어 작성 import 방식 잘 사용하지 않음 ※ !important 모든 방식을 무시하고 적용 ▶ 연습 오늘은 즐거운? 월요일 오늘 점심 뭐드시나요? /* 외부 css */ h2{ color: blue; } 2023. 1. 10.
CSS Position CSS Position Position : 위치를 배치하는 속성 ※ Tip : 위치 기준점을 모르겠으면 0,0 으로 이동해서 확인 속성 위치 속성 기준 static 기본값, 위치 속성 비활성화 relative 위치 속성 활성화 원래 있던 위치 absolute 위치 속성 활성화 postion이 static이 아닌 부모 부모가 없거나, 부모가 전부 static일 경우 body태그를 기준 fixed 위치 속성 활성화 부모 무시, 스크롤 무시 ▶ 연습 static 속성, relative 속성 비교 body태그 안 parents 태그 안 static relative ▶ 연습 static 속성, relative 속성, absolute 속성 비교 body태그 안 parents 태그 안 static relative a.. 2023. 1. 10.
CSS Flex CSS Flex 1. Flex 레이아웃 배치 전용 기능 내가 움직이고 싶은, 배치하고 싶은 요소 : Item Item의 부모 요소 : Container ※ 한 가지 요소는 Item이자 Container일 수 있다. 2. Container 속성 flex 설정 display: flex; flex-direction 배치 방향 설정 flex-direction: row; (기본값) 메인축 : 가로, 서브축 : 세로(수직) flex-direction: column; 메인축 : 세로, 서브축 : 가로(수평) justify-content 메인축 정렬 justify-content: center; align-items 서브축 정렬 align-items: center; flex-wrap 줄넘김 처리 flex-wrap: wr.. 2023. 1. 9.
CSS margin, padding, box-sizing, border CSS margin, padding, box-sizing, border 1. margin 테두리를 기준으로 바깥여백 지정 기본적으로 body 태그에는 8px 마진이 존재 마진에는 중첩 현상이 일어남 (같은 영역에 마진이 적용되면, 그 중 큰 마진으로 적용될 뿐 누적되지는 않음) margin : 10px; 모든 방향에 적용 margin : 10px 10px; top,bottom / right,left 적용 margin : 10px 10px 10px; top / right,left / bottom 적용 margin : 10px 10px 10px 10px; top / right / left / bottom 적용 margin : auto; 웹페이지 가운데 위치 margin-top 위쪽 바깥 여백 margin-r.. 2023. 1. 8.
CSS display CSS display 1. display : block 무조건 가로로 한 줄의 영역을 차지하는 속성 width, height 값 설정이 가능 기본값 block : div, p, ... 2. display : inline 내가 담은 컨텐츠까지만 크기로 삼는 속성 width, height 값 설정이 불가능 기본값 inline : span, a, ... 3. display : none 화면에 보이지 않게 지정 반응 선택자 hover와 조합 가능 ▶ 연습 p태그 p태그 p태그 span태그 span태그 span태그 HTML 삽입 미리보기할 수 없는 소스 2023. 1. 8.
CSS 선택자 CSS 선택자 1. 선택자 선택자 기호 가중치 전체 선택자 * 0 태그 선택자 태그이름 1 클래스 선택자 .클래스이름 10 아이디 선택자 #아이디이름 100 계층 선택자 기호 자손 선택자 기준 선택 자식 선택자 기준>선택 후행 선택자 기준~선택 근접 후행 선택자 기준+선택 ① 전체 선택자 (*) : 모든 요소를 선택 ② 태그 선택자 (태그이름) ③ 클래스 선택자 (.클래스이름) : 중복 가능, 재사용성이 뛰어남 ④ 아이디 선택자 (#아이디이름) : 중복 불가능, 한 문서당 그 아이디는 1번만 사용 가능 (로고, 검색창, 상단메뉴바 등 고유 디자인에 사용) ※ 한 문서에서 1번 이상 사용할 경우 자체에서는 오류가 없으나 웹 표준 테스트에서 오류 발생 CSS 웹페이지를 꾸며주는 스타일 시트 언어 CSS구조 .. 2023. 1. 5.
CSS 기본, 폰트(font) CSS 기본, 폰트(font) CSS (Cascading Style Sheets) 1. CSS가 필요한 이유 HTML의 정보표현 기능과 CSS의 디자인을 분리함으로써 유지보수의 편의성과 재사용성이 높아진다. 2. 스타일 (style) head 태그 안에 작성 (다른 언어이기 때문에 style이라는 태그 내에만 작성) 3. 디자인 무엇을? → 선택자 어떻게? → 선언 선택자{ 속성 : 값; } 4. 폰트(font) ① font-family : 글꼴의 집합, 최대한 비슷한 폰트를 사용할 것 ② font-size : defalut 값 16px, em(부모의 크기를 기준으로 상대 배수 단위), rem(문서 폰트 크기에 따른 상대 배수 단위) ③ font-weight : bold (700), 100~900까지 사.. 2023. 1. 5.
HTML 폼 태그 (form tag) 폼 태그 (form tag) 웹페이지에서 입력 폼을 만들 때 사용하는 태그 사용자에게 정보를 받아주는 태그 ① 필수 속성 : method(전달 방식), action(전달 위치) ② input 태그 : 사용자가 입력할 수 있는 공간 input 태그 속성 type 입력하는 값의 종류 name 입력한 값을 구분하기 위해 이름 지정 placeholder 미리보기 텍스트 value 기본 값 설정 readonly 읽기 전용 지정 maxlength 글자 수 제한 지정 autofocus 자동 커서 설정 ID PW 강의실 HTML 삽입 미리보기할 수 없는 소스 ③ input 태그 type 속성 input 태그 type 속성 text 문자 입력 password 암호화 checkbox 중복 선택 가능(name, value .. 2023. 1. 5.

티스토리툴바