본문 바로가기

전체 글400

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.
CSS 핵심 개념 : 텍스트 스타일링 정리 글자 색 color 빨강 주황 노랑 .red { color: #F23030; } .orange { color: #F28705; } .yellow { color: #F2CB05; } 글자 크기 font-size 크게 중간 작게 .large { font-size: 24px; } .medium { font-size: 16px; } .small { font-size: 8px; } 글꼴 font-family Poppins 있는 노토 산스 케이알 Poppins 없는 노토 산스 케이알 #with-poppins { font-family: Poppins, "Noto Sans KR", sans-serif; } #without-poppins { font-family: "Noto Sans KR", sans-serif; } 글.. 2023. 8. 28.
CSS 핵심 개념 : 코멘트 코멘트 문법 /* 찜하기 버튼 */ .zzim-button { font-size: 24px; padding: 8px; } 코멘트는 /* 으로 시작해서 */ 으로 끝남 코드를 읽는 사람들을 위한 설명이며 실행에는 아무런 영향을 주지 않음 /* 마켓 코드잇 CSS v1.5.0 */ /* 찜하기 버튼 */ .zzim-button { font-size: 24px; padding: 8px; /* 임시로 정한 값 */ } 이런 식으로 코멘트는 여러 줄로 쓸 수도 있고 CSS 규칙 안에도 들어갈 수 있음 코멘트는 언제 다는 게 좋을까? 1. CSS 선택자를 쉽게 이해할 수 있도록 고쳐 본다. 2. 그래도 이해가 어려울 거 같으면 코멘트를 단다. /* 마켓 코드잇 CSS v1.5.0 */ .wishlist-button.. 2023. 8. 28.

티스토리툴바