Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 !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과 ..

안녕하세요 동기 여러분! 오늘은 폰트 사이즈를 바꾸는 방법에 대해 알아봅시다. Font Size p { font-size: 14px; } 잉? 이게 다입니다ㅋㅋㅋㅋ 하지만 이밖에도 더 많은 단위가 있으니... Pixel(px) 가장 보편적으로 사용하는 폰트 사이즈의 크기를 나타내는 단위 p { font-size: 16px; } em(The root element's font-size) 뿌리(최상위) 요소의 폰트 사이즈!!! 현재 HTML 문서에 지정된 폰트 사이즈의 크기에 비례하여 폰트 사이즈의 크기를 나타내는 단위 (예를 들어 현재 HTML 문서의 폰트 사이즈가 14px라고 치면 1rem은 14px, 2rem은 28px입니다.) 안녕하세요! * { font-size: 14px; } p { font-si..

안녕하세요 동기 여러분! 오늘은 웹페이지의 글씨체 바꾸기에 대해 알아봅시다! Font Family 웹페이지의 글씨체를 바꾸기 위해서는 font-family라는 프로퍼티가 필요합니다. 생김새 p { font-family: 굴림체; } 위 코드는 '태그 안에 있는 글씨체를 굴림체로 바꾸겠다.'라는 의미를 가지고 있습니다. font-family를 사용할 때 유의 사항 사용할 글씨체는 반드시 사용자의 컴퓨터에 설치되어 있거나 사이트에 다운로드되어 있어야 한다. 웹 세이프 폰츠(Web safe fonts)에 있는 글씨체들은 거의 모든 브라우저나 작동 시스템에 지원을 한다. 웹 세이프 폰츠(Web safe fonts)를 사용할 경우 모든 브라우저나 작동 시스템에서 같은 글씨체가 나오지 않을 수도 있다. 글씨체의 이..

안녕하세요 동기 여러분! 오늘은 여러 선택자를 한 옵션에 박아 넣은 방법에 대해 알아봅시다. Multiple Selectors 동기의 일기 오늘 아침에 일어나 닭가슴살과 밥을 먹고 딥스를 하였다. 위의 HTML 코드의 글씨체를 한 번에 바꾸기 위해서는 다양한 방법이 있지만 오늘 배울 방법은 아래의 코드입니다. h1, p { font-family: '궁서체'; } 바로 , (comma)를 사용하여 구분하면 글씨체 한 번에 적용이 됩니다. 클래스가 섞인 경우 동기의 일기 오늘 아침에 일어나 닭가슴살과 밥을 먹고 딥스를 하였다. h1, .근엄 { font-family: "궁서체"; color: crimson; } crimson 색을 추가하였습니다. 클래스와 아이디가 섞인 경우 동기의 일기 오늘 아침에 일어나 ..

안녕하세요 동기 여러분! 오늘은 자손 결합자(Descendant Combinator)에 대해 알아봅시다! Descendant Combinator 자손 결합자(Descendant Combinator)는 저번시간에 배운 체이닝(chaining)의 반대 개념입니다. 체이닝에서는 CSS 코드에서 HTML 요소를 먼저 가져오고 클래스명을 쓰는 방식이었습니다. /* 예 */ h2.classname { color: red; } 자손 결합자(Descendant Combinator)는 이렇습니다. /* 예 */ .classname h2 { color: red; } 예시1 빨간색 글씨 파워~~~ 검정색 글씨 파워~~~ /* CSS 코드 */ .red h2 { color: red; } 이 둘을 적용하면 아래와 같은 화면이 ..

안녕하세요 동기 여러분! 오늘은 CSS에서의 체이닝에 대해 알아봅시다! Chaining CSS에서 속성 선택자(Attribute selector)를 지정할 때 HTML의 요소와 두 가지 이상의 CSS 선택자를 한 번에 사용할 수 있습니다. 예를 들어 아래와 같은 HTML 코드가 있습니다. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. CSS 코드로 다음과 같은 코드를 적용하면 첫 번째 "주먹이 곧 나의 무기요."에게만 적용이 됩니다. h2.operation { color: red; } 다음 예로는 아래와 같은 HTML 코드가 있습니다. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. CSS 코드로 두 가지의 경우의 코드를 적용하면 첫 번째 "주먹이 ..