본문 바로가기

CODEIT;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.
CSS 핵심 개념 : 기본 개념 정리 CSS 규칙 선택자 { 속성: 속성값; 속성: 속성값; } CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 걸 권장함 CSS 선택자 규칙에서 요소를 선택하는 데 사용하는 부분 태그 이름 h1, div 같은 걸 쓰면 그 태그에 해당하는 요소들에 모두 스타일을 적용함 예를 들어서 모든 h3 태그의 글자 크기를 24px로 하려면 아래와 같이 씀 h3 { font-size: 24px; } 아이디(id) 맨 앞에 샵을 붙여서 #아이디_이름 과 같은 문법으로 씀 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안 됨 예를 들어서 아이디 이름이 hallasan인 태그에 글자색을 넣으려면 아래와 같이 씀 우도 한라산 국립공원 성산 일출봉 군산 오름 #hallasan { color: #f565.. 2023. 8. 28.

티스토리툴바