에러 탈출 일지

1. 내부 자바스크립트 작성 방법 (1) body 영역 안에서 자바스크립트 작성 - 장점: 필요한 내용을 바로 적용하여 결과를 파악할 수 있음 - 단점: 관리가 어려움 (2) head 영역 안에 자바스크립트 작성 - 전체 html 문서에 자바스크립트를 적용하고자 하는 경우 호출하기 2. 외부 자바스크립트 작성 방법 - 장점: html문서 간결, 자바스크립트 파일의 관리 용이 - 단점: 코드를 바로 확인하기 불편 자바스크립트 외부 파일 만드는 법 → 파일명.js 자바스크립트 파일 let t1 = "벌써 9월도 중반" let t2 = "공부 열심히 !!!" function welcome2(){ document.write(t1+" "); document.write(t2); } welcome2(); 호출하기

요안도라 객실 방 이름 대상 크기 가격 유채방 여성 도미토리 4인실 1인 20,000원 동백방 동성 도미토리 가족 1팀 천혜향방 - 2인실 바깥채 전체를 렌트합니다.

1. visibility: visivle; → 보임, 영역o (기본값) visibility: hidden; → 보이지x, 영역o 2. opacity: 1; → 보임, 영역o (기본값) opacity: 0; → 보이지 x, 영역o 3. display: block; → 보임, 영역o display: none; → 보이지x, 영역 사라짐 # opacity 속성: 요소의 투명도를 지정 - 투명도: 0(투명) ~ 1(불투명,기본값) - 배경뿐만아니라 글자도 함께 투명해짐 # overflow 속성: 문단에서 영역을 벗어나는 텍스트를 나타내는 속성 - overflow: visible; 넘치는 텍스트를 그대로 보여줌 - overflow: hidden; 넘치는 텍스트 숨김 - overf..

1. linear-gradient() - 수평, 수직 방향으로 그라데이션 효과를 주는 함수 - background 속성에서 함수로 사용 - 방향: to bottom(기본값), to top, to right, to left - 방향: 각도, 0deg ~ 360deg, 0deg(top)을 기준으로 시계방향으로 회전 2. radial-gradient(): 원점에서 동심원을 그리며 방사하는 모양의 그라데이션을 생성하는 함수 - 박스의 모양을 기준으로 퍼져나가는 그라데이션 - circle: 정원을 기준으로 퍼져나가는 그라데이션 - farthest-corner 그라데이션의 가장자리가 그라데이션의 중심에서 가장 먼 코너에 닿도록 표현 - arthest-side 그라데이션의 가장자리가 그라데이션의 중..

1. font-family 텍스트의 글꼴을 지정 2. font-size 텍스트의 크기를 지정. pt, px, em, rem - em: 현재 크기가 기준 - rem: 루트 크기(16px)가 기준 3. font-weight 텍스트의 굵기 지정 - 100~900 사이의 백단의 값 - 100~300: 가늘게, 400~500: 보통, 600~900:굵게 - lighter(가늘게,100), nomal(보통,기본값,400), bold(굵게,700), bolder(더 굵게,900) 4. font-style: italic; 기울림꼴 5. font-cariant: small-caps; 소문자를 소문자의 크기로 대문자로 표현 1. column-width 단의 너비, 너비에 따라..

# 박스의 유형을 활용한 메뉴 구성하기 1. ul, li 태그 사용 메뉴 1 메뉴 2 메뉴 3 메뉴 4 # 박스의 유형을 활용한 메뉴 구성하기 2. div 태그 사용 애완견 종류 입양하기 건강 돌보기 더불어 살기 # 박스의 유형을 활용한 메뉴 구성하기 3. 시멘틱 태그 사용 최고의 쇼핑찬스 한가위 빅세일 추천 라이프 제휴 이벤트 추천 이벤트

# 마진(margin) 요소와 요소 사이의 간격 .b1 { /* 1. 각각 설정 */ margin-top: 30px; margin-bottom: 30px; margin-left: 30px; margin-right: 30px; } .b2 { /* 2. 한꺼번에 설정: 상 → 우 → 하 → 좌 시계방향으로 설정 */ margin: 50px 30px 30px 80px; } .b3 { /* 3. 한꺼번에 설정: 상/하, 좌/우 값이 같을 때 */ margin: 40px 20px; } .b4 { /* 4. 한꺼번에 설정: 상/우/하 값이 있을때, 왼쪽은 오른쪽과 같은 값을 사용 */ margin: 50px 40px 30px; } .b5 { /* 5. 한꺼번에 설정: 1개의 값, 상/우/하/좌의 값 모두 같을 때 ..

1. text-align : 텍스트의 위치를 좌/우/중간 중 하나로 위치하는 속성 - left(기본값), right, center - justify: 문단을 균등하게 배분하여 가지런하게 표현 2. text-indent 들여쓰기 - 크기로 지정. px, em, %(너비에 대한 비율) 3. line-heigth 줄 사이의 간격을 지정 - 크기를 지정 px, em, % 4. text-decoration : 텍스트의 상/하/중간에 선을 그려주는 속성 - none(기본값), overline, underline, line-through 5. text-transform : 텍스트를 대문자, 소문자, 단어의 첫글자만 대문자로 변경 - uppercase, lowercase, caital..

# background 속성 background: url("이미지파일") 배경 이미지를 지정하는 함수 background-image; url() 함수를 사용하여 이미지 지정 background-repeat; 반복 실행 설정, repeat(기본값), no-repeat background-position; 이미지를 반복하지 않을 때 위치 설정, top(기본값)/center/bottom, left(기본값)/center/right # background-size 속성 - 해당 요소의 너비와 높이의 값에 이미지를 표현하는 속성 background-auto; 기본값, 해당 요소 안에 이미지를 그대로 표현 background-contain; 해당 요소 안에 이미지를 확대/축소하여 이미지 전체를 표현 backgroun..

- Casecade Style Sheet - HTML: 웹의 형태, CSS: 웹을 장식, 배치 1. 인라인(inline) 방식 - 태그 안에 속성으로 css를 적용하는 방식 - 필요할 때 가끔 사용되는 방식, (권장 x) - 장점: 태그 안에 바로 속성을 설정함 - 단점: 코드가 복잡해지고, 관리가 어려움 2. 내부 선언 방식 - head영역 안에,tilte 밑에 style - style 태그 안에 css를 작성하는 방식 - 장점: 바로 확인 가능 - 단점: 길어지면 관리가 어려움 // 2. 내부 선언 방식 - head 태그 안, style 태그 안 h1 {color: blueviolet;} 3. 외부 선언 방식 - css 내용을 파일로 저장하여 링크하는 방식..