CODEIT;28 프로그래밍 시작하기 in JavaScript : 작명 가이드 꼭 지켜야 하는 룰 (지키지 않으면 오류) 1. JavaScript 식별자는 문자, 밑줄 혹은 달러 기호로 시작해야 함 (두 번째 글자부터는 숫자도 가능) 2. 대문자와 소문자 구별 3. 예약어는 사용하면 안 됨 지키면 좋은 룰 (더 좋은 스타일을 위해) 1. 의미 없는 이름은 좋지 않음 2. 너무 추상적인 이름은 좋지 않음 3. 모든 변수 이름은 'camelCase'로 쓰는 것이 좋음 https://github.com/ParkSB/javascript-style-guide GitHub - parksb/javascript-style-guide: Airbnb JavaScript 스타일 가이드 Airbnb JavaScript 스타일 가이드. Contribute to parksb/javascript-style-.. 2023. 9. 18. CSS 핵심 개념 : 선택자 레시피 모든 곳에서 border-box를 쓰고 싶을 때 박스 모델의 크기는 기본적으로 콘텐트(context-box)를 기준으로 정해짐 모든 요소의 크기를 테두리(border-box)를 기준으로 하고 싶다면 아래처럼 추가하고 쓰면 됨 항상 이 코드를 추가하는 것도 좋음 * { box-sizing: border-box; } 같은 클래스지만 변화를 주고 싶을 때 똑같은 상품 버튼이지만, 품절된 상품의 버튼을 보여줄 때나 똑같은 이미지이지만 유저가 선택한 이미지를 보여줄 때처럼 같은 클래스지만 살짝 다른 경우에 쓰면 좋음 메인 소개 글 .menu { background-color: #000000; padding: 16px; } .menu-link { color: #ffffff; font-weight: bold; tex.. 2023. 9. 2. CSS 핵심 개념 : 알아두면 좋은 선택자 전체 선택자(Universal Selector) * 라는 선택자는 모든 요소를 선택하는 선택자임 모든 요소를 선택하기 * { box-sizing: border-box; } .gallery의 모든 자식 요소 선택하기 .gallery > * { width: 120px; height: 90px; } n번째 자식 선택자(n-th child Selector) :nth-child() 를 사용함 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있음 (1부터 시작) .gallery의 세 번째 자식 .gallery :nth-child(3) { ... } .gallery의 짝수 번째 자식 .gallery :nth-child(even) { ... } .gallery :nth-child(2n) { ... }.. 2023. 9. 2. CSS 핵심 개념 : 선택자 정리 CSS 선택자(CSS Selector) CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부름 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있음 선택자 { 선언; 선언; 선언; } 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있음 선택자1, 선택자2 { ... } 선택자 붙여쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있음 몽골 대자연으로 떠나는 여행 예시 1. 아이디 + 클래스 #mongolia.title 예시 2. 클래스 + 클래스 .large.title 예시 3. 태그 + 아이디 + 클래스 h2#mongolia.large.title 자식 결합자(Child Combinator) 오른쪽 꺾쇠로 선택자를 이어.. 2023. 9. 2. 소프트웨어 이해하기 : 컴파일러 vs 인터프리터 컴파일러와 인터프리터 요약 컴파일러 인터프리터 개발 편의성 코드를 수정하고 실행하려면 컴파일을 다시 해야 한다 코드를 수정하고 즉시 실행할 수 있다 실행 속도 빠르다 느리다 보안 프로그램의 코드가 유출되지 않는다 프로그램의 코드가 유출될 수 있다 파일 용량 프로그램의 실행 파일 전체를 전송해야 하므로 용량이 크다 프로그램의 코드만 전송하면 실행이 되므로 용량이 작다 프로그래밍 언어 C, C++처럼 비교적 저수준에 가까운 언어 Python, Ruby처럼 비교적 고수준에 가까운 언어 2023. 9. 2. CSS 핵심 개념 : Display 정리 블록(Block) 위에서 아래로 차례대로 배치되는 요소 크기를 지정할 수 있음 다음 태그들은 기본적으로 display 값이 block임 , , ..., 인라인(Inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치됨 블록과 달리 크기를 지정할 수 없음 다음 태그들은 기본적으로 display 값이 inline임 참고로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있음 인라인 블록(Inline-block) 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성 float 속성 float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있음 블록, 인라인 블록, 인라인 비교 블록 인라인 블록 인라인 기본크.. 2023. 8. 28. 이전 1 2 3 4 5 다음
