Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 경계(Border)과 요소의 내용 사이에 여백(Padding)을 추가하는 방법에 대해 알아봅시다! Working with Padding CSS에 padding property는 요소의 내용과 그것의 경계에 빈공간을 조절할 수 있습니다. 생김새 CSS 코드 p { padding: 20px; } 위 코드는 '20px 만큼 빈공간을 주겠다' 라는 의미이다. 예 어제의 코드에 내용을 더해 보도록 하겠습니다. .items-description { border: 2px solid #fff; padding: 20px; } 2px 크기의 줄로 된 흰색 경계를 넣겠다 경계와 요소의 내용 사이의 빈공간을 20px로 하겠다. HTML 코드 탈셋 무공 체라소서 1.아이템 세팅 1.1본캐 장비 ..

안녕하세요 동기 여러분! 오늘은 경계(Border)를 만드는 방법에 대해 알아봅시다! Create a Border CSS 코드에서 경계(Border)를 만들려면 3가지의 값들이 필요하다. 두께(Thickness) : px, em, rem의 단위를 통해서 경계의 두께를 정해줄 수 있다. 타입(Type) : 가장 많이 쓰이는 옵션은 solid (선으로 생김), dotted (...으로 생김), dashed(---으로 생김)가 있다. 색(Color) : 이름으로 된 색, HEX(16진법), RGB로 색을 정해줄 수 있다. 위 그림에 나온 코드에서는 '3px의 두께와 solid 타입에 흰색 경계를 만들겠다'라는 뜻이다. 예 어제의 아이템 세팅 HTML 코드에 사진을 더해서 코드를 꾸며 보았다. HTML 코드 탈..

안녕하세요 동기 여러분! 오늘은 CSS id Selector에 대해 알아봅시다. CSS id Selectors 기능은 Class와 상당히 비슷해서 헷갈릴 수도 있지만 알아두면 아주 유용한 친구가 Id Selector입니다. 운동을 열심히 하고 잠을 청했더니 잠이 빨리 와서 아침에 상쾌한 마음으로 일어나 친구 3명을 불러 카페에 커피를 마시러 갔습니다. 메뉴판을 보는데 아메리카노, 아이스 아메리카노, 카푸치노, 카페라떼 등등 메뉴가 보였습니다. 친구들은 아이스 아메리카노를 시키고 저는 아이스 아메리카노에 샷을 추가 해서 주문을 했습니다. 여기서 아이스 아메리카노가 Class Selector이고 샷을 추가 하는게 Id Selector입니다. 아래의 영주증을 보면 알 수 있는데ㅋㅋㅋ 3 아이스 아메리카노 1 ..

안녕하세요 동기 여러분! 오늘은 백그라운드 이미지 넣는 방법에 대해 알아봅시다. A Background Image 생김새 body { background-image: url("이미지 주소 또는 위치"); background-size: cover; } background-size: 백그라운드 이미지 크기를 설정해줄 수 있는데 몇 가지 속성들이 있다. auto : 기본값, 백그라운드 이미지의 원본크기 length : 백그라운드의 가로크기(width)와 세로 크기(height)를 정할 수 있음, 가로 크기와 세로 크기 중에 하나만 주어지면 나머지 하나는 auto로 설정됨 percentage : 백그라운드의 가로크기(width)와 세로 크기(height)를 부모 요소의 퍼센트 크기로 정할 수 있음, 역시 가로 ..

안녕하세요 동기 여러분! 오늘은 폰트 사이즈(font-size) = 글자 크기를 바꾸는 방법에 대해 알아보도록 합시다. font-size 생김새 h2 { font-size: 80px; } 1. pixel (px) : 가장 보편적으로 사용하는 폰트 사이즈의 크기를 나타내는 단위이다. h1 { font-size: 4rem; } /* 보통 기본 폰트 사이즈가 16px이기 때문에 아마 h1의 폰트 사이즈는 16 * 4 = 64px일 것이다. */ /* 브라우저 마다 기본 폰트 사이즈가 다를 수 있음 */ 2. rem(The root element's font-size) :가변형 폰트 사이즈, 이름에 힌트가 있다 root(뿌리, 최상위)의 폰트 사이즈에 비례해 폰트 사이즈를 변경할 수 있다. (예를 들어 현재 H..

안녕하세요 동기 여러분! 오늘은 CSS Class Selector에 대해 알아봅시다! CSS Class Selectors 지금까지는 HTML의 요소를 CSS파일에서 설정을 하였습니다. 하지만 h1, h2, p , a, body 등등 무수히 많은 HTML 요소들 말고도 다른 방법으로 지정해 주는 방법이 있습니다. 아래의 코드를 한번 보겠습니다. 회사가 가기 싫은 나 회사에서 조금 큰 사고를 친적이 있는데 그 다음날 출근을 하려니까 너무나도 가기가 싫었다. 혼나는것도 두렵고 내 자신이 한심스럽기도하고 짜증이랑 짜증은 대폭발 일보직전이라 아무것도 하기가 싫었다. 그러다가 세상에서 가장 오래 사귄 나의 FireEgg 친구에게 연락을 해서 이런일이 있는데 어떻게 해야할까 물어보니 내 친구의 아주 현명하고 간결한 ..

안녕하세요 동기 여러분! 오늘은 HTML에 CSS로 글자에 색을 입히는 방법에 대해 알아보도록 합시다! Colour 아래의 코드는 CSS 코드입니다. h1 { color: blue; } CSS에는 이름으로 지정된 색이 140가지나 있습니다. 140가지는 아래의 링크로 가시면 확인해보실 수 있습니다. w3school HTML Color Values : https://www.w3schools.com/colors/colors_hex.asp HTML Color Values W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like ..

안녕하세요 동기 여러분! 오늘은 HTML에 CSS로 폰트를 적용하는 방법에 대해 알아봅시다! font-family 아래는 CSS 코드입니다. h1 { font-size: 32px; font-family: "Comic Sans MS", "서울남산 장체EB", serif; } Selector로 h1을 정해 놓고 중괄호 안에 font-family: "Comic Sans MS", "서울남산 장체EB", serif;가 오늘 알아볼 부분입니다. 제가 위 코드에 글꼴을 무려 3개나 적어 놓았는데 이유는 혹시 몰라서 입니다. 이게 무슨 소리인가? (누가 기침 소리를 내었어? 금부장은 무얼하는가? 어서 저놈의 ...) "Comic Sans MS"를 적어 놓은 이유는 영어 철자의 글꼴을 바꾸어 주기 위함 "서울산 장체 E..

안녕하세요 동기 여러분! 오늘은 CSS의 기본 틀과 모양에 대해 알아보도록 합시다! Anatomy of a CSS Rule 위 그림을 보고 알아봅시다. CSS의 인스트럭션(instruction)들은 HTML의 요소 또는 그 그룹을 어떻게 스타일할지 특정합니다. selector : 정확히 어떤 HTML의 요소를 특정할지 정합니다. 위 그림에서는 h1이 selector입니다. properties and values : { } 중괄호(curl brackets) 안에 위치하는 selector가 특정한 HTML 요소를 어떨게 스타일할지 결정하는 역할을 합니다. 위 그림에서는 color가 property이고 value가 red로 정해져 있어 h1의 요소들은 빨간색으로 나타납니다. 오늘의 느낌 오미크론이 전세계로 퍼..

안녕하세요 동기 여러분! 드디어 오늘 HTML에 CSS(stylesheet)을 연결하는 방법에 대해 자세히 알아보겠습니다! Link to a Stylesheet 지금까지 제가 포스팅한 예제들을 보면 흰 바탕에 검은 글씨가 전부인 아주 기본적인 웹 페이지들이었습니다. 하지만 CSS를 사용한다면 깜찍뽕짝한 웹 페이지들을 만들 수 있게 됩니다. HTML의 링크 요소를 사용하면 CSS 파일의 스타일을 입힐 수 있게 됩니다. CSS 파일에 링크 / 생김새 링크 요소에는 세 가지 속성들을 사용합니다. - rel : 링크할 파일과 현재 파일의 관계를 명시합니다. 위와 같은 경우에는 rel의 속성이 "stylesheet"입니다. - type : 링크할 파일의 타입을 명시합니다. - href : 링크할 파일의 URL을 ..