본문 바로가기

전체 글331

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.
웹 퍼블리싱 시작하기 : HTML/CSS를 공부하는 법 WHATWG MDN 2023. 8. 27.
웹 퍼블리싱 시작하기 : 편리한 도구 Live Server Codepen 2023. 8. 27.

티스토리툴바