728x90 > 학습단19 [ HTML + CSS + 자바스크립트] 8.1 ~ 9.2 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 8.1) 자바스크립트 코드 작성 방법 (내부/외부) - 내부 스크립트 방법 - : script 태그 영역에 자바스크립트 코드 작성 - 외부 스크립트 방법 - script 위치 주의하기: body 태그 사이에 있음 body 태그 끝나기 직전에 위치함 9.1) 변수와 상수 : 변하는 수 데이터를 저장하고 관리하기 위한 공간으로 변수 만듦 ex) var, let : 변하지 않는 수 재할당 안됨 ex) const 9.2) 자료형 자료형 의미: 자바스크립트에서 사용할 수 있는 데이터의 종류 1) 기본 자료형 : 문자, 숫자, 논리,undefined, null, Symbol 자료형 2) 참조 자료형 : 객체(object).. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 7.1 ~ 7.3 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 7.1) 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 : 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 - 플렉스 박스 레이아웃 기본 속성 - DOCTYPE html> Document .container { color: rgb(63, 61, 56); background-color: aquamarine; padding: 1rem; display: flex; } .box { background-color: rgb(238, 141, 14); } .box:nth-child(2n) { background-color: blueviolet; } A B C : flex 또는 inl.. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.7 ~ 6.9 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.7 ) 애니메이션 속성으로 전환 효과 제어하기 DOCTYPE html> 애니메이션 속성으로 전환효과 제어하기 .box { width: 100px; height: 100px; background-color: red; animation-name: beChange; animation-duration: 2s; } @keyframes beChange { 0% { background-color: aqua; } 100% { background-color: beige; } } 애니메이션 속성: 전환효과 속성과 달리 키프레임을 정의해서 실행 : 특정 요소 적용할 키 프레임 이름 지정 .. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.5 ~ 6.6 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.5) 위치 속성으로 HTML 요소 배치하기 : 좌푯값에 따라 배치할 때 사용 Document body { height: 5000px; } .box { width: 100px; height: 100px; } .red { background-color: red; float: left; } .green { background-color: green; float: left; } .blue { background-color: blue; float: left; } - position 예시들 - - absolute 와 relative 기준점 차이 - absolute: 웹 브라우저의 왼쪽 위 모서리 relative: 요소의 왼쪽 위 모서.. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.3 ~ 6.4 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.3) 박스 모델을 구성하는 속성 다루기 - margin -border -padding -content 속성값 (4) margin-top margin-right margin-bottom margin-left 순으로 값을 의미함 - margin 적용 예시 - : margin과 달리 여러 속성값이 복합적으로 사용 p { border-width:2px; } - border-width 속성 - : 테두리 굵기 p { border-width:2px; border-style:dotted; } h1 { border-style; } h2 { line-height: 16px; } h3 { line-height: .. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.2 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.2 ) 텍스트 속성으로 텍스트 꾸미기 1. font - family : 글꼴 지정 : 쉼표로 구분 : 한글 또는 공백있는 글꼴명은 큰따옴표로 감싸야 함 2. font - size : 일반적인 텍스트 크기 = 16px 3. 숫자표기법 (font-weight) : 100 - 최소 굵기 900 - 최대 굵기 4. 키워드표기법 (font-weight) 5. font-style 6. font-variant : 텍스트를 크기가 작은 대문자로 변환 7. text-align : 텍스트를 정렬 8. text-decoration : 텍스트에 선 긋기 : a 태그와 같이 사용 가능 9. letter-spacing : 글자 사이 간격 조절 10. lin.. 2023. 4. 1. 이전 1 2 3 4 다음 728x90
