본문 바로가기

전체 글400

CSS 핵심 개념 : 스타일 계산하기 정리 캐스케이드 (Cascade) 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 작용하는 것 우선순위가 높은 규칙일수록 우선적으로 속성을 적용함 스타일 시트의 종류 브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮음 예를 들어서 브라우저 기본 CSS에서 아래처럼 쓰고 있다고 가정 h2 { display: block; font-size: 1.5em; ... font-weight: bold; } 이 때, 우리가 style.css 파일에서 아래처럼 쓰면, 우리가 작성한 스타일시트(Author Stylesheet)의 우선순위가 더 높기 때문에 글자 크기는 2em이 됨 .. 2023. 9. 18.
프로그래밍 시작하기 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.

티스토리툴바