Dongi_coding 동기_코딩

와썹 동기 가이즈! 오늘은 패딩에 대해 알아보도록 합시다! Padding 위의 그림과 같이 패딩은 경계(border)와 내용(content)사이에 있는 공간을 나타냅니다. 코드에서의 padding p { border: thick solid teal; padding: 30px; width: 7.5rem; } 위 코드를 실행 하면 아래와 같은 모습 padding을 없애고 실행하면 이런 모습이 됩니다. 방향에 따른 프로퍼티 설정 padding: 30px;로 코드를 설정하면 네 방향으로 30px씩 빈공간을 만들지만 padding-top: 30px;로 코드를 설정하면 윗 방향으로 30px의 빈공간을 만듭니다. 프로퍼티 설명 padding-top 내용 위쪽으로 빈공간을 만들고 싶을 때 padding-right 내용..

안녕하세요 동기 여러분! 오늘은 보더 레디우스(Border Radius) = 모퉁이 깎기에 대해 알아봅시다! Border Radius border-radius프로퍼티 h1 { border: thick solid teal; border-radius: 40%; width: 210px; } border-radius가 40%로 지정돼서 직사각형이 아닌 둥그스름한 도형으로 바뀌었습니다. 예시 Fire love /* CSS 코드 */ h2 { border: thick solid rgb(187, 0, 0); border-radius: 50%; width: 210px; text-align: center; } border-radius를 50%를 지정했을 때 가장 예쁜 타원형이 됩니다. You wanna piece of ..

안녕하세요 동기 여러분! 오늘은 경계(Border)에 대해 알아보도록 합시다. Borders 경계의 생김새는 아래와 같이 생겼습니다. CSS에서의 코드는 아래와 같이 생겼습니다. p { border: 3px solid red; } 위 코드를 보시면 3가지 종류의 값들을 넣는데 width와 style 그리고 color입니다. Width border에서의 width는 경계선의 굵기를 의미합니다. 아래의 예시는 15px의 굵기입니다. 값 설명 thin 좁은 굵기 medium 중간 굵기 - 기본값 thick 굵은 굵기 숫자 + px 가장 많이 사용하는 픽셀단위 이밖에도 in, pt, cm, em 등등 무수히 많은 단위들이 있다. ※ 만약 width의 값을 정하지 않고 공백으로 둔다면 기본값인 medium으로 설..

안녕하세요 동기 여러분! 지난 시간에 이어서 이제 height와 width를 적용하는 방법과 어찌 생겼는지 알아봅시다. Height and Width height와 width를 지정하지 않고 어떠한 content를 실행한다면 날것의 content에 HTML 박스가 height와 width가 조정되어 나타납니다. 하지만 높이와 폭을 지정해주고 싶다면 아래의 방법으로 가능합니다. p { height: 70px; /* em, rem으로도 가능 */ width: 350px; } px로 높이와 폭을 딱 정했을 때의 문제는 어떤 디바이스에서든 딱 정해진 높이와 폭으로 밖에 보이지 않습니다. (부트스트랩을 쓴다면 다름) 예시 엊그제 고스트 페퍼가 들어간 알리올리 소스를 팔길래 한번 사보았다. 한 뭉태기를 빵에 발라 ..

안녕하세요 동기 여러분! 오늘은 CSS의 박스 모델이 어떻게 구성이 되어 있는지 알아보도록 합시다. The Box Model 박스 모델은 margin, border, padding, content height, content width의 프로퍼티로 이루어져 있는데 이들 값으로 요소가 웹 페이지에서 공간을 어떻게 차지할지 조절할 수 있습니다. 생김새 width 와 height : content의 높이와 폭을 나타냅니다. padding : border와 content 공간 사이의 공간을 나타냅니다. ( 영어 사전에서의 padding : 충전재 ) border : content의 공간과 padding의 공간을 감싸는 (두께가 있는)경계 또는 스타일. ( 영어 사전에서의 border : 경계, 가두리 ) mar..

안녕하세요 동기 여러분! 오늘은 !important에 대해 알아봅시다. Exclamation mark Important Specificity에서 type과 class, id 모두 같이 적용을 할시에 id만 적용되는 모습을 볼 수 있었습니다.(클릭시 Specificity 포스팅으로 이동) !important를 이용해 다시 해봅시다! 승자는 누구인가! h1 { color: red !important; } .blueclass { color: blue; } #greenclass { color: green; } !important를 h1 { color: red 옆에 붙여 넣었더니 빨간색으로 글자가 나옵니다. !important 프로퍼티를 붙일 시 적용받는 프로퍼티와 값은 다른 어떠한 프로퍼티와 값들 보다도 우선시..

안녕하세요 동기 여러분! 오늘은 배경 이미지를 넣는 방법에 대해 알아봅시다! Background Image * { background-image: url('이미지 주소'); } 여기서 따옴표(Quotation mark)는 큰따옴표(" ")를 써도 상관이 없다. 배경 이미지 겹치는 방법 배경 이미지 겹치기는 필자가 링크한 MDN Web Docs에 가서 background-image의 CSS Demo를 클릭해보면 쉽게 이해할 수 있다. 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/background-image background-image - CSS: Cascading Style Sheets | MDN CSS background-image 속성은 요소의 배경 이..

안녕하세요 동기 여러분! 오늘은 글씨 색과 배경 색을 설정하는 방법에 대해 알아봅시다! Color and Background Color 글씨 색을 설정하는 방법 p { color: red; } 배경 색을 설정하는 방법 p { background-color: blue; } 색을 설정하는 팁 여기에 방법이 들어 있습니다!!! 동기 코딩 [HTML & CSS] color : https://dongi-coding.tistory.com/124 [HTML & CSS] color 안녕하세요 동기 여러분! 오늘은 HTML에 CSS로 글자에 색을 입히는 방법에 대해 알아보도록 합시다! Colour 아래의 코드는 CSS 코드입니다. h1 { color: blue; } CSS에는 이름으로 지정된 색이 140가지나 있 don..

안녕하세요 동기 여러분! 오늘은 텍스트 정렬에 대해 알아봅시다! Text Align p { text-align: center; } 방법은 위와 같이 작성해주시면 됩니다. 정렬 정렬 방식 설명 left 왼쪽으로 정렬 right 오른쪽으로 정렬 center 가운데로 정렬 justify 줄을 늘려 각 줄의 폭을 맞춤 (신문 기사와 잡지에서 많이 씀) inherit 부모 요소의 정렬을 따름 예 집에 먹을 것이 거의 떨어져 장을 보러 갔다. 집 근처 마트에 갔는데 크리스마스 이브라 그런지 사람들이 엄청 많아서 계산대의 줄이 너무 길었다. 내가 사는 곳 근처의 마트는 셀프 계산대와 캐셔 계산대가 구분되어 있는데 이유는 모르겠으나 셀프 계산대의 줄에 사람이 대략 50명은 되어 보였다. '아 저 줄을 언제 기다려서 사..

안녕하세요 동기 여러분! 오늘은 폰트 굵기(Font weight)를 바꾸는 방법에 대해 알아봅시다! Font Weight p { font-weight: bold; } 사용 방법은 위의 예시와 같이 쓰면 됩니다. 굵기의 종류 굵기 설명 normal 보통 굵기 - 기본 굵기 bold 굵은 굵기 bolder 더 굵은 굵기 lighter 얇은 굵기 100 ~ 900 400의 굵기는 보통 굵기(normal)와 같고 700의 굵기는 굵은 굵기(bold)와 같다. initial 기본 굵기로 돌아감 inherit 부모 요소의 굵기로 따라감 h1과 900의 굵기 비교 화무십일홍 화무십일홍 /* CSS 코드 */ p { font-weight: 900; font-size: xx-large; } 실행화면 결과를 보니 h1과 ..