728x90 나도코딩25 [나도코딩] HTML + CSS + 자바스크립트 질문 - 1 자바스크립트 341p Q: 식별자의 첫 글자는 일반적으로 영어 소문자로 알고 있는데 파스칼 표기법은 각 단어의 첫 글자를 대문자로 작성하는 방법이면 대문자로 작성되는게 이해가 되는데 언더스코어 표기법 또한 첫 글자를 대문자로 작성해도 상관이 없나요? 책에는 언더스코어의 대문자에 대해서 나온 부분이 없어서 질문드립니다! A: 언더스코어 표기는 대소문자 상관없이 _(언더바)를 연결하여 상수명을 짓는 것을 의미합니다. 따라서 FIRST_NAME처럼 전체가 대문자여도 상관없죠. 자바스크립트 357p Q: == 는 값이 같으면 true를 반환하니 숫자형이고 문자열이라는 차이는 있지만, 값이 10이니까 같다고 판단돼서 true라고 이해했는데요, === 는 값과 자료형이 같아야 true를 반환하니, 숫자형이고 문자열.. 2023. 4. 5. [ HTML + CSS + 자바스크립트] 9.3 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 9.3 ) 연산자 - 이항 산술 연산자 - 단항 산술 연산자 - 단항 부정 연산자 - 이항 산술 연산자 - : 피연산자(숫자) 가 2개 필요한 연산자 -> 이항(2개) 거듭제곱 ** 나머지 구하기 % - 단항 산술 연산자 - : 피연산자(숫자) 가 1개 필요한 연산자 -> 단항 (1개) ++ 값 1 증가 -- 값 1 감소 : = 증감연산자 : 전치 연산 / 후치 연산으로 분류됨 1) 전치연산 : ~ 하기 전에 증감 = 할당하기 전에 1부터 증가시킴 2) 후치연산 : ~한 후에 층감 = 할당한 후에 1을 증가시킴 - 단항 부정 연산자 - : 항상 피연산자 앞 위치 : 음수 -> 양수 : 양수 -> 음수 - 대입 연산자 - : 데이터.. 2023. 4. 2. [ 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. [ HTML + CSS + 자바스크립트] 6.1 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.1) CSS의 특징 살펴보기 HTML 태그 : 태그 자체에 꾸밈을 담당하는 역할이나 기능X 하지만, 기본스타일시트가 내장 되어있으면 꾸며진 것처럼 보일 수 O (ex: hn태그) 스타일 적용은 웹브라우저에 내장된 기본스타일시트 스타일보다 사용자가 지정한 스타일 속성이 우선 적용된다 그리고 단계적 적용이 된다 = 같은 태그에 스타일 여러개가 있으면 결국 마지막에 적힌 스타일만 적용 결론: 마지막에 작성된 스타일 >사용자 정의 스타일 > 기본 스타일 시트 : 같은 태그에 중복해서 스타일이 지정될 때 사용 : 선택자를 분류해서 개수를 세고 점수를 곱해 합을 구해서 우선순위를 판단한다 선택자의 개별성 점수가 똑같을 땐 나중에 작성된.. 2023. 3. 26. 이전 1 2 3 다음 728x90
