본문 바로가기

전체 글330

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.
CSS 핵심 개념 : 박스 모델 정리 박스 모델(Box Model) HTML/CSS에서 요소는 기본적으로 박스 형태 밖에서부터 차례대로 바깥 여백인 마진, 테투리인 보더, 테두리와 실제 내용 사이의 여백인 패딩, 그리고 실제로 내용이 들어가는 콘텐트 박스가 있음 border 속성 주로 굵기, 테두리 종류, 색상 순서로 씀 예를 들어서 아래 코드는 2px 굵기의 실선으로 옅은 회색(#ededed)을 사용한 것 border: 2px solid #ededed; border-radius 속성 박스 모델의 모서리를 둥글게 만들 때 사용 border 속성 없이도 쓸 수 있음 아래 코드는 16px 만큼 둥글게 하는 코드 border-radius: 16px; 엉뚱한수박님의 홈페이지 .card { padding: 20px; background-color: .. 2023. 8. 28.
CSS 핵심 개념 : 다양한 padding, margin 표기법 Padding 영역 안쪽에 여백을 넣을 때 사용 상하좌우 한 번에 padding: 8px; 상하, 좌우 각 padding: 16px 8px; 상, 좌우, 하 padding: 16px 8px 24px; 숫자의 순서는 시계 방향으로 0시 → 3시 → 6시 순서 상, 우, 하, 좌 padding: 16px 8px 24px 10px; 숫자의 순서는 시계 방향으로 0시 → 3시 → 6시 → 9시 순서 padding-속성 패딩 값을 각각 주고 싶을 때 쓰는 속성들 앞에서 상, 우, 하, 좌 값을 따로 썼던 걸 속성으로 나눈 것 아래 두 코드는 똑같은 코드임 padding: 16px 8px 24px 10px; padding-top: 16px; padding-right: 8px; padding-bottom: 24px;.. 2023. 8. 28.
CSS 핵심 개념 : CSS 속성 정리 배경 이미지 background-image url(...)이라는 문법으로 배경 이미지를 넣음 background-image: url('flowers.png'); 참고로 배경 이미지는 여러 개 넣을 수 있음 아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png가 깔리고, 맨 밑에는 c.png가 깔림 background-image: url('a.png'), /* 제일 위에 보이는 이미지 */ url('b.png'), url('c.png'); 배경의 위치 background-position 기본값은 left top(왼쪽 위)이고, 가운데 정렬을 하려면 아래처럼 center를 쓰면 됨 background-position: top; /* 위 */ background-position: right; /* 오.. 2023. 8. 28.

티스토리툴바