본문 바로가기

Frontend

 (290)
[CSS] 박스모델 정리 border 속성 굵기, 테두리종류, 색상 순서대로 작성 border: 2px solid #ededed; border-radius 속성 박스 모델의 모서리를 둥글게 만들 때 작성 border-radius: 16px; 타원 만들기 border-radius: 50%; 알약 만들기 border-radius: 9999px; box-sizing 속성 기본적으로 요소의 크기를 지정하면 그 크기는 콘텐트 영역에 대한 크기가 된다. #box 요소의 실제 너비는 100 + 30 + 30 = 160px. #box { margin: 20px; padding: 30px; width: 100px; } 좀 더 직관적으로 코드를 작성하고 싶다면 다음과 같이 작성할 수 있다. #box { margin: 20px; padding: 3..
[CSS] padding/ margin 표기법 Padding 표기법 padding: 16px 8px 24px 10px; // 시계방향 순서대로 상 우 하 좌 padding : 16px 8px; // 상하 16px 좌우 8px padding : 16px 8px 20px; // 상 16px 좌우 8px 하 20px; padding-top: 16px; padding-right: 8px; padding-bottom: 24px; padding-left: 10px; Margin 표기법 padding 과 비슷하나 auto 를 쓸 수 있는데 반드시 width 값이 지정되어 있어야 함. 각각 속성을 작성해줄수도 있음. width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */ margin: 16px auto; margin-top: 16p..
[웹개발 종합반] 2주차 fetch fetch 함수 이용해서 미세먼지 데이터 불러오기 1. 요소 추가하기 1-1. J-Query function q1() { fetch("http://spartacodingclub.shop/sparta_api/seoulair") .then((res) => res.json()) .then((data) => { let rows = data["RealtimeCityAir"]["row"]; rows.forEach((a) => { let gu_name = a["MSRSTE_NM"]; let gu_mise = a["IDEX_MVL"]; let temp_html = `${gu_name} : ${gu_mise}`; $("#names-q1").append(temp_html); }); }); } 1-2. JavaScript ..
[웹개발종합반] 2주차 J-Query 연습하기 forEach 구문을 이용해 J-Query 로 반복문 작성 function checkResult() { let people = [ { name: "서영", age: 24 }, { name: "현아", age: 30 }, { name: "영환", age: 12 }, { name: "서연", age: 15 }, { name: "지용", age: 18 }, { name: "예지", age: 36 }, ]; $("#q2").empty(); people.forEach((a) => { let temp_html2 = `${a.name}은 ${a.age} 살 입니다.`; $("#q2").append(temp_html2); }); } 점 표기법으로 요소노드 추가했으나 $("#q2").empty(); people.forE..
[CSS] 불투명도: opacity opacity 값이 1에 가까워질수록 불투명해지는 속성으로 태그 전체를 반투명, 불투명하게 바꿀수 있음. opacity: 0; /* 투명 */ opacity: 0.6; opacity: 1; /* 불투명 */
[CSS] 그림자: box-shadow box-shadow: 박스에 그림자를 나타내는 기능으로 다음과 같이 작성될 수 있음. box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6); /* 가로: 5px 세로: 10px 흐린 정도(Blur): 15px 퍼지는 정도(Spread): 8px 색상: rgba(0, 0, 0, 0.6) */ box-shadow: 10px 15px 20px 5px rgba(0, 0, 0, 0.4); /* 가로, 세로, 블러, 그림자가 퍼지는 크기, 그림자 색상*/ 유용한 사이트 https://cssgenerator.org/box-shadow-css-generator.html
[CSS] 그라디언트: linear-gradient linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); 그라데이션을 나타낼 수 있는 속성으로 보통 배경이미지에 많이 사용된다. 특정 각도를 입력하여 각도에 맞게 그라데이션이 나타나도록 할 수 있음. 내가 만든 웹사이트에서도 이 속성이 사용되었는데, .wrap{background: linear-gradient(to right bottom,#0f0f0f,#282828);} 오른쪽 아래 방향 ↘️ 으로 그라데이션이 가게끔 작성했음. 다음처럼 그라데이션기능과 이미지를 같이 넣어 디자인 효과를 줄 수도 있다. background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)), url("pizza.png");..
[CSS] 배경이미지: background-image background-imgae: url("") 배경에 이미지를 넣을수 있는 속성으로, 다음 속성들과 같이 사용할 수 있다. 같이 쓰면좋은 속성들 background-repeat: no-repeat; 배경 이미지가 작은 경우, 배경을 반복하지 않는다. background-position: center; 중앙정렬 background-size: cover; 이미지 비율을 유지하면서, 이미지를 꽉 차게 background-size: contatin; 이미지가 잘리지 않는선에서, 최대크기로 배치 background-position: top; /* 위 */ background-position: right; /* 오른쪽 */ background-position: bottom; /* 아래 */ background-po..

티스토리툴바