Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 요소들을 가지런히 웹 페이지 안에 정렬하는 방법에 대해 알아봅시다! Display: Flex 지난 시간까지 사용했던 예제를 보면 사진들이 촥 정렬이 되어 있는 것을 볼 수 있는데요, 코드 적용 전과 후를 비교해보면서 알아보도록 하겠습니다. 적용 전 위의 사진은 아래의 코드를 뺀 상태입니다. .items { display: flex; flex-wrap: wrap; justify-content: center; } 코드를 한 줄 한 줄 적용해보고 어떤 기능이 있는지 적어보겠습니다. display: flex; 적용 후 display: flex;만 적었을 경우 flex-wrap의 속성은 자동으로 nowrap으로 지정이 되기 때문에 위 사진과 같이 사진이 행으로 쭉 나열되는 모습을 ..

안녕하세요 동기 여러분! 오늘은 CSS의 float 프로퍼티에 대해 알아봅시다! Using Float 저번 시간에 만든 메뉴바 옆에 빈 공간이 있는데 거길 채워 주고 싶을 때 float 프로퍼티를 사용하여 채워 줄 수 있습니다. 생김새 .bloglink { float: right; } float: right; 오른쪽에 띄우겠다. float: left; 왼쪽에 띄우겠다. float: none; 띄우지 않겠다. float: inherit; 요소는 요소의 부모로부터 float 값을 상속받겠다. 해봅시당 제가 최근에 시작한 디아블로2 블로그 링크를 빈 공간에 한번 채워보도록 하겠습니다. 동기의 디아블로2 블로그 ※ target="_blank" 새창에서 실행 이 코드를 태그 밑에 태그 위에 넣어주고 HTML 코드..

안녕하세요 동기 여러분! 오늘은 무조건 줄 바꿈이 이루어지는 요소를 한 줄에 박아 넣는 묘기를 선보이겠습니다. Keep It Inline HTML로 list를 작성하면 이 친구들은 절대 한 줄에 같이 나오지 않고 여러 줄에 나옵니다. 피카츄 라이츄 파이리 꼬부기 버터플 야도란 이럴 때 CSS로 display: inline; 으로 조정해주면 한 줄에 촥! 정렬합니다. li { display: inline; } 이게 답니다.ㅋㅋㅋㅋ 예 어제에 이어서 오늘은 태그를 사용해서 메뉴 바를 한번 추가해보았습니다. (용병 장비 사진도 업데이트하였습니다.) HTML 코드 탈셋 무공 체라소서 1.아이템 세팅 1.1본캐 장비 1.2용병 장비 1.1본캐 장비 머리 : 탈라샤 뚜껑 갑옷 : 탈라샤 갑옷 무기 : 222 탈라샤..

와쌉 동기 브로스! 마진(Margin) 프로퍼티에 대해 겁나 빠르게 알아 봅시다! 겁나 쉬움 Working with Margin 마진(Margin) 프로퍼티는 웹 사이트에서 HTML 요소들의 사이 사이에 공간을 설정할 수 있는 빠워를 가지고 있습니다. 생김새 .item { margin: 3px; } class ="item"을 가지고 있는 모든 요소들은 사이에 3px의 공간을 갖게 하라! margin-top : 위 공간 설정 margin-bottom : 아래 공간 설정 margin-left : 왼쪽 공간 설정 margin-right : 오른쪽 공간 설정 예 사실 이전 코드에서 margin을 사용 했기 때문에 별로 달라지진 않았습니다 ㅠ ㅠ 우리가 오늘 배운 내용의 CSS 코드 입니다. (지난번 코드와 다르..

안녕하세요 동기 여러분! 오늘은 경계(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 친구에게 연락을 해서 이런일이 있는데 어떻게 해야할까 물어보니 내 친구의 아주 현명하고 간결한 ..